Запрос цикла игрыAnimFrame (javascript/canvas)

Я борюсь с этим и не могу найти много ссылок. Продолжайте.

Я использую requestAnimFrame, который был написан Google:

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, которая устанавливает мою игру. Затем он вызывает обновление, которое представляет собой игровой цикл, который вызывает рендер для рисования на холст. Если вы игнорируете 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 просто рисует загрузку плиток на холст, и это отлично работает.

Любые предложения?

Спасибо!

Крис

Ответ 1

Вам нужно передать функцию, а не результат вызова функции. Другими словами, измените это:

requestAnimFrame(game.update());

Для этого:

requestAnimFrame(game.update);

То, как он в настоящее время переходит в game.update, выполняет свою задачу, а затем попытается оценить выражение:

requestAnimFrame(game.update())

Чтобы оценить это, сначала нужно оценить аргумент requestAnimFrame:

game.update()

Это просто функция возвращает к себе, что приводит к бесконечной рекурсии до/слишком большой ошибки рекурсии. Он никогда не получает вызов requestAnimFrame, потому что он всегда вычисляет внутренний аргумент.