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 sobre mudanças de orientação em jogos de navegador
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.
Leitura complementar
Viu alguma informação desatualizada? Informar uma correção