JavaScript»ゲーム制作»requestAnimationFrameゲームループ requestAnimationFrameをつかう

ファイル名: js-game/quest_00717.html

下のプログラムは、画面がめんをくりかえし描き替えるのに、setIntervalやsetTimeoutの代わりにrequestAnimationFrameをつかったものです。これをうつして、ガイコツをうごかしてください。画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

const image = new Image();
image.src = "hone.png";
image.addEventListener("load", () => {

  let honeX = 144;
  let honeY = 144;

  const update = () => {
    honeX += Math.floor(Math.random() * 3) - 1;
    honeY += Math.floor(Math.random() * 3) - 1;
    context.clearRect(0, 0, 320, 320);
    context.drawImage(image, 0, 0, 32, 32, honeX, honeY, 32, 32);
    requestAnimationFrame(update);
  };

  update();
});

解説

requestAnimationFrame()は、ブラウザが画面を描き替える前のタイミングで関数を実行します。繰り返し動かすには、呼び出す関数の中にrequestAnimationFrame自身を含めておきます。
他のタブを見ている間は、ブラウザは見ていないタブの画面描き替えのペースを自動的に落として、メモリの負担を減らします。