状態を一度更新し、表示を取得します
コインを集めたら、ゲームイベントまたはシミュレーションステップでmodel.scoreを更新します。 UI の更新ポイントで、ラベルに値を個別に追加するのではなく、model.score から表示された値をレンダリングします。 DOM HUD の場合、値が変更されたときに textContent を更新します。キャンバス HUD の場合は、同じモデル フィールドから番号を描画します。視覚的なカウントは、コミットされたスコアに向かってアニメーション化できます。
複数のラベルに影響を与えるイベントには単一のトランジションを使用します。ライフを失うとプレイが一時停止され、パネルが開く場合は、状態の変化を一度記録してから、レンダリングにライフ、ステータス、および利用可能なアクションを一緒に反映させます。衝突ハンドラーが既に変更した変数と同じ変数をパネル コールバックが独立して変更することは避けてください。
迅速な更新と終了状態をテストする
2 つのピックアップを立て続けにトリガーし、更新をスキップするのではなく、結果の合計が HUD に表示されることを確認します。一時停止し、実行を終了し、再開します。タイマーが停止し、最終スコアが意図したとおりに表示されたままになり、次の実行が定義された値から開始されることを確認します。 requestAnimationFrame を表示に使用する場合は、それをレンダリング スケジュールとして扱います。MDN は、そのコールバックはワンショットであり、別のフレームに対して再度リクエストする必要があるため、フレームごとに誤って 2 回実行されるコードに状態遷移が含まれないように注意します。
表示の不要な更新を減らす
DOM テキストの場合、更新が頻繁に行われる場合は、書き込む前に次の書式設定された値を現在の値と比較します。キャンバス HUD の場合、すべてのイベント コールバックから 1 つのラベルをペイントするのではなく、シミュレーション後にグループ描画します。開発中に表示される HUD の隣にモデルのデバッグ読み出しを追加します。これらの値が異なる場合、エラーはレンダリングにあり、値が間違った結果と一致すると、モデルの更新が遡って指摘されます。
ゲーム HUD の同期についての質問
スコアラベルは衝突ハンドラー内で更新する必要がありますか?
ハンドラーは正規のスコア状態を更新できます。その状態の書式設定と表示は、一つの描画経路に任せてください。ラベル内で独立して加算される二つ目のスコアを持たないようにします。
HUD に前回の実行の値が表示されるのはなぜですか?
再起動により、HUD レンダリングがトリガーされずにシミュレーション状態がリセットされる場合や、パネルに古いコピーが保持される場合があります。 1 つの遷移を通じてモデルをリセットし、新しい状態をすぐにレンダリングします。
関連情報
古い情報を見つけましたか？ 訂正を連絡