# Responde al giro sin perder precisión en la entrada

> Mantenga el juego legible cuando un dispositivo gira recalculando el diseño y el mapeo de entrada sin tratar la orientación como un reinicio del juego.

- URL: https://oneshotgems.ai/es/topics/game-orientation-changes
- Categoría: Para desarrolladores de juegos
- Tipo: Guía
- Actualizado: 5 de octubre de 2026

Al girar el teléfono cambian el ancho y el alto disponibles, pero eso no debería invalidar sin avisar la entrada actual del jugador ni reiniciar la simulación. Decide si el juego admite las orientaciones vertical y horizontal y diseña una alternativa clara para la que tenga menos espacio. Actualiza la presentación y los controles como un único cambio coordinado.

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

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

## Sigue tu curiosidad

- [Crea diseños adaptables para juegos de navegador](https://oneshotgems.ai/es/topics/responsive-game-layouts): Adapte una superficie de juego a su contenedor sin vincular el estado de la simulación a las dimensiones de la pantalla y pruebe el diseño en ventanas gráficas cambiantes.
- [Prueba la entrada de juegos de navegador en distintos dispositivos](https://oneshotgems.ai/es/topics/testing-game-input-devices): Cree una pequeña matriz de prueba de entrada que cubra el comportamiento real del tacto, el mouse, el teclado y la orientación en lugar de depender de una sola sesión de escritorio.
- [Diseña un juego móvil para jugar en vertical](https://oneshotgems.ai/es/topics/portrait-mobile-game-design): Crea un juego vertical en torno a un campo de juego claro, un estado legible y cambios en las ventanas gráficas del teléfono antes de agregar contenido o soporte horizontal.

## Más información

- [MDN: Administrar la orientación de la pantalla](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation)
- [MDN: evento de cambio de orientación de pantalla](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/change_event)

---
Página canónica: https://oneshotgems.ai/es/topics/game-orientation-changes