不同计算机上的游戏循环速度不同

Question

所以我在做一个JavaScript游戏。 我有这个基本的gameloop引擎。

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游戏。 我有这个基本的gameloop引擎。

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();

然后，只需相对于每毫秒设置“速度”值即可（例如每毫秒5px，或每毫秒屏幕高度的0.00003％）。 通过这样做并乘以经过的时间，即使您实际的循环速度不是超级一致，您也将获得更平滑的运动。

补充说明：有时，根据您的应用程序，您可能还希望跟踪其余部分。 如果您正在执行类似“每秒10 / 1000 * 20 = 0.2px ”的操作，但是已经过去了10 / 1000 * 20 = 0.2px毫秒，则表示10 / 1000 * 20 = 0.2px 。 由于您实际上无法移动.2px，因此您可能希望跟踪其余部分并将其添加到下一个循环中。

另外，您可以让您的排名为小数，然后在draw（）阶段对其进行解析。 这可能是一种更清洁的方法，而我通常会采用这种方法。