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 sobre sincronizando o HUD do jogo
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.
Leitura complementar
Viu alguma informação desatualizada? Informar uma correção