Question

我正在使用Java Script开发在线游戏。我使用setInterval（movimage，10）方法移动游戏角色。但我已经看到游戏角色的移动速度并不一样，都是电脑。请建议我。

Answer 1

您应该使用requestAnimationFrame（https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame）而不是setInterval。

没有必要尝试更新比屏幕更快的内容。你的目标是60fps，每帧约16ms。

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是单线程的。

为什么我的游戏角色速度在不同的计算机上有所不同？

3 个答案: