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/

您可以通过Google“基于时间的游戏动画”进行更多研究。