javascript - 正确处理 HTML5 Canvas 引擎的时序

Question

我正在为一个大学项目开发​​一个多射弹模拟器，我想知道如何最好地设置 JavaScript 渲染到 HTML5 Canvas 的时间

我正在使用 Euler 积分器设置物理，准确性对于这个项目非常重要。渲染非常简单

我的问题是如何最好地为所有这些设置时间。

现在我有:

• 在使用固定时间步长的 setTimeout() 循环的函数中运行的物理和其他逻辑
• 在使用 requestAnimationFrame() 调用(灵活的时间步长)循环的另一个函数中渲染

这两个循环几乎同时运行(我知道 JavaScript 并不真正支持没有 Web Worker 的线程)但我不希望渲染(当前以比需要高得多的 FPS 运行)不必要地“窃取”CPU来自物理模拟的循环，如果你明白我的意思的话。

鉴于物理精度在这里最为重要，您建议如何设置计时系统？ (也许在这里使用 Web Workers 会有用，但我还没有看到它在其他引擎中使用过)

谢谢!

Answer 1

我建议您不要尝试“多线程”，除非您确实在这样做，即使那样，我也不一定会推荐它。

保持所有内容同步的最佳方式是使用单线程执行。一个大约 33 毫秒的 setTimeout 循环似乎适合我的游戏。

另外，至少根据我的经验，setTimeout 提供了比 setInterval 或 requestAnimationFrame 更美观的体验。使用 setInterval，Javascript 会在帧延迟交付时努力“ catch ”，这会导致动画帧不一致。使用 requestAnimationFrame，会跳过帧以确保游戏流畅运行，这实际上让事情变得更难了，因为您的用户并不完全确定他们的 View 在任何给定的时间都是最新的。