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

> Adaptez une surface de jeu à son conteneur sans lier l'état de simulation aux dimensions de l'écran et testez la disposition dans des fenêtres changeantes.

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

Un jeu web peut s’exécuter dans une page dont la taille change lorsque le téléphone pivote, qu’une barre du navigateur apparaît ou qu’un panneau s’ouvre. Séparez les coordonnées de simulation de la taille visible du canvas. La mise en page peut ainsi s’adapter sans modifier accidentellement la position des objets, la physique ou les tests de collision à chaque changement de fenêtre.

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

**Dois-je redimensionner le monde du jeu lorsque le canevas change de taille ?** Maintenez généralement les coordonnées de simulation stables et adaptez la présentation ou la mise en page. Si la conception modifie intentionnellement le terrain de jeu, mettez à jour ensemble ses règles, ses objets et son mappage d'entrée.

**Pourquoi utiliser ResizeObserver au lieu de redimensionner uniquement la fenêtre ?** Un conteneur de jeu peut changer de taille en raison de la disposition environnante sans redimensionner la fenêtre. ResizeObserver signale directement les changements de dimension des éléments.

## Suivez votre curiosité

- [Gérer les changements d’orientation des jeux web](https://oneshotgems.ai/fr/topics/game-orientation-changes): Gardez le jeu lisible lorsqu'un appareil tourne en recalculant la disposition et le mappage des entrées sans traiter l'orientation comme un redémarrage du jeu.
- [Taille des cibles tactiles pour les jeux par navigateur](https://oneshotgems.ai/fr/topics/game-touch-targets): Facilitez l'accès aux commandes de jeu en séparant les illustrations visuelles des limites interactives et en vérifiant la taille, l'espacement et le chevauchement sur les appareils tactiles.
- [Convertir les positions du pointeur en coordonnées de jeu dans un canvas](https://oneshotgems.ai/fr/topics/hit-testing-canvas-coordinates): Convertissez la position du pointeur en coordonnées du monde du jeu pour que les cibles visibles et leurs zones cliquables restent alignées après un changement d’échelle.

## Pour aller plus loin

- [MDN : ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
- [MDN : format d'image](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio)

---
Page canonique: https://oneshotgems.ai/fr/topics/responsive-game-layouts