javascript - HTML5 画布游戏计时器

Question

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

但是物体的移动太快了。

像我的代码是：

http://pastebin.com/bSHCTmq

但是如果我按下 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/

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