# どのディスプレイでも予測可能なゲーム ループ > シミュレーション速度をプレイヤーのディスプレイのリフレッシュ レートに結びつけることなく、ブラウザ ゲームの更新とアニメーション フレームの周囲の描画を構造化します。 - URL: https://oneshotgems.ai/ja/topics/browser-game-loop - カテゴリ: ゲーム開発者向け - 種類: ガイド - 更新日: 2026年10月5日 ブラウザーゲームのループはシミュレーション、描画、入力を調整します。ただし、どの画面でも毎秒同じ数のフレームが生成されるとは限りません。コールバックはリフレッシュレートに応じて異なる頻度で実行され、非表示タブでは一時停止したり、メインスレッドが混雑すると遅れて実行されたりします。シミュレーションは経過時間に基づかせ、描画のタイミングはブラウザーに任せます。この分離により動きを把握しやすくなり、長い停止の後にどう処理するかも制御できます。 ## 状態の変化と描画を分離する 次のビジュアル更新には requestAnimationFrame を使用し、そのタイムスタンプを小さなループ コーディネーターに渡します。経過時間からポジション、タイマー、ルールを更新します。更新後の現在の状態を描画します。レンダラーは衝突が起こったかどうかを判断すべきではなく、衝突チェックはスプライトがたまたまペイントされたかどうかに依存すべきではありません。 小規模なプラットフォーム テストの場合は、選択したワールド単位/秒数でマーカーを水平に移動します。 60 Hz ディスプレイと高リフレッシュ ディスプレイで同じルートを実行します。マーカーが 1 つの画面上で同じ壁時計間隔内でさらに遠くに移動した場合でも、一定の移動は単位時間ごとではなくコールバックごとに適用されます。 ## 遅延フレームの回復ポリシーを選択する 長い停止の後には、非常に大きな経過時間が生じることがあります。気軽に遊ぶリアルタイムゲームでは経過時間に上限を設け、復帰したプレイヤーがキャラクターが複数の障害物を一気に通り抜けるのを見ずに済むようにします。決定論的なシミュレーションでは、アキュムレーターを使った固定更新ステップを採用し、追いつき処理の回数に上限を設けます。補間が役立つ場合は、シミュレーション状態の間を描画します。 再現できる障害物コースで、コールバックの間隔が最も長くなった時間を記録します。その後、別の画面に切り替えて戻り、ゲームの状態を確認します。ゲームを一時停止するのか、少しだけ時間を進めるのか、直前の状態から再開するのかを決めます。遅れて届いた1回のフレームに任せず、その方針を明示してください。 ## よくある質問 **描画にはsetIntervalを使用する必要がありますか?** requestAnimationFrame は再描画の近くにスケジュールされ、通常は非表示のドキュメントのために一時停止されるため、視覚的な作業には requestAnimationFrame を使用します。タイマーは非視覚的なタスクをスケジュールすることもできますが、表示時計として扱うべきではありません。 **フレームのタイムスタンプはどこから来るのでしょうか?** requestAnimationFrame のコールバックは高分解能のタイムスタンプを渡します。MDNはタイミングと一度だけ呼び出される性質を説明しています。コールバック数を数えるのではなく、このタイムスタンプから進行量を計算します。 ## 気になることを、もっと - [デルタタイムでカクつきのない動きを実現する](https://oneshotgems.ai/ja/topics/delta-time-in-games): 経過時間をゲームのモーションに適用し、安全なキャッチアップ ポリシーを選択し、さまざまなリフレッシュ レートおよび失速後の動きをテストします。 - [タブが非表示になっているときにゲームを一時停止する](https://oneshotgems.ai/ja/topics/pausing-background-games): ページの表示設定の変更を使用して、何を一時停止するか、何を保存するか、タイムジャンプせずにブラウザ ゲームを再開する方法を選択します。 - [ブラウザ ゲームの HUD を同期状態に保つ](https://oneshotgems.ai/ja/topics/synchronizing-game-hud): ゲームの状態を真実の情報源として扱い、1 つの更新パスから HUD 値をレンダリングすることで、スコア、ライフ、タイマーの一貫性を保ちます。 ## 関連情報 - [MDN: requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame) --- 正規ページ: https://oneshotgems.ai/ja/topics/browser-game-loop