# Une boucle de jeu qui reste prévisible sur tous les écrans

> Structurez les mises à jour des jeux par navigateur et dessinez autour des images d’animation sans lier la vitesse de simulation au taux de rafraîchissement de l’affichage d’un joueur.

- URL: https://oneshotgems.ai/fr/topics/browser-game-loop
- Catégorie: Pour les développeurs de jeux
- Type: Guide
- Mis à jour le: 5 octobre 2026

Une boucle de jeu dans le navigateur coordonne la simulation, le dessin et les entrées, sans supposer que chaque écran produit le même nombre d’images par seconde. Un rappel peut s’exécuter à différentes fréquences de rafraîchissement, être suspendu dans un onglet masqué ou arriver en retard lorsque le thread principal est occupé. Faites dépendre la simulation du temps écoulé et laissez le navigateur planifier l’affichage. Cette séparation facilite le raisonnement sur les mouvements et permet de contrôler ce qui se passe après une longue interruption.

## Séparer les changements d'état du dessin

Utilisez requestAnimationFrame pour la prochaine mise à jour visuelle, puis transmettez son horodatage dans un petit coordinateur de boucle. Mettre à jour les positions, les minuteries et les règles à partir du temps écoulé ; dessiner l'état actuel après les mises à jour. Le moteur de rendu ne doit pas décider si une collision s'est produite, et une vérification de collision ne doit pas dépendre du fait qu'un sprite ait été peint ou non.

Pour un petit test de plate-forme, déplacez un marqueur horizontalement à un nombre choisi d'unités mondiales par seconde. Exécutez le même itinéraire sur un écran 60 Hz et un écran à rafraîchissement élevé. Si le marqueur se déplace plus loin dans le même intervalle d'horloge murale sur un écran, un certain mouvement est toujours appliqué par rappel plutôt que par unité de temps.

## Choisissez une politique de récupération pour les images en retard

Une longue pause peut produire un intervalle écoulé énorme. Limitez la valeur écoulée pour un jeu occasionnel en temps réel afin qu'un joueur qui revient ne voie pas un personnage se téléporter à travers plusieurs obstacles. Pour les simulations déterministes, utilisez une étape de mise à jour fixe avec un accumulateur, exécutez un nombre limité de mises à jour de rattrapage et effectuez le rendu entre les états de simulation si l'interpolation est utile.

Enregistrez l'intervalle de rappel le plus long au cours d'une course d'obstacles répétable, puis inspectez le jeu après avoir changé de position. Décidez si le jeu doit s'arrêter, rattraper un peu ou reprendre à partir du dernier état ; rendez ce choix explicite au lieu de laisser une seule image retardée le déterminer.

## Questions

**Dois-je utiliser setInterval pour dessiner ?** Utilisez requestAnimationFrame pour le travail visuel, car il est planifié à proximité du repeint et est généralement mis en pause pour les documents masqués. Un minuteur peut toujours programmer des tâches non visuelles, mais il ne doit pas être traité comme une horloge à affichage.

**D'où vient l'horodatage du frame ?** Le rappel requestAnimationFrame fournit un horodatage haute résolution. MDN documente son timing et son comportement ponctuel ; utilisez cet horodatage pour calculer la progression plutôt que de compter les rappels.

## Suivez votre curiosité

- [Utiliser delta time pour éviter les mouvements saccadés](https://oneshotgems.ai/fr/topics/delta-time-in-games): Appliquez le temps écoulé aux mouvements du jeu, choisissez une politique de rattrapage sécurisée et testez les mouvements à différentes fréquences de rafraîchissement et après les décrochages.
- [Mettre un jeu en pause lorsque son onglet est masqué](https://oneshotgems.ai/fr/topics/pausing-background-games): Utilisez les modifications de visibilité de la page pour choisir ce qui est mis en pause, ce qui est enregistré et comment un jeu par navigateur reprend sans saut dans le temps.
- [Gardez un HUD de jeu par navigateur synchronisé](https://oneshotgems.ai/fr/topics/synchronizing-game-hud): Maintenez la cohérence des scores, des vies et des chronomètres en traitant l'état du jeu comme source de vérité et en restituant les valeurs du HUD à partir d'un seul chemin de mise à jour.

## Pour aller plus loin

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

---
Page canonique: https://oneshotgems.ai/fr/topics/browser-game-loop