javascript - 游戏循环 requestAnimFrame (javascript/canvas)

Question

我正在为此苦苦挣扎，似乎无法找到更多引用资料。

我正在使用由 Google 编写的 requestAnimFrame:

requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
     window.webkitRequestAnimationFrame ||
     window.mozRequestAnimationFrame ||
     window.oRequestAnimationFrame ||
     window.msRequestAnimationFrame ||
     function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
       window.setTimeout(callback, 1000/60);
     };
})();

我有一个函数“init”来设置我的游戏。然后调用更新，这是调用渲染以绘制到 Canvas 的游戏循环。如果您忽略 requestAnimFrame - 每个单独的部分都可以正常工作。但是，一旦我调用了 requestAnimFrame，我要么得到“太多递归”错误，要么 FF 就崩溃了。

我在update()中的代码如下:

game.update = function()
{
    stats.update();
    fps.innerHTML = stats.getFPS();

// Render objects
game.render();
// Continue game loop
requestAnimFrame(game.update());
}

stats.update 只是更新 FPS 计数器。所以你可以看到，这个函数做的并不多。我的 game.render 函数只是在 Canvas 上绘制了一堆图 block 并且工作正常。

有什么建议吗？

谢谢!

克里斯

Answer 1

你需要传入函数，而不是调用函数的结果。换句话说，改变这个:

requestAnimFrame(game.update());

对此:

requestAnimFrame(game.update);

目前的方式是进入game.update，执行它的操作，然后尝试计算表达式:

requestAnimFrame(game.update())

为了评估它，它首先需要评估 requestAnimFrame 的参数:

game.update()

这只是一个函数回调自身，导致无限递归，直到堆栈溢出/太多递归错误。它永远不会调用 requestAnimFrame，因为它总是评估内部参数。