HTML5画布游戏计时器

HTML5 Canvas Game Timer

本文关键字：游戏计时器布游戏 HTML5 更新时间：2023-09-26

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

但是物体移动得太快了。

类似于我的代码是：

http://pastebin.com/bSHCTMmq

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

感谢您的帮助。

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

所以，游戏动画需要基于"绝对"时间。即，您需要"记住"按下UP_ARROW的时间，以及玩家当时的位置。然后，当您调用 update（）时，确定经过了多少时间，并根据该时间以及所需的速度（例如，每秒像素数），将播放器移动到适当的位置。它使您的代码更加复杂，但不幸的是，这就是必须完成的方式。

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

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