# Adapte a apresentação sem alterar o modelo do jogo

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

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

Um jogo de navegador pode rodar em uma página cujo tamanho muda quando o celular gira, uma barra do navegador aparece ou um painel é aberto. Separe as coordenadas da simulação do tamanho visível do canvas. Assim, o layout se adapta sem alterar por acidente as posições dos objetos, a física ou os testes de colisão sempre que a janela muda.

## Meça o recipiente e escolha uma escala

Use as dimensões do contêiner do jogo em vez de presumir que a janela é a área de jogo. Um ResizeObserver pode relatar quando esse elemento muda, incluindo alterações causadas pelo layout circundante, em vez de um redimensionamento da janela de visualização. Decida se o jogo deve fazer letterbox, cortar ou refluir em uma proporção estreita e tornar a escolha visível em vez de esticar os círculos em formas ovais.

Para um campo de jogo virtual fixo, calcule um fator de escala que se ajuste à sua largura e altura e centralize o espaço restante. Converta as coordenadas do ponteiro por meio do inverso da mesma transformação antes do teste de acerto. Para um jogo de refluxo, atualize as âncoras de layout e as formas de colisão juntas para que os controles não continuem usando posições do tamanho anterior.

## Continue redimensionando fora do ciclo de simulação

Armazene o mundo do jogo em unidades estáveis ​​e trate a resolução de suporte da tela, o tamanho do CSS e a proporção de pixels do dispositivo como questões de renderização. Quando o tamanho mudar, atualize a superfície de desenho e redesenhe; não redefina o nível ou recalcule o estado do objeto, a menos que as regras do jogo exijam isso. Essa separação evita que o redimensionamento da barra de ferramentas pareça uma reinicialização.

Teste uma janela de visualização estreita e ampla, um redimensionamento da área de trabalho e uma mudança de orientação enquanto o jogo está ativo. Verifique a quebra de texto, toque nas posições do alvo e coordene a conversão. O guia ResizeObserver do MDN explica a observação das dimensões dos elementos e avisa que alterar o tamanho observado dentro do retorno de chamada pode criar loops.

## Perguntas

**Devo redimensionar o mundo do jogo quando a tela mudar de tamanho?** Em geral, mantenha estáveis as coordenadas da simulação e adapte a apresentação ou o layout. Se o design mudar o campo de jogo de propósito, atualize juntos as regras, os objetos e o mapeamento de entrada.

**Por que usar o ResizeObserver em vez de apenas redimensionar a janela?** Um contêiner de jogo pode mudar de tamanho devido ao layout circundante sem redimensionar a janela. ResizeObserver relata alterações de dimensão de elemento diretamente.

## Siga sua curiosidade

- [Lide com mudanças de orientação em jogos de navegador](https://oneshotgems.ai/pt-BR/topics/game-orientation-changes): 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.
- [Alvos de toque de tamanho para jogos de navegador](https://oneshotgems.ai/pt-BR/topics/game-touch-targets): Torne os controles do jogo mais fáceis de acertar, separando a arte visual dos limites interativos e verificando o tamanho, o espaçamento e a sobreposição em dispositivos de toque.
- [Converta posições do ponteiro no canvas em coordenadas do jogo](https://oneshotgems.ai/pt-BR/topics/hit-testing-canvas-coordinates): Converta a posição do ponteiro para o sistema de coordenadas do jogo, mantendo os alvos visíveis alinhados às áreas clicáveis mesmo após uma mudança de escala.

## Leitura complementar

- [MDN: ResizeObservador](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
- [MDN: proporção de aspecto](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio)

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