javascript - 不同电脑上的游戏循环速度不同

Question

所以我正在制作一个 JavaScript 游戏。我有这个基本的游戏循环引擎。

var left = 0,
    speed = documentHeight/300;

var keyState = {};
window.addEventListener('keydown',function(e){
    keyState[e.keyCode || e.which] = true;
},true);    
window.addEventListener('keyup',function(e){
    keyState[e.keyCode || e.which] = false;
},true);

function gameLoop() {
  if (keyState[39]) {
     left -= speed;
     move();
  }
  if (keyState[37]){
     left += speed;
     move();
  }

  function move() {
     element.style.left = left + 'px';
  }

  setTimeout(gameLoop, 20);
}
gameLoop();

我将其全部设置为 100% 高度，因此我设置了相对于文档高度的速度。它在我的电脑上运行得很好，即使调整大小也保持一致。但当我在 iMac 上测试时，元素的移动速度要慢得多。我也尝试过 window.requestAnimationFrame(gameLoop) 但同样的事情发生了。

这是否与某些屏幕处理更多 fps 有关？在所有计算机/屏幕上实现一致速度的最佳方法是什么？

Answer 1

每帧 20 毫秒，即 50 fps。这并不是很高，但在较慢的计算机上它可能会变慢(因为它跟不上)。

更安全的方法是仍然以您想要的帧速率运行它，但然后检查帧之间的时间增量并根据实际耗时进行移动，而不是假设恒定的 FPS。

最简单的方法就是记录每个循环的最后一次，然后从当前时间中减去，并根据时间量按某个因子进行缩放，例如:

所以我正在制作一个 JavaScript 游戏。我有这个基本的游戏循环引擎。

var left = 0,
    speed = documentHeight/300,
    lastTime = Date.now();

var keyState = {};
window.addEventListener('keydown',function(e){
    keyState[e.keyCode || e.which] = true;
},true);    
window.addEventListener('keyup',function(e){
    keyState[e.keyCode || e.which] = false;
},true);

function gameLoop() {
  const currentTime = Date.now();
  const delta = currentTime - lastTime;
  lastTime = currentTime;

  if (keyState[39]) {
     left -= speed * delta;
     move();
  }
  if (keyState[37]){
     left += speed * delta;
     move();
  }

  function move() {
     element.style.left = left + 'px';
  }

  setTimeout(gameLoop, 20);
}
gameLoop();

然后，只需设置相对于每毫秒的“速度”值(例如每毫秒 5 像素，或每毫秒屏幕高度的 0.00033%)。通过这样做并乘以耗时，即使您的实际循环速度不是非常一致，您也会获得更平滑的运动。

附加说明:有时，根据您的应用程序，您可能还想跟踪其余部分。如果您正在执行“每秒 10 像素”之类的操作，但已经过去了 20 毫秒，则为 10/1000 * 20 = 0.2px。由于您实际上无法移动 0.2px，因此您可能需要跟踪剩余部分并将其添加回下一个循环中。

或者，您可以让您的位置为小数并在draw()阶段解决它。这可能是一种更简洁的方法，也是我通常采用的方法。