requestAnimationFrameが1回しか実行されない

Question

HTMLCanvasを利用したゲームを作りたいのですが、Javascriptで再描画の繰り返しを実現したいです。requestAnimationFrameを使用してみたのですが、実行が一度しかなされず困っています。

そこでテスト用のコードを書いて試してみました。

var i = 0;
requestAnimationFrame(function(){
  console.log(i);
  i++;
});

上記のコードを実行したところ、コンソールには

> 0

としか出力されませんでした。エラーも出ませんでした。

自分のくだらない間違いではあると思うのですが、どうしたら繰り返し実行できるかご教授願います。

Answer 1

window.requestAnimationFrame()は、1回リクエストを出すだけですので、繰り返し呼び出されるように実装する必要があります。
下記サンプルでは、loop()関数の中でwindow.requestAnimationFrame(loop)を呼び出すようになっているので、繰り返し実行されます。

function loop() {
    window.requestAnimationFrame(loop)

    // 処理...
}

window.requestAnimationFrame(loop);

Comments

[mayouna984]

解決しました！ありがとうございました！

[NozomuIkuta]

解決したようでよかったです。