HTML5 Canvas游戏计时器

Question

如何为HTML5 Canvas游戏创建好的计时器？ 我正在使用RequestAnimationFrame（http://paulirish.com/2011/requestanimationframe-for-smart-animating/）

但是对象的移动太快了。

像我的代码一样：

http://pastebin.com/bSHCTMmq

但是如果按UP_ARROW播放器不移动一个像素，而是移动5,8或10或更多或更少的像素。如果我按下UP_ARROW播放器移动1个像素怎么办？

感谢您的帮助。

Answer 1

问题在于，在每个间隔上递增值的方法会产生不一致的结果。听起来像你的情况RequestAnimationFrame触发太快，但在其他情况下 - 比如在慢CPU上 - 它们会触发更慢，产生不同的结果。

因此，游戏动画需要基于“绝对”时间。即，当按下UP_ARROW时，你需要“记住”，以及玩家在那里的位置。然后，当您调用update（）时，确定经过了多长时间，并根据该时间和所需速度（例如，每秒像素数），将播放器移动到适当的位置。它使你的代码更复杂，但遗憾的是它必须如何完成。

这个问题在网上讨论很多。这是我发现的一篇随机文章（基于Flash，但没关系）： http://www.flashgamesclassroom.com/classroom/actionscript/frame-based-vs-time-based-animation/

你可以谷歌“基于时间的游戏动画”来研究更多。