不同計算機上的游戲循環速度不同

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（）階段對其進行解析。 這可能是一種更清潔的方法，而我通常會采用這種方法。