Игровой цикл requestAnimFrame (javascript / canvas)

Question

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

Я использую 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);
     };
})();

Iесть функция "init", которая устанавливает мою игру.Это тогда вызывает update, который является игровым циклом, который вызывает render для рисования на холст.Если вы игнорируете 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, потому что всегда оценивает внутренний аргумент.