# Trate o redimensionamento como uma transição de layout controlada

> Mantenha as coordenadas do jogo, as dimensões do canvas e o layout sincronizados quando a pessoa que joga redimensionar a janela ou mudar a orientação.

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

Um jogo no navegador pode mudar de tamanho quando a janela muda, o dispositivo gira, os controles do navegador aparecem ou o layout da página se altera. Se o canvas mudar de tamanho sem atualizar seu buffer interno e o mapeamento das entradas, a imagem poderá ficar esticada e os cliques serem detectados em outro lugar. Trate o tamanho como uma entrada para o layout e a renderização, atualizando juntos os sistemas que dependem dele. O redimensionamento não deve reiniciar o progresso do jogo nem provocar trabalho caro repetidamente a cada pequena oscilação nas medidas.

## Observe o elemento que o jogo realmente usa

Use ResizeObserver quando o contêiner do canvas puder mudar independentemente da janela, por exemplo, dentro de um painel dividido ou em uma página com controles que mudam. Leia o tamanho do conteúdo, atualize a resolução interna do canvas somente se ela tiver mudado e recalcule a escala entre as coordenadas CSS e as coordenadas do mundo do jogo.

Evite escrever dimensões que afetam o layout de volta no mesmo elemento observado sem uma condição de segurança. O MDN explica que redimensionar dentro de uma função de callback do observador pode criar um loop; agende o trabalho com cuidado e ignore a gravação se o tamanho esperado não mudou. Mantenha a área de visualização do jogo separada do sistema fixo de coordenadas do mundo quando o design precisar acrescentar faixas em vez de distorcer a imagem.

## Teste o layout e os comandos como um único comportamento

Em tamanhos estreitos, largos e com o dispositivo girado, clique ou toque em um alvo perto de cada borda do canvas e confira se o jogo reconhece a mesma posição do mundo indicada pelo elemento visível. Redimensione durante uma fase ativa e confirme se a política da câmera ou das faixas é aplicada sem deslocar posições inesperadamente.

Observe o contêiner em vez de presumir que window.innerWidth detecta todas as mudanças de layout. Se o teclado do celular ou a interface do navegador alterar o espaço disponível, decida se a área de jogo deve encolher, manter o tamanho ou permitir rolagem. Teste essa decisão com os controles à mostra, pois eles podem ocupar o espaço necessário ao jogo.

## Perguntas

**Toda mudança de tamanho deve alterar o tamanho do mundo do jogo?** Não. Muitos jogos mantêm coordenadas estáveis para o mundo e mudam apenas a câmera ou acrescentam faixas. Alterar o tamanho do próprio mundo pode afetar a dificuldade, as colisões e a composição das fases.

**Quando ResizeObserver é melhor que um manipulador do evento de redimensionamento da janela?** Use ResizeObserver quando o elemento relevante puder mudar de tamanho por causa do contêiner ou do layout ao redor, mesmo que as dimensões gerais da janela permaneçam iguais.

## Siga sua curiosidade

- [Defina a resolução do Canvas para deixar a arte do jogo nítida](https://oneshotgems.ai/pt-BR/topics/canvas-pixel-density): Equilibre a resolução da tela, a proporção de pixels do dispositivo, o uso de memória e o custo de desenho quando um jogo precisa parecer nítido nas telas.
- [Encontre gargalos de renderização no Canvas](https://oneshotgems.ai/pt-BR/topics/canvas-game-performance): Perfille um jogo 2D em Canvas com cenas repetíveis e reduza operações de desenho custosas somente depois de medir onde o tempo está sendo gasto.

## Leitura complementar

- [MDN: ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)

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