# Réagir à la rotation sans perdre en précision de saisie

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

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

La rotation du téléphone modifie la largeur et la hauteur disponibles, mais ne doit ni invalider silencieusement la saisie en cours ni réinitialiser la simulation. Déterminez si le jeu prend en charge les orientations portrait et paysage, puis prévoyez une solution claire pour celle qui offre le moins d’espace. Mettez à jour l’affichage et les commandes en une seule modification coordonnée.

## Choisir une stratégie de mise en page

Un jeu adaptatif peut réorganiser le terrain de jeu, conserver une zone virtuelle stable avec des bandes autour ou afficher une invite claire demandant de tourner l’appareil. Choisissez selon la mécanique : un jeu de course sur une large piste peut avoir besoin d’espace horizontal, tandis qu’un jeu d’empilement vertical peut rester lisible en portrait. N’étirez pas toute la scène pour l’ajuster : cela modifierait les proportions des objets et pourrait fausser les zones interactives.

Utilisez les requêtes média CSS pour les choix de mise en page liés à l’orientation de la fenêtre d’affichage. Écoutez les changements de ScreenOrientation uniquement si le script doit connaître l’orientation ; ne vous fiez pas à l’événement obsolète window.orientationchange. Le verrouillage de l’orientation doit répondre à un besoin délibéré et prévoir une solution de repli, pas éviter de tester la mise en page.

## Recalculer la transformation des coordonnées

Après la rotation, mesurez le conteneur actuel du jeu et recalculez sa transformation d’affichage. Mettez à jour la conversion des coordonnées du pointeur vers le monde avant d’accepter une nouvelle action. Si un glissement est en cours, conservez-le avec la nouvelle transformation ou annulez-le proprement : mélanger les anciennes coordonnées et la nouvelle taille du canvas peut téléporter un objet dans la scène.

Testez la rotation avant une partie, pendant un glissement et lorsque les menus sont ouverts. Vérifiez que le redimensionnement ne lance pas une nouvelle session et que les commandes restent accessibles. MDN documente les événements de changement et le verrouillage de ScreenOrientation ; utilisez-les si nécessaire et vérifiez que l’appareil accepte le verrouillage.

## Questions

**Un jeu web doit-il imposer le mode paysage ?** Seulement s’il existe une bonne raison et une solution de repli claire. Une mise en page adaptative ou une invite demandant de tourner l’appareil peut être préférable au verrouillage de l’écran.

**La rotation déclenche-t-elle toujours un événement de redimensionnement ?** Le comportement de la fenêtre d’affichage et de l’orientation varie selon le navigateur et l’appareil. Testez les événements dont dépend votre code et mesurez à nouveau le conteneur réel du jeu après le changement.

## Suivez votre curiosité

- [Créer des mises en page adaptatives pour les jeux web](https://oneshotgems.ai/fr/topics/responsive-game-layouts): 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.
- [Tester les commandes des jeux par navigateur sur différents appareils](https://oneshotgems.ai/fr/topics/testing-game-input-devices): Créez une petite matrice de test d'entrée qui couvre le comportement réel du toucher, de la souris, du clavier et de l'orientation au lieu de vous fier à une seule session de bureau.
- [Concevoir un jeu mobile pour le jeu en portrait](https://oneshotgems.ai/fr/topics/portrait-mobile-game-design): Créez un jeu axé d'abord sur le portrait autour d'un terrain de jeu clair, d'un statut lisible et de fenêtres d'affichage changeantes avant d'ajouter du contenu ou la prise en charge du paysage.

## Pour aller plus loin

- [MDN : Gestion de l'orientation de l'écran](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation)
- [MDN : événement de changement d'orientation de l'écran](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/change_event)

---
Page canonique: https://oneshotgems.ai/fr/topics/game-orientation-changes