Question

使用此代码：

x = x + (canvas.height/250);

每1毫秒发生一次，应该按照画布大小的比例向x添加一个数量。然后绘制x，因此x应在不同屏幕尺寸上以相同的速度向下移动画布（画布根据屏幕大小改变大小）。然而x在我的ipod和我的电脑上以不同的速度向下移动。

如果您想知道完整的源代码和html文件，则html为here，与之关联的javascript文件为here。

Answer 1

首先，让我们考虑这条线的作用：

x += canvas.height / 250;

对象的速度为canvas.height / 250。距离为canvas.height。我们可以这样说：

distance = speed * time

我们已经有distance和speed，所以：

time = distance / speed = canvas.height / (canvas.height / 250) = 250 ms

因此对象总是在2.5秒内到达目的地。为了实现这一目标，您可以根据屏幕尺寸更改速度。

如果您希望所有设备的速度相同，则不应取决于canvas.height。

Answer 2

遍历时间的变化是由于抽奖时间的变化造成的例如，如果设备绘制速度慢两倍，则增加将每秒减少两次，你的对象将是在屏幕中间的慢速设备中它会越过屏幕另一个。

要保持一致的行为，您必须处理游戏时间然后你只需要决定你的对象速度，以毫秒为单位的像素，并使用经典方程：

pos = pos + speed * (time step)

代码如下：

var x = 0;

var speed = canvas.width / 1000 ; // speed in pixels per milliseconds.

var lastTime = 0;

requestAnimationFrame(launchAnimate);     

function animate() {
         requestAnimationFrame(animate);
         var now = Date.now();
         var dt = now - lastTime ;
         lastTime = now ;
         // draw everything
         draw();
         // update everything with this frame time step.
         update(dt);
}

function launchAnimate() {
    lastTime = Date.now() ;
    requestAnimationFrame(animate);
}

编辑：你不能比你的屏幕绘制得更快，所以在60Hz的屏幕上，你最多每16.666毫秒绘制一次。
不要被RequestAnimationFrame吓到，它只是意味着：“当屏幕准备就绪时，绘制我给你的回调。”。
所以你必须每次都重新武装它以使你的游戏生效。

所以对于你的游戏来说，是时候组织一下了：

有一个更新功能，您可以在其中放置所有更新所有内容的代码。
有绘制功能，可以绘制所有内容。
不绘制更新（移除moveTrees中的绘制调用），以及不要在平局中更新。分离关注，： - ）
每次更新都取决于所有与时间（位置，速度，加速度，力）相关的帧时间（dt）。

function update（dt）{ x = x +速度* dt; moveTrees（DT）; }

function draw（）{ drawTrees（）; drawHangGlider（）; drawTrees（）; }

你会注意到我改变了animate函数来调用draw和update，你仍然需要做一些工作来重新组织。

编辑2：RequestAnimationFrame现在广泛使用：

http://caniuse.com/requestanimationframe

（Chrome for Android即可）。

Rq：

 // to use rAF, call this function before your game launches
 polyFillRAFNow();


// insert the function in your code.
function polyFillRAFNow() {
    // requestAnimationFrame polyfill
    var w = window;
    var foundRequestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame || w.oRequestAnimationFrame || function (cb) { setTimeout(cb, 1000 / 60); };
    window.requestAnimationFrame = foundRequestAnimationFrame;
}

Rq2：您可能对我在游戏循环http://gamealchemist.wordpress.com/2013/03/16/thoughts-on-the-javascript-game-loop/

上写的这篇文章感兴趣

Answer 3

所以基本上你想要一个相对绝对速度，这取决于屏幕尺寸，然后在不同的显示器上看起来是相同的。为此，您应该使用百分比，例如：

var pixels_in_1_percent = canvas.height/100;
x += pixels_in_1_percent

这会使画布高度增加1%，如果你想要更快的速度，那么你必须乘以它

x += pixels_in_1_percent * <number_of_percent_to_increase>

希望有所帮助。

Answer 4

你在问题中说你每1毫秒调用一次这个函数。但是，有些浏览器会限制window.setInterval的速度，所以如果你每隔50毫秒调用一次函数，它就会在所有设备上都相同。

window.setInterval(function(){
/// call your function here e.g. add1toxfunction();
}, 50);

当画布更大时，运动速度变慢

4 个答案: