JavaScript»ゲーム制作»requestAnimationFrameゲームループ フレームレート（FPS）を設定する

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

下のプログラムは、requestAnimationFrameのたびではなく、自分できめたフレームレートで画面がめんを描き替えています。これをうつして、ガイコツをうごかしてください。画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

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

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

  // フレームレート
  // FPS(Frame Per Second) という単位でかぞえる
  //   = 1秒あたりのフレーム数
  //   = 1秒あたり何回画面を描きなおすか
  const FPS = 20;

  // FPSから、1フレームあたりの秒数を計算する
  const frameTime = 1 / FPS;

  let prevTimestamp = 0;
  let honeX = 144;
  let honeY = 144;

  const update = (timestamp) => {  // 経過した時間timestampを引数にする関数

    // requestAnimationFrameがupdateを呼び出す頻度が
    // FPSで指定したフレーム数よりも多い場合は
    // 画面の描きなおしをせずに次のrequestAnimationFrameを実行する
    const elapsed = (timestamp - prevTimestamp) / 1000;
    if (elapsed <= frameTime) {
      requestAnimationFrame(update);
      return;
    }

    prevTimestamp = timestamp;

    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();
});

解説

アニメーションは、画面を連続して表示することで動いているように見せます。1秒あたり何回画面を描きなおすかをフレームレートといいます。画面を描きなおす速さが速いほど（＝fpsの値が高いほど）なめらかな動きに見えます。
しかし処理速度の問題などにより、つねに高いフレームレートを保てるとはかぎりません。自分でフレームレートをきめることで、画面の描き替え速度を安定させる効果も期待できます。