javascript - 为什么我的游戏角色在不同的电脑上速度不同？

Question

我正在使用 Java Script 开发在线游戏。我正在使用 setInterval (movimage, 10) 方法来移动游戏角色。但是我看到游戏角色的移动速度是不一样的都是电脑。请给我建议。

Answer 1

而不是 setInterval 你应该使用 requestAnimationFrame ( https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame )。

尝试比屏幕绘制速度更快地更新某些内容是没有意义的。您的目标是 60fps，即每帧约 16 毫秒。

http://paulirish.com/2011/requestanimationframe-for-smart-animating/有更多关于如何做到这一点的信息。

浏览器支持非常好（http://caniuse.com/#feat=requestanimationframe），简而言之，除了 Android Stock 浏览器之外的所有当前浏览器。

如果您必须在 IE9 及更低版本中使用此功能，https://gist.github.com/paulirish/1579671可以很好地模拟这些浏览器中的行为。（但老实说，我怀疑这将是您最后的担忧，尤其是在缺乏canvas……方面）

Answer 2

即使脚本几乎什么都不做，每个时间间隔也需要超过 10 微秒：

function interval(){
 var i=0
 intervalID= setInterval(function(){
   console.log("called",new Date().getTime());
   i++;
   if(i>=10){
     clearInterval(intervalID);
   }
 },10);

}
interval()

当计算机速度较慢或浏览器速度较慢时，您会开始注意到差异。

Answer 3

如果您正在制作游戏，则以下游戏循环可以最大程度地减少它在不同计算机上以不同速度运行的问题：

var loopTime = 33; // 1000ms / 30fps (what we want) = 33ms per loop
var startTime, endTime, executionTime;

function gameLoop(){

    startTime = new Date().getTime();
    doGameMechanics();
    drawGame();
    endTime = new Date().getTime();
    executionTime = endTime - startTime;

    if(executionTime < loopTime) { // we were faster than maximum allowed
        // sleep the remaining time so the game does not go too fast
        setTimeout(function(){ gameLoop(); }, loopTime - executionTime);
    }else{ // we were slower than maximum allowed
        setTimeout(function(){ gameLoop(); }, 0);
    }
}

您必须记住，您的游戏逻辑doGameMechanics()和绘图drawGame()也需要一些时间。这可能会导致不同计算机上的游戏行为越来越慢。

在这个游戏循环中，我们检查它们的执行速度。测量时间后，我们知道我们需要等待多长时间（使用setTimeout）。如果我们“太慢”，我们会setTimeout以 0 毫秒作为第二个参数调用。这是必需的，以便执行其他线程（如用户输入），因为 Javascript 是单线程的。