用jQuery / Javascript發射子彈

Question

我在JavaScript / jQuery中創建子彈射擊功能時遇到問題。 這個想法是，當我按下空格鍵時，會向右開火。 但是我不知道該怎么做。

這是工作示例： http : //jsfiddle.net/DuCFV/1/ （您可以使用WASD控制播放器）

這是代碼：

 <!DOCTYPE >
 <html>
  <head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <style>
        body {
            margin: 0px;
            padding: 0px;
            margin-top: 200px;
        }
        #gameField {
            width: 750px;
            height: 400px;
            border: 5px solid #ccffff;
            margin: auto;

        }
        #block {
            position: absolute;
            border: 5px solid #FFB2FF;
            left: 48%;
            right: 0px;
            top: 50%;
            bottom: 0px;
            width: 46px;
            height: 46px;
            margin: 0;
            border-radius: 90px;

        }
        .bullet {
            background-color: red;
            width: 20px;
            height: 20px;
            border-radius: 20px;
        }
    </style>
    <script>
        $(document).ready(function() {
            playerX = 750;
            playerY = 400;
            bulletX = 0;
            bulletY = 0;


            function gameLoop() {
                $('#block').css({
                    'top' : playerY,
                    'left' : playerX
                });

                $('.bullet').css({
                    'top' : bulletY,
                    'left' : bulletX
                });

                setTimeout(gameLoop, 60);
            }

            gameLoop();
        });



        $(document).keydown(function(event) {
            switch(event.keyCode) {

                case 65:
                    playerX = playerX - 10 // MOVE LEFT
                    break;
                case 87:
                    playerY = playerY - 10 // MOVE UP
                    break;
                case 68:
                    playerX = playerX + 15 // MOVE RIGHT
                    break;
                case 83:
                    playerY = playerY + 10 // MOVE DOWN
                    break;
                case 32:    // FIRE BULLET WITH SPACE-BUTTON.           
                    $('#block').append('<div class="bullet"></div>');
                    bulletX = bulletX + 10
                    break   
      });

    </script>
</head>
<body>
    <div id="gameField">
        <div id="block"></div>
    </div>
</body>

Answer 1

您將需要遍歷每個項目符號，並每隔X倍的時間更新它們的位置。 在游戲中，通常每秒執行30次。

function fire() {
    $("body").append($("<div>").addClass("bullet").css("left", 0));
}
$("input").click(fire);

function update() {
    $(".bullet").each(function() {
        var oldLeft = $(this).offset().left;
        $(this).css("left", oldLeft + 10 + "px");
    });
}
setInterval(update, 100);

http://jsfiddle.net/Xeon06/a72Fc/

如果要使用JavaScript開發像這樣的實時游戲，請考慮使用畫布而不是DOM元素繪制圖形。 這將使您的生活更輕松。

畫布游戲教程
在MDN上進行畫布

Answer 2

首先，您的子彈需要position:absolute;

用jQuery / Javascript發射子彈

問題描述

2 個解決方案

解決方案1
3 已采納 2011-10-19 15:01:09

解決方案2
0 2011-10-19 14:55:51

用jQuery / Javascript發射子彈

問題描述

2 個解決方案

解決方案1 3 已采納 2011-10-19 15:01:09

解決方案2 0 2011-10-19 14:55:51

解決方案1
3 已采納 2011-10-19 15:01:09

解決方案2
0 2011-10-19 14:55:51