游戏循环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"来设置我的游戏.然后调用update,这是调用渲染绘制到画布的游戏循环.如果忽略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函数只是在画布上绘制了一大堆瓷砖,工作正常.

有什么建议？

谢谢!

克里斯

Answer 1

您需要传递函数,而不是调用函数的结果.换句话说,改变这个:

requestAnimFrame(game.update());

对此:

requestAnimFrame(game.update);

它目前的方式将进入game.update,做它的事情,然后尝试评估表达式:

requestAnimFrame(game.update())

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

game.update()

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