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 sobre tratamento de redimensionamento de jogos no navegador
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.
Leitura complementar
Viu alguma informação desatualizada? Informar uma correção