Faire du redimensionnement une transition de mise en page maîtrisée

Observez l’élément réellement utilisé par le jeu

Utilisez ResizeObserver lorsque le conteneur du canevas peut changer indépendamment de la fenêtre, par exemple dans un panneau divisé ou une page dont les commandes évoluent. Lisez la taille de son contenu, ne mettez à jour les dimensions du tampon interne du canevas que si elles ont changé, et recalculez l’échelle entre les coordonnées CSS et celles du monde du jeu.

Évitez de réécrire sans condition des dimensions qui affectent la mise en page dans l’élément observé lui-même. MDN indique qu’un redimensionnement depuis une fonction de rappel de l’observateur peut créer une boucle ; planifiez soigneusement le travail et ignorez l’écriture si la taille attendue n’a pas changé. Séparez la zone d’affichage du jeu du système de coordonnées fixe du monde si la conception doit ajouter des bandes sans déformer l’image.

Testez ensemble la mise en page et les commandes

Aux formats étroit, large et après rotation, cliquez ou appuyez sur une cible près de chaque bord du canevas et vérifiez que le jeu détecte la même position dans le monde que celle de l’élément visible. Redimensionnez pendant un niveau et vérifiez que la stratégie de caméra ou d’ajout de bandes s’applique sans déplacement inattendu des positions.

Observez le conteneur au lieu de supposer que window.innerWidth détecte tous les changements de mise en page. Si le clavier mobile ou l’interface du navigateur modifie l’espace disponible, décidez si la zone de jeu doit rétrécir, garder sa taille ou défiler. Testez ce choix avec les commandes visibles, car elles peuvent occuper l’espace dont le jeu a besoin.

Questions sur ⁨gestion du redimensionnement des jeux dans le navigateur⁩