Elige una política de diseño
Un juego adaptable puede reorganizar el campo de juego, mantener un área virtual estable con bandas laterales o mostrar un aviso claro para girar el dispositivo. Elige según la mecánica: un juego de carreras por carriles anchos puede necesitar espacio horizontal, mientras que uno de apilar piezas puede seguir siendo legible en vertical. No estires toda la escena para encajarla: cambiarías las proporciones de los objetos y podrías desajustar las zonas interactivas.
Usa consultas de medios CSS para las decisiones de diseño vinculadas a la orientación de la ventana gráfica. Escucha los cambios de ScreenOrientation solo si el código necesita conocer esa orientación; no dependas del evento obsoleto window.orientationchange. Bloquear la orientación debe responder a una necesidad deliberada y contar con una alternativa clara, no servir de atajo para evitar probar el diseño.
Recalcula la transformación de coordenadas
Después del giro, mide el contenedor actual del juego y vuelve a calcular su transformación de presentación. Actualiza la conversión de coordenadas del puntero al mundo antes de aceptar otra acción. Si hay un arrastre en curso, consérvalo con la nueva transformación o cancélalo limpiamente; mezclar las coordenadas anteriores con el nuevo tamaño del canvas puede teletransportar un objeto por la escena.
Prueba el giro antes de iniciar una partida, durante un arrastre y con los menús abiertos. Comprueba que el cambio de tamaño no inicie otra sesión y que los controles sigan siendo accesibles. MDN documenta los eventos de cambio y el bloqueo de ScreenOrientation; úsalos cuando hagan falta y comprueba que el dispositivo permita bloquear la orientación.
Preguntas sobre cambios de orientación en juegos de navegador
¿Debería un juego de navegador forzar la orientación horizontal?
Solo si existe un motivo claro y una alternativa bien definida. Un diseño adaptable o un aviso para girar el dispositivo puede ser mejor opción que bloquear la pantalla.
¿Girar la pantalla siempre genera un evento de cambio de tamaño?
El comportamiento de la ventana gráfica y la orientación varía según el navegador y el dispositivo. Prueba los eventos de los que depende tu código y vuelve a medir el contenedor real del juego después del cambio.
Más información
¿Has visto algo desactualizado? Notificar una corrección