Javascript 为什么我的游戏角色的速度在不同的计算机上是不同的?

Javascript 为什么我的游戏角色的速度在不同的计算机上是不同的?,javascript,animation,html5-canvas,Javascript,Animation,Html5 Canvas,我正在用Java脚本开发一个在线游戏。我正在使用setInterval(movimage,10)方法移动游戏角色。但我已经看到,游戏中人物的移动速度是不一样的,都是电脑。请建议我。您可能应该使用requestAnimationFrame()而不是setInterval 尝试更新比屏幕所能画的更快的东西是没有意义的。您的目标是60fps,即每帧16ms左右 有一些关于如何做到这一点的更多信息 浏览器支持非常好()简而言之,除了Android股票浏览器之外,所有当前浏览器都支持 如果您必须在IE9和

我正在用Java脚本开发一个在线游戏。我正在使用setInterval(movimage,10)方法移动游戏角色。但我已经看到,游戏中人物的移动速度是不一样的,都是电脑。请建议我。

您可能应该使用requestAnimationFrame()而不是setInterval

尝试更新比屏幕所能画的更快的东西是没有意义的。您的目标是60fps,即每帧16ms左右

有一些关于如何做到这一点的更多信息

浏览器支持非常好()简而言之,除了Android股票浏览器之外,所有当前浏览器都支持


如果您必须在IE9和更低版本中使用此功能,那么在这些浏览器中模拟这种行为就相当不错了。(虽然说实话,我怀疑这将是您最后的担忧,特别是在缺少
画布
…)

而不是setInterval时,您可能应该使用requestAnimationFrame()

尝试更新比屏幕所能画的更快的东西是没有意义的。您的目标是60fps,即每帧16ms左右

有一些关于如何做到这一点的更多信息

浏览器支持非常好()简而言之,除了Android股票浏览器之外,所有当前浏览器都支持


如果您必须在IE9和更低版本中使用此功能,那么在这些浏览器中模拟这种行为就相当不错了。(尽管说实话,我怀疑这将是您最后的担忧,尤其是在缺少
画布的情况下)

即使脚本几乎什么都不做,每个间隔所需的时间也超过10微秒:

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

}
interval()

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

即使脚本几乎不执行任何操作,每个间隔所需的时间也超过10微秒:

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

}
interval()

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

如果您正在制作一个游戏,以下游戏循环可以最大限度地减少在不同计算机上以不同速度运行的问题:

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);
    }
}
var loopTime=33;//1000ms/30fps(我们想要的)=每圈33ms
var startTime、endTime、executionTime;
函数gameLoop(){
startTime=新日期().getTime();
多伽马力学();
drawGame();
endTime=newdate().getTime();
executionTime=结束时间-开始时间;
如果(executionTime
您必须记住,您的游戏逻辑
dogamechanics()
和绘图
drawGame()
也需要一些时间。这可能会导致不同计算机上的游戏行为越来越慢


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

如果您正在制作一个游戏,以下gameloop可以最大限度地减少它在不同计算机上以不同速度运行的问题:

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);
    }
}
var loopTime=33;//1000ms/30fps(我们想要的)=每圈33ms
var startTime、endTime、executionTime;
函数gameLoop(){
startTime=新日期().getTime();
多伽马力学();
drawGame();
endTime=newdate().getTime();
executionTime=结束时间-开始时间;
如果(executionTime
您必须记住,您的游戏逻辑
dogamechanics()
和绘图
drawGame()
也需要一些时间。这可能会导致不同计算机上的游戏行为越来越慢


在这个游戏循环中,我们检查它们的执行速度。测量时间后,我们知道需要等待多长时间(使用
setTimeout
)。如果我们“太慢”,我们调用
setTimeout
,第二个参数是0毫秒。因为Javascript是单线程的,所以需要执行其他线程(如用户输入)。JS不能保证它在10毫秒内执行,但要在10毫秒后执行。将
setInterval
设置为10毫秒并不保证它每10毫秒更新一次。这取决于浏览器是否遵守此重复间隔。对于间隔来说,10可能太低了。在速度较慢的计算机上,每10微秒需要处理的任何事情都需要更长的时间。我一直在读有关这方面的文章,据说15毫秒可以被视为稳定的最小值。精度取决于浏览器和操作系统。如果使用setTimeout,您可以获得更多的控制。让您查看浏览器的最快运行速度。JS不能保证它在10毫秒时执行,但在10毫秒后的某个时间执行。将
setInterval
设置为10毫秒并不保证它每10毫秒更新一次。这取决于浏览器是否遵守此重复间隔。对于间隔来说,10可能太低了。在速度较慢的计算机上,每10微秒需要处理的任何事情都需要更长的时间。我一直在读有关这方面的文章,据说15毫秒可以被视为稳定的最小值。精度取决于浏览器和操作系统。如果使用setTimeout,您可以获得更多的控制。让您看到您的浏览器将以最快的速度执行什么操作。请注意,并非所有浏览器都支持此操作(目前)。除Android股票外,其他所有浏览器都支持此操作。(Opera在使用Blink发布版本后不计算在内)。请注意,这不受支持