# Traitez les onglets cachés comme un état du jeu

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

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

Pendant qu’un jeu par navigateur est en cours, un joueur peut changer d’onglet, réduire la fenêtre ou verrouiller son appareil. Les navigateurs suspendent souvent les callbacks d’animation dans les documents masqués et limitent la fréquence des minuteurs ; une boucle de mise à jour ne peut donc pas compter sur chaque tick programmé. Modélisez la visibilité comme une transition d’état explicite. Vous pourrez ainsi définir une politique pour les minuteurs, les entrées, le son et la progression enregistrée, plutôt que d’essayer de reconstituer une durée de simulation incertaine au retour du joueur.

## Définir ce qui change avec la visibilité

Dans un jeu de réflexes, mettez la partie en pause quand document.visibilityState passe à hidden, arrêtez le compte à rebours, effacez l’état des touches maintenues et affichez un bouton de reprise lorsque la page redevient visible. Un puzzle au tour par tour peut conserver son plateau sans écran de pause, tout en coupant le son et en réinitialisant son horloge d’animation.

Notez le comportement attendu d'une minuterie, d'un danger en mouvement et d'une touche enfoncée avant la mise en œuvre. Puis éloignez-vous à chaque fois et revenez. Cette petite matrice détecte des bugs comme une touche qui reste logiquement maintenue ou un timer qui expire alors que le jeu n'était pas visible.

## Réinitialiser le temps avant de reprendre

Écoutez l’événement visibilitychange et séparez la décision de pause du rendu. Au retour, réglez l’horodatage de la frame précédente sur l’horodatage d’animation actuel, ou indiquez que la première frame après la reprise doit réinitialiser l’horloge. Sinon, le delta suivant peut inclure toute la durée pendant laquelle l’onglet était masqué et déplacer brusquement les objets.

Utilisez l'API Page Visibility plutôt que de vous fier uniquement au flou et à la mise au point : une fenêtre peut perdre le focus tout en restant visible, et la visibilité indique si le document est réellement masqué. Gardez toute politique de sauvegarde automatique indépendante ; le comportement de pause et la persistance ont des objectifs différents et doivent être testés séparément.

## Questions

**requestAnimationFrame continuera-t-il à s'exécuter dans un onglet masqué ?** La plupart des navigateurs suspendent les rappels d'animation dans les onglets d'arrière-plan ou les iframes masquées, et les rappels de minuterie peuvent également être limités. Traitez ces comportements comme des raisons de gérer la visibilité plutôt que comme une horloge précise.

**Chaque jeu devrait-il s'arrêter lorsqu'il est caché ?** Aucune politique ne convient à toutes les conceptions. Mettez les jeux en pause où une simulation invisible modifie le défi ; pour un jeu au tour par tour, conserver le plateau actuel peut suffire. Dans les deux cas, réinitialisez délibérément le timing et l’audio au retour.

## Suivez votre curiosité

- [Créez une boucle de jeu sur navigateur fiable](https://oneshotgems.ai/fr/topics/browser-game-loop): 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.
- [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.

## Pour aller plus loin

- [MDN : API de visibilité des pages](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)

---
Page canonique: https://oneshotgems.ai/fr/topics/pausing-background-games