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 sur mettre en pause l'onglet d'arrière-plan du jeu par navigateur
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.
Pour aller plus loin
Vous avez repéré une information dépassée ? Signaler une correction