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 sur changements d’orientation des jeux web
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.
Pour aller plus loin
Vous avez repéré une information dépassée ? Signaler une correction