Question

我在JavaScript / jQuery中制作fire-a-bullet-function时遇到问题。这个想法是，当我按下空格键时，火将向右射击。但我不知道如何才能做到这一点。

以下是工作示例：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元素。它会让你的生活更轻松。

Answer 2

从您的子弹开始需要position:absolute;

使用jQuery / Javascript发射子弹

2 个答案: