jQuery /如何检测一个键是否被按下/ POLL功能

Question

我正在用Javascript制作一款乒乓球游戏，有一个球在屏幕周围弹跳，你不能让它接触包装盒的下边界。(弹跳球不是问题，我已经编程了)

这里是一个代码，应该使球拍移动从左到右，当你按下箭头键…但是球拍所做的是看起来比原始位置向左或向右很多像素。我的意思是，它不能流畅地移动，它只是在左边或右边出现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

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

    $(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");
};

Answer 2

每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帧/秒的自动重复:

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;
}