使用 requestAnimationFrame 时应该如何组织更新/绘制逻辑？

Question

我的 HTML5 游戏的 JavaScript 代码结构如下：

// <body onload="load()">
function load() {} // Load all images then call init()
function init() {} // Get all images ready for the game logic then call animate()
function animate() {} // Use requestAnimationFrame(), update() and drawing()
function update() {} // Update the game logic
function drawing() {} // Render the images on canvas

问题在于animate() 。 我没有在 web 周围找到任何一致的来源，说明如何在其中组织requestAnimationFrame() 、 update()和drawing() 。

我试图自己详细说明它，但游戏确实以任何方法运行，例如将animate() 、 update()或drawing()作为参数传递给requestAnimationFrame() ，或者在开始时使用requestAnimationFrame()或function 的末尾，或以任何顺序具有这些功能中的任何一个，或一个 function 在另一个内部，等等。

然而，这并不意味着一切都好。 其中一些安排会导致我稍后才发现的问题，例如在不同的计算机或以不同的帧速率进行测试时。 然后我必须将 go 回到代码中尝试另一种方法。

那么，我应该如何组织呢？ 如果您能给我一个合适的算法，我将不胜感激，如果您有任何关于它的良好教学资源，我将不胜感激。

Answer 1

使用requestAnimationFrame调用animate 。 animate调用update然后draw 。 基本上就是这样。 由于您不能精确控制时间间隔，因此为了更好地控制时间，传递最后一次调用animate是有意义的。 也许事件之后的增量时间更有意义。 然后你可以使用增量时间来计算给定速度的距离等等。

这是“官方”游戏循环如下所示：

var now,
    dt   = 0,
    last = timestamp(),
    step = 1/60;

function frame() {
  now = timestamp();
  dt = dt + Math.min(1, (now - last) / 1000);
  while(dt > step) {
    dt = dt - step;
    update(step);
  }
  render(dt);
  last = now;
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

网上有很多资源。 对于初学者来说，这是一个不错的https://www.sitepoint.com/quick-tip-game-loop-in-javascript/