# Responda à rotação sem perder a precisão dos comandos

> Mantenha o jogo legível quando um dispositivo gira recalculando o layout e o mapeamento de entrada sem tratar a orientação como uma reinicialização do jogo.

- URL: https://oneshotgems.ai/pt-BR/topics/game-orientation-changes
- Categoria: Para desenvolvedores de jogos
- Tipo: Guia
- Atualizado: 5 de outubro de 2026

Quando o celular gira, a largura e a altura disponíveis mudam. Isso não deve invalidar silenciosamente o comando atual da pessoa nem reiniciar a simulação. Decida se o jogo aceita as orientações retrato e paisagem e planeje uma alternativa clara para aquela que oferece menos espaço. Atualize a apresentação e os controles como uma única mudança coordenada.

## Escolha uma política de layout

Um jogo responsivo pode reorganizar o campo de jogo, manter uma área virtual estável com faixas laterais ou exibir um aviso claro para girar o dispositivo. Escolha de acordo com a mecânica: um jogo de corrida com pistas largas pode precisar de espaço horizontal, enquanto um jogo de empilhar peças pode continuar legível na vertical. Não estique toda a cena para fazê-la caber: isso altera as proporções dos objetos e pode tornar as áreas interativas inconsistentes.

Use media queries de CSS para decisões de layout ligadas à orientação da janela de visualização. Escute mudanças de ScreenOrientation somente quando o código precisar conhecer essa orientação; não dependa do evento obsoleto window.orientationchange. Bloquear a orientação deve atender a uma necessidade deliberada e prever uma alternativa, não servir de atalho para evitar testar o layout.

## Recalcule a transformação de coordenadas

Depois da rotação, meça o contêiner atual do jogo e recalcule a transformação de apresentação. Atualize a conversão de coordenadas do ponteiro para o mundo antes de aceitar outro comando. Se houver um arrasto em andamento, mantenha-o com a nova transformação ou cancele-o corretamente. Misturar as coordenadas antigas do ponteiro com o novo tamanho do canvas pode teletransportar um objeto pela cena.

Teste a rotação antes de iniciar uma partida, durante um arrasto e com menus abertos. Verifique se o redimensionamento não inicia outra sessão e se os controles continuam acessíveis. A MDN documenta os eventos de mudança e o bloqueio de ScreenOrientation; use-os quando necessário e confira se o dispositivo permite o bloqueio.

## Perguntas

**Um jogo de navegador deve forçar o modo paisagem?** Somente quando houver um bom motivo e uma alternativa clara. Um layout responsivo ou um aviso para girar o dispositivo pode ser melhor do que bloquear a tela.

**A rotação sempre dispara um evento de redimensionamento?** O comportamento da janela de visualização e da orientação varia conforme o navegador e o dispositivo. Teste os eventos dos quais seu código depende e meça novamente o contêiner real do jogo depois da mudança.

## Siga sua curiosidade

- [Crie layouts adaptáveis para jogos de navegador](https://oneshotgems.ai/pt-BR/topics/responsive-game-layouts): Adapte uma superfície de jogo ao seu contêiner sem vincular o estado da simulação às dimensões da tela e teste o layout em janelas de visualização variáveis.
- [Teste as entradas de jogos de navegador em vários dispositivos](https://oneshotgems.ai/pt-BR/topics/testing-game-input-devices): Crie uma pequena matriz de teste de entrada que cubra o comportamento real de toque, mouse, teclado e orientação, em vez de depender de uma sessão de desktop.
- [Crie um jogo para celular no modo retrato](https://oneshotgems.ai/pt-BR/topics/portrait-mobile-game-design): Molde um jogo com foco em retrato em torno de um campo de jogo claro, status legível e alteração das janelas de visualização do telefone antes de adicionar conteúdo ou suporte de paisagem.

## Leitura complementar

- [MDN: Gerenciando a orientação da tela](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation)
- [MDN: evento de alteração de ScreenOrientation](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/change_event)

---
Página canônica: https://oneshotgems.ai/pt-BR/topics/game-orientation-changes