# 非表示のタブをゲーム状態として扱う

> ページの表示設定の変更を使用して、何を一時停止するか、何を保存するか、タイムジャンプせずにブラウザ ゲームを再開する方法を選択します。

- URL: https://oneshotgems.ai/ja/topics/pausing-background-games
- カテゴリ: ゲーム開発者向け
- 種類: ガイド
- 更新日: 2026年10月5日

プレーヤーは、ブラウザ ゲームの実行中にタブを切り替えたり、ウィンドウを最小化したり、デバイスをロックしたりできます。多くの場合、ブラウザーは非表示のドキュメントでアニメーション コールバックを一時停止し、タイマーを調整するため、更新ループはスケジュールされたティックをすべて受信することに依存できません。明示的な状態遷移としてのモデルの可視性。これにより、プレイヤーが戻ったときに不確実なシミュレーション時間を再構築しようとするのではなく、タイマー、入力、サウンド、保存された進行状況について意図的なポリシーが得られます。

## 表示状態が変わったときの動作を決める

反射神経を使うゲームでは、document.visibilityState が hidden に変わったらプレイを一時停止し、カウントダウンを止め、押し続けているキーの状態を消去します。ページが再び表示されたら、再開ボタンを表示します。ターン制パズルなら、一時停止画面は出さず盤面をそのまま保ちつつ、音声を消してアニメーションの時計をリセットする方法もあります。

実装前に、タイマー、移動ハザード、および押されたキーに対して予想される動作を書き留めます。その後、それぞれの場合にスイッチを切り替えて戻ります。この小さなマトリックスは、キーが論理的に保持されたままになったり、ゲームが表示されていない間にタイマーが期限切れになったりするなどのバグを捕捉します。

## 再開前に時間をリセットする

visibilitychange イベントを監視し、一時停止の判断と描画処理を分けます。復帰時に前フレームのタイムスタンプを現在のアニメーションタイムスタンプに設定するか、再開後の最初のフレームで時計をリセットするようにします。そうしないと、次のデルタにタブが非表示だった時間全体が含まれ、オブジェクトが急に動くことがあります。

ぼかしやフォーカスだけに依存するのではなく、ページ可視性 API を使用します。ウィンドウは表示されたままでもフォーカスを失う可能性があり、可視性によってドキュメントが実際に非表示になっているかどうかがわかります。自動保存ポリシーを独立させてください。一時停止動作と持続性は目的が異なるため、個別にテストする必要があります。

## よくある質問

**requestAnimationFrame は非表示のタブで実行され続けますか?** ほとんどのブラウザーは、バックグラウンド タブまたは非表示の iframe でアニメーション コールバックを一時停止し、タイマー コールバックも調整される可能性があります。これらの動作は、正確な時計としてではなく、可視性を処理する理由として扱います。

**すべてのゲームは非表示のときに一時停止する必要がありますか?** すべての設計に適合する単一のポリシーはありません。目に見えないシミュレーションによって課題が変化するゲームを一時停止します。ターンベースのプレイでは、現在のボードを維持するだけで十分です。いずれの場合も、復帰時にタイミングとオーディオを意図的にリセットしてください。

## 気になることを、もっと

- [信頼性の高いブラウザ ゲーム ループを構築する](https://oneshotgems.ai/ja/topics/browser-game-loop): シミュレーション速度をプレイヤーのディスプレイのリフレッシュ レートに結びつけることなく、ブラウザ ゲームの更新とアニメーション フレームの周囲の描画を構造化します。
- [デルタタイムでカクつきのない動きを実現する](https://oneshotgems.ai/ja/topics/delta-time-in-games): 経過時間をゲームのモーションに適用し、安全なキャッチアップ ポリシーを選択し、さまざまなリフレッシュ レートおよび失速後の動きをテストします。

## 関連情報

- [MDN: ページ可視性 API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)

---
正規ページ: https://oneshotgems.ai/ja/topics/pausing-background-games