# Renderice cada valor de HUD desde el estado autorizado del juego

> Mantenga la puntuación, las vidas y los cronómetros consistentes al tratar el estado del juego como la fuente de la verdad y representando los valores del HUD desde una ruta de actualización.

- URL: https://oneshotgems.ai/es/topics/synchronizing-game-hud
- Categoría: Para desarrolladores de juegos
- Tipo: Guía
- Actualizado: 5 de octubre de 2026

Una visualización de puntuación que no está de acuerdo con el juego generalmente tiene dos fuentes de verdad en competencia: un valor cambia en la simulación y otro se actualiza directamente mediante una colisión o una devolución de llamada de animación. Elija el modelo de juego como autorizado y luego renderice el HUD desde su estado actual. Esta regla de propiedad limitada ayuda a evitar cambios de puntuación duplicados, etiquetas obsoletas y texto del cronómetro que continúa después de que finaliza el juego. Es útil tanto si el HUD se dibuja en un lienzo como si se representa como elementos DOM.

## 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

**¿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.

## Sigue tu curiosidad

- [Diseñe señales del juego que expliquen cada acción](https://oneshotgems.ai/es/topics/game-feedback-design): Haga que las respuestas del juego muestren qué cambió, por qué y qué puede hacer el jugador a continuación, sin tapar el área de juego.
- [Cree un bucle de juego de navegador confiable](https://oneshotgems.ai/es/topics/browser-game-loop): Estructura las actualizaciones de juegos de navegador y dibuja cuadros de animación sin vincular la velocidad de simulación a la frecuencia de actualización de la pantalla del jugador.

## Más información

- [Solicitud de MDNAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)

---
Página canónica: https://oneshotgems.ai/es/topics/synchronizing-game-hud