Question

我正在用Javascript制作一个Ping Pong游戏，并且屏幕周围有一个球弹跳，你不能让它触及包装盒的下边框。（弹跳球不是问题，我已经编程了）

这是一个代码，当你按下箭头键时，它应该让 raquet从左向右移动......但是raquet所做的就是看起来左边或右边有很多像素从原来的位置。我的意思是，它不会流畅地移动，它只是向左或向右显示30或100像素。

function gameLoop() { //**********DETECTS IF LEFT OR RIGHT KEYS ARE PRESSED************ $(document).keydown(function(e) { if(e.keyCode == 37) { //LEFT userBoxPosX -= userBoxSpeedX; } if(e.keyCode == 39) { //RIGHT userBoxPosX += userBoxSpeedX; } }); //THE USERBOX IS A DIV THAT WE WILL USE AS RAQUET userBox.css('left', userBoxPosX + "px"); setTimeout(gameLoop, 50); //THIS FUNCTION CALLS ITSELF EVERY 50 milliseconds (20FPS) }

我怎么能让它流畅地移动？当你按箭头键时？

如果您需要更多信息或需要我上传项目以便您可以看到它正常工作，请告诉我。

Answer 1

每50毫秒绑定一个另一个处理程序，所以几秒钟之后就有数百个处理程序绑定到keydown事件。因此，当您按下某个键时，该处理程序将连续运行数百次。

你应该在游戏循环之外建立一次处理程序。在循环中，您需要使用setTimeout在迭代之间将控制权返回给浏览器。当它等待超时时，按键将触发处理程序。

我认为这应该是基本结构：

var userBoxPosX = 0, userBoxLastPosX = null;

function gameLoop() {

    if (userBoxPosX !== userBoxLastPosX) { // Has racquet been moved?
        //THE USERBOX IS A DIV THAT WE WILL USE AS RAQUET
        userBox.css('left', userBoxPosX + "px");
        userBoxLastPosX = userBoxPosX;
    }

}

setInterval(gameLoop, 50); // Call main loop function every 50 ms (20 FPS)

$(document).keydown(function(e) {
   if(e.keyCode == 37) { //LEFT
        userBoxPosX -= userBoxSpeedX;
   }
   if(e.keyCode == 39) { //RIGHT
        userBoxPosX += userBoxSpeedX;
   }
});

以下是我认为你可以实现20 FPS自动重复的方法：

var userBoxDelta = 0;

function gameLoop() {

    if (userBoxDelta != 0) { // is raquet moving?
        //THE USERBOX IS A DIV THAT WE WILL USE AS RAQUET
        userBoxPosX += userBoxDelta;
        userBox.css('left', userBoxPosX + "px");
    }

}

setInterval(gameLoop, 50); // Call main loop function every 50 ms (20 FPS)

$(document).keydown(function(e) {
   if(e.keyCode == 37) { //LEFT
        userBoxDelta = -userBoxSpeedX;
   }
   if(e.keyCode == 39) { //RIGHT
        userBoxDelta = userBoxSpeedX;
   }
});

$(document).keyup(function() {
   userBoxDelta = 0;
}

Answer 2

一个简单的解决方案如下：

    $(document).keydown(function(e) {
         if(e.keyCode == 37) { //LEFT
            userBoxPosX -= userBoxSpeedX;
            updatePosition();
          }
         if(e.keyCode == 39) { //RIGHT
             userBoxPosX += userBoxSpeedX;
             updatePosition();
          }
      });

function updatePosition() {
    userBox.css('left', userBoxPosX + "px");
};

JS - jQuery /如何检测Key是否被按下/ POLL功能

2 个答案: