Update state once, derive the display
When a coin is collected, update model.score in the game event or simulation step. At the UI update point, render the displayed value from model.score instead of separately adding one to the label. For a DOM HUD, update textContent when the value changes; for a canvas HUD, draw the number from the same model field. A visual count can animate toward the committed score.
Use a single transition for events that affect several labels. If losing a life also pauses play and opens a panel, record the state change once, then let rendering reflect lives, status, and available actions together. Avoid having the panel callback independently change the same variables a collision handler has already changed.
Test rapid updates and end states
Trigger two pickups in quick succession and verify that the HUD shows the resulting total rather than skipping an update. Pause, finish a run, and restart; confirm that the timer stops, final score stays visible when intended, and the next run starts from its defined values. If you use requestAnimationFrame for display, treat it as a rendering schedule: MDN notes its callback is one-shot and must be requested again for another frame, so keep state transitions out of code that accidentally runs twice per frame.
Reduce unnecessary display churn
For DOM text, compare the next formatted value with the current one before writing if updates are frequent. For a canvas HUD, group drawing after simulation rather than painting one label from every event callback. Add a debug readout of the model next to the visible HUD during development; if those values differ, the fault is in rendering, while matching values with the wrong outcome point back to the model update.
Questions about synchronizing game HUD
Should the score label update inside a collision handler?
The handler can update authoritative score state, but let one render path format and display that state. Avoid maintaining a second independently incremented score in the label.
Why does a HUD show a value from the previous run?
A restart may reset simulation state without triggering a HUD render, or a panel may hold a stale copy. Reset the model through one transition and render the new state immediately.