1

我正在用 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)

}

关于如何让它流畅地移动的任何想法？当您按下箭头键时？

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

4

2 回答 2

0

每 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;
}
于 2013-04-06T08:20:21.717 回答
0

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

    $(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");
};
于 2013-04-06T08:56:03.887 回答