Mettre à jour l'état une fois, dériver l'affichage
Lorsqu'une pièce est collectée, mettez à jour model.score lors de l'événement de jeu ou de l'étape de simulation. Au point de mise à jour de l'interface utilisateur, restituez la valeur affichée à partir de model.score au lieu d'en ajouter une séparément à l'étiquette. Pour un HUD DOM, mettez à jour textContent lorsque la valeur change ; pour un HUD sur toile, dessinez le numéro à partir du même champ de modèle. Un décompte visuel peut s'animer vers la score acquis.
Utilisez une seule transition pour les événements qui affectent plusieurs étiquettes. Si la perte d'une vie interrompt également la lecture et ouvre un panneau, enregistrez le changement d'état une fois, puis laissez le rendu refléter ensemble les vies, le statut et les actions disponibles. Évitez que le rappel du panneau modifie indépendamment les mêmes variables qu'un gestionnaire de collision a déjà modifiées.
Testez les mises à jour rapides et les états finaux
Déclenchez deux collectes successives et vérifiez que le HUD affiche le total résultant plutôt que d'ignorer une mise à jour. Faites une pause, terminez une course et redémarrez ; confirmez que le chronomètre s'arrête, que le score final reste visible comme prévu et que la prochaine manche démarre à partir de ses valeurs définies. Si vous utilisez requestAnimationFrame pour l'affichage, traitez-le comme un calendrier de rendu : MDN note que son rappel est ponctuel et doit être demandé à nouveau pour une autre image, donc évitez les transitions d'état du code qui s'exécute accidentellement deux fois par image.
Réduisez les actualisations d’affichage inutiles
Pour le texte DOM, comparez la valeur formatée suivante avec la valeur actuelle avant d'écrire si les mises à jour sont fréquentes. Pour un HUD sur toile, regroupez le dessin après la simulation plutôt que de peindre une étiquette à partir de chaque rappel d'événement. Ajoutez une lecture de débogage du modèle à côté du HUD visible pendant le développement ; si ces valeurs diffèrent, le problème réside dans le rendu, tandis que la correspondance des valeurs avec un résultat erroné renvoie à la mise à jour du modèle.
Questions sur synchronisation du HUD du jeu
L'étiquette de score doit-elle être mise à jour dans un gestionnaire de collisions ?
Le gestionnaire peut mettre à jour l’état de score faisant autorité ; laissez un seul chemin de rendu mettre cet état en forme et l’afficher. Évitez de conserver dans l’étiquette un deuxième score incrémenté séparément.
Pourquoi un HUD affiche-t-il une valeur de l'exécution précédente ?
Un redémarrage peut réinitialiser l'état de la simulation sans déclencher un rendu HUD, ou un panneau peut contenir une copie obsolète. Réinitialisez le modèle via une transition et restituez immédiatement le nouvel état.
Pour aller plus loin
Vous avez repéré une information dépassée ? Signaler une correction