表示状態が変わったときの動作を決める
反射神経を使うゲームでは、document.visibilityState が hidden に変わったらプレイを一時停止し、カウントダウンを止め、押し続けているキーの状態を消去します。ページが再び表示されたら、再開ボタンを表示します。ターン制パズルなら、一時停止画面は出さず盤面をそのまま保ちつつ、音声を消してアニメーションの時計をリセットする方法もあります。
実装前に、タイマー、移動ハザード、および押されたキーに対して予想される動作を書き留めます。その後、それぞれの場合にスイッチを切り替えて戻ります。この小さなマトリックスは、キーが論理的に保持されたままになったり、ゲームが表示されていない間にタイマーが期限切れになったりするなどのバグを捕捉します。
再開前に時間をリセットする
visibilitychange イベントを監視し、一時停止の判断と描画処理を分けます。復帰時に前フレームのタイムスタンプを現在のアニメーションタイムスタンプに設定するか、再開後の最初のフレームで時計をリセットするようにします。そうしないと、次のデルタにタブが非表示だった時間全体が含まれ、オブジェクトが急に動くことがあります。
ぼかしやフォーカスだけに依存するのではなく、ページ可視性 API を使用します。ウィンドウは表示されたままでもフォーカスを失う可能性があり、可視性によってドキュメントが実際に非表示になっているかどうかがわかります。自動保存ポリシーを独立させてください。一時停止動作と持続性は目的が異なるため、個別にテストする必要があります。
ブラウザゲームの背景タブを一時停止しますについての質問
requestAnimationFrame は非表示のタブで実行され続けますか?
ほとんどのブラウザーは、バックグラウンド タブまたは非表示の iframe でアニメーション コールバックを一時停止し、タイマー コールバックも調整される可能性があります。これらの動作は、正確な時計としてではなく、可視性を処理する理由として扱います。
すべてのゲームは非表示のときに一時停止する必要がありますか?
すべての設計に適合する単一のポリシーはありません。目に見えないシミュレーションによって課題が変化するゲームを一時停止します。ターンベースのプレイでは、現在のボードを維持するだけで十分です。いずれの場合も、復帰時にタイミングとオーディオを意図的にリセットしてください。
関連情報
古い情報を見つけましたか？ 訂正を連絡