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

标签 javascript canvas simulation game-physics timing

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

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

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

现在我有:

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

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

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

谢谢!

最佳答案

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

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

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

关于javascript - 正确处理 HTML5 Canvas 引擎的时序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13233672/

相关文章:

testing - 加载和压力测试网络应用程序

sql - 如何在 SQLite 中模拟 REPEAT()

Javascript == 运算符无法按预期工作?

javascript - 当用户单击按钮 x 时,将文本添加到输入字段 x

javascript - javascript 中的 "Canvas is null"错误

javascript - Canvas HTML 加载时间

c# - 在计算图中的簇大小时如何避免无限循环?

javascript - 如何在 Rails 4 中检查复选框及其值来提交表单?

javascript - 如何使用 JavaScript 输入和输出{本地文本文件},而不是使用 ActiveXObject(最新版本的 Chrome 或 IE 11)

python-3.x - 在 tkinter canvas python 上绘制 png 图像