Status einmal aktualisieren, Anzeige ableiten
Wenn eine Münze eingesammelt wird, aktualisieren Sie model.score im Spielereignis- oder Simulationsschritt. Rendern Sie am Aktualisierungspunkt der Benutzeroberfläche den angezeigten Wert aus model.score, anstatt separat einen Wert zur Beschriftung hinzuzufügen. Aktualisieren Sie bei einem DOM-HUD textContent, wenn sich der Wert ändert. Zeichnen Sie für ein Canvas-HUD die Zahl aus demselben Modellfeld. Eine visuelle Zählung kann zur festgeschriebenen Punktzahl führen.
Verwenden Sie einen einzelnen Übergang für Ereignisse, die sich auf mehrere Beschriftungen auswirken. Wenn der Verlust eines Lebens auch das Spiel pausiert und ein Panel öffnet, zeichnen Sie die Zustandsänderung einmal auf und lassen Sie das Rendering dann Leben, Status und verfügbare Aktionen zusammen widerspiegeln. Vermeiden Sie, dass der Panel-Callback unabhängig dieselben Variablen ändert, die ein Kollisionshandler bereits geändert hat.
Testen Sie schnelle Updates und Endzustände
Lösen Sie zwei Abholungen schnell hintereinander aus und stellen Sie sicher, dass das HUD die resultierende Gesamtsumme anzeigt, anstatt eine Aktualisierung zu überspringen. Anhalten, einen Lauf beenden und neu starten; Bestätigen Sie, dass der Timer stoppt, das Endergebnis zum vorgesehenen Zeitpunkt sichtbar bleibt und der nächste Lauf mit den definierten Werten beginnt. Wenn Sie requestAnimationFrame für die Anzeige verwenden, behandeln Sie es als Rendering-Zeitplan: MDN weist darauf hin, dass der Rückruf einmalig ist und für einen anderen Frame erneut angefordert werden muss. Halten Sie daher Zustandsübergänge von Code fern, der versehentlich zweimal pro Frame ausgeführt wird.
Vermeiden Sie unnötige Anzeigeaktualisierungen
Vergleichen Sie bei DOM-Text vor dem Schreiben den nächsten formatierten Wert mit dem aktuellen, wenn Aktualisierungen häufig erfolgen. Gruppieren Sie bei einem Canvas-HUD das Zeichnen nach der Simulation, anstatt eine Beschriftung für jeden Ereignisrückruf zu malen. Fügen Sie während der Entwicklung eine Debug-Anzeige des Modells neben dem sichtbaren HUD hinzu; Wenn sich diese Werte unterscheiden, liegt der Fehler beim Rendern, während der Abgleich von Werten mit dem falschen Ergebnis auf die Modellaktualisierung zurückführt.
Fragen zu Synchronisieren des Spiel-HUD
Sollte die Bewertungsbezeichnung innerhalb eines Kollisionshandlers aktualisiert werden?
Der Handler kann den maßgeblichen Punktestand aktualisieren. Lassen Sie einen einzigen Rendering-Pfad diesen Zustand formatieren und anzeigen. Vermeiden Sie eine zweite Punktzahl im Label, die unabhängig erhöht wird.
Warum zeigt ein HUD einen Wert aus dem vorherigen Lauf an?
Ein Neustart kann den Simulationsstatus zurücksetzen, ohne ein HUD-Rendering auszulösen, oder ein Panel enthält möglicherweise eine veraltete Kopie. Setzen Sie das Modell durch einen Übergang zurück und rendern Sie den neuen Zustand sofort.
Weiterlesen
Etwas nicht mehr aktuell? Korrektur melden