# Renderize cada valor do HUD a partir do estado oficial do jogo

> Mantenha a consistência da pontuação, das vidas e dos cronômetros tratando o estado do jogo como a fonte da verdade e renderizando os valores do HUD a partir de um caminho de atualização.

- URL: https://oneshotgems.ai/pt-BR/topics/synchronizing-game-hud
- Categoria: Para desenvolvedores de jogos
- Tipo: Guia
- Atualizado: 5 de outubro de 2026

Uma exibição de pontuação que discorda do jogo geralmente tem duas fontes concorrentes de verdade: um valor muda na simulação e outro é atualizado diretamente por uma colisão ou retorno de chamada de animação. Escolha o modelo de jogo como oficial e renderize o HUD a partir de seu estado atual. Essa regra restrita de propriedade ajuda a evitar alterações duplicadas de pontuação, rótulos obsoletos e texto de cronômetro que continua após o término do jogo. É útil se o HUD for desenhado na tela ou renderizado como elementos DOM.

## Atualizar o estado uma vez, derivar a exibição

Quando uma moeda for coletada, atualize model.score no evento do jogo ou na etapa de simulação. No ponto de atualização da IU, renderize o valor exibido de model.score em vez de adicionar um separadamente ao rótulo. Para um HUD DOM, atualize textContent quando o valor for alterado; para um HUD de tela, desenhe o número do mesmo campo do modelo. Uma contagem visual pode ser animada em direção à pontuação confirmada.

Use uma única transição para eventos que afetam vários rótulos. Se perder uma vida também pausa o jogo e abre um painel, registre a mudança de estado uma vez e deixe a renderização refletir vidas, status e ações disponíveis em conjunto. Evite que o retorno de chamada do painel altere independentemente as mesmas variáveis ​​que um manipulador de colisão já alterou.

## Teste atualizações rápidas e estados finais

Acione duas coletas em rápida sucessão e verifique se o HUD mostra o total resultante em vez de pular uma atualização. Pause, termine uma corrida e reinicie; confirme se o cronômetro para, a pontuação final permanece visível quando pretendido e a próxima execução começa a partir dos valores definidos. Se você usar requestAnimationFrame para exibição, trate-o como um cronograma de renderização: o MDN observa que seu retorno de chamada é único e deve ser solicitado novamente para outro quadro, portanto, mantenha as transições de estado fora do código que é executado acidentalmente duas vezes por quadro.

## Reduza as atualizações desnecessárias da exibição

Para texto DOM, compare o próximo valor formatado com o atual antes de escrever se as atualizações forem frequentes. Para um HUD de tela, agrupe o desenho após a simulação em vez de pintar um rótulo de cada retorno de chamada de evento. Adicione uma leitura de depuração do modelo próximo ao HUD visível durante o desenvolvimento; se esses valores diferirem, a falha está na renderização, enquanto a correspondência de valores com o resultado errado aponta de volta para a atualização do modelo.

## Perguntas

**O rótulo da pontuação deve ser atualizado dentro de um manipulador de colisão?** O manipulador pode atualizar o estado oficial da pontuação; deixe um único caminho de renderização formatar e exibir esse estado. Evite manter no rótulo uma segunda pontuação que seja incrementada separadamente.

**Por que um HUD mostra um valor da execução anterior?** Uma reinicialização pode redefinir o estado da simulação sem acionar uma renderização do HUD, ou um painel pode conter uma cópia obsoleta. Redefina o modelo por meio de uma transição e renderize o novo estado imediatamente.

## Siga sua curiosidade

- [Projete feedback do jogo que explique cada ação](https://oneshotgems.ai/pt-BR/topics/game-feedback-design): Faça com que o feedback do jogo mostre o que mudou, por que mudou e o que o jogador pode fazer a seguir sem cobrir a área de jogo.
- [Crie um loop de jogo de navegador confiável](https://oneshotgems.ai/pt-BR/topics/browser-game-loop): Estruture atualizações de jogos do navegador e desenhe em torno de quadros de animação sem vincular a velocidade da simulação à taxa de atualização da tela do jogador.

## Leitura complementar

- [Solicitação MDNAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)

---
Página canônica: https://oneshotgems.ai/pt-BR/topics/synchronizing-game-hud