Actualizar el estado una vez, derivar la pantalla
Cuando se recolecta una moneda, actualice model.score en el evento del juego o en el paso de simulación. En el punto de actualización de la interfaz de usuario, represente el valor mostrado desde model.score en lugar de agregar uno por separado a la etiqueta. Para un DOM HUD, actualice textContent cuando cambie el valor; para un HUD de lienzo, extraiga el número del mismo campo del modelo. Un conteo visual puede animar hacia la puntuación registrada.
Utilice una única transición para eventos que afecten a varias etiquetas. Si perder una vida también detiene la reproducción y abre un panel, registra el cambio de estado una vez y luego deja que la representación refleje las vidas, el estado y las acciones disponibles juntas. Evite que la devolución de llamada del panel cambie de forma independiente las mismas variables que un controlador de colisiones ya cambió.
Pruebe actualizaciones rápidas y estados finales
Active dos recolecciones en rápida sucesión y verifique que el HUD muestre el total resultante en lugar de omitir una actualización. Pausa, termina una partida y reinicia; confirme que el cronómetro se detiene, que la puntuación final permanece visible cuando se desea y que la siguiente ejecución comienza desde sus valores definidos. Si usa requestAnimationFrame para la visualización, trátelo como un programa de renderizado: MDN señala que su devolución de llamada es única y debe solicitarse nuevamente para otro fotograma, así que mantenga las transiciones de estado fuera del código que accidentalmente se ejecuta dos veces por fotograma.
Reduce las actualizaciones innecesarias de la pantalla
Para el texto DOM, compare el siguiente valor formateado con el actual antes de escribir si las actualizaciones son frecuentes. Para un HUD de lienzo, agrupe el dibujo después de la simulación en lugar de pintar una etiqueta de cada devolución de llamada de evento. Agregue una lectura de depuración del modelo junto al HUD visible durante el desarrollo; si esos valores difieren, la falla está en la representación, mientras que los valores coincidentes con el resultado incorrecto apuntan a la actualización del modelo.
Preguntas sobre sincronización del HUD del juego
¿Debería actualizarse la etiqueta de puntuación dentro de un controlador de colisiones?
El controlador puede actualizar el estado de puntuación autoritativo; deje que una única ruta de renderizado formatee y muestre ese estado. Evite mantener en la etiqueta una segunda puntuación que se incremente por separado.
¿Por qué un HUD muestra un valor de la ejecución anterior?
Un reinicio puede restablecer el estado de la simulación sin activar una representación del HUD, o un panel puede contener una copia obsoleta. Restablezca el modelo a través de una transición y represente el nuevo estado inmediatamente.
Más información
¿Has visto algo desactualizado? Notificar una corrección