正确处理 HTML5 画布引擎的时间答案

【问题标题】：Properly handling timing for HTML5 canvas engine正确处理 HTML5 画布引擎的时间
【发布时间】：2012-11-05 14:01:12
【问题描述】：

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

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

我的问题是如何最好地设置这一切的时机。

现在我有：

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

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

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

谢谢！

【问题讨论】：

标签： javascript canvas simulation game-physics timing

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

一种方法是设置处理物理的时间间隔，然后每 x 帧渲染一次。

var physicsTime;
var renderFrequency;
var frameCount;

setInterval(function(){updateStuff()},physicsTime);

然后在 updateStuff() 中

function updateStuff(){
  frameCount ++;
  if (frameCount >= renderFrequency){
    frameCount -= renderFrequency;
    render();
  }
  physics();
}

【讨论】：