Adapter l’affichage sans modifier le modèle du jeu

Mesurez le récipient et choisissez une balance

Utilisez les dimensions du conteneur de jeu plutôt que de supposer que la fenêtre est la zone jouable. Un ResizeObserver peut signaler quand cet élément change, y compris les changements causés par la disposition environnante plutôt que par le redimensionnement de la fenêtre. Décidez si le jeu doit être écrit en boîte aux lettres, recadré ou redistribué selon un rapport hauteur/largeur étroit, et rendez le choix visible au lieu d'étirer les cercles en ovales.

Pour un terrain de jeu virtuel fixe, calculez un facteur d'échelle adapté à sa largeur et à sa hauteur, puis centrez l'espace restant. Convertissez les coordonnées du pointeur via l'inverse de cette même transformation avant le test de frappe. Pour un jeu redistribué, mettez à jour les ancres de mise en page et les formes de collision ensemble afin que les contrôles ne continuent pas à utiliser les positions de la taille précédente.

Gardez le redimensionnement en dehors de la boucle de simulation

Stockez le monde du jeu dans des unités stables et traitez la résolution du support du canevas, la taille CSS et le rapport de pixels de l'appareil comme des problèmes de rendu. Lorsque la taille change, mettez à jour la surface de dessin et redessinez ; ne réinitialisez pas le niveau et ne recalculez pas l'état de l'objet à moins que les règles du jeu ne l'exigent. Cette séparation empêche le redimensionnement d'une barre d'outils de ressembler à un redémarrage.

Testez une fenêtre d'affichage étroite et large, un redimensionnement du bureau et un changement d'orientation pendant que le jeu est actif. Vérifiez l'habillage du texte, touchez les positions cibles et la conversion des coordonnées. Le guide ResizeObserver de MDN explique l'observation des dimensions des éléments et prévient que la modification de la taille observée à l'intérieur du rappel peut créer des boucles.

Questions sur ⁨mise en page adaptative pour jeu web⁩