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

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 sobre ⁨layouts adaptáveis para jogos de navegador⁩