Observa el elemento que usa realmente el juego
Usa ResizeObserver cuando el contenedor del canvas pueda cambiar de tamaño independientemente de la ventana, por ejemplo, dentro de un panel dividido o en una página cuyos controles cambian. Lee el tamaño de su contenido, actualiza las dimensiones del búfer interno del canvas solo si son distintas y vuelve a calcular la escala entre las coordenadas CSS y las coordenadas del mundo del juego.
Evita escribir dimensiones que afecten al diseño en el mismo elemento observado sin una condición que lo impida. MDN advierte que cambiar el tamaño desde una función de retorno del observador puede crear un bucle; programa el trabajo con cuidado y omite las escrituras si el tamaño esperado no ha cambiado. Mantén la ventana gráfica del juego separada del sistema fijo de coordenadas del mundo cuando el diseño deba añadir bandas laterales o superior e inferior, en lugar de deformar la imagen.
Prueba el diseño y la entrada como un mismo comportamiento
En tamaños estrechos, anchos y con el dispositivo girado, haz clic o toca un objetivo cerca de cada borde del canvas y comprueba que el juego detecte la misma posición del mundo que indica la marca visible. Cambia el tamaño mientras haya un nivel en curso y confirma que se aplique la política de cámara o de bandas sin desplazar posiciones de forma inesperada.
Observa el contenedor en vez de suponer que window.innerWidth detecta todos los cambios de diseño. Si el teclado del móvil o la interfaz del navegador cambia el espacio disponible, decide si el área de juego debe reducirse, conservar su tamaño o permitir desplazamiento. Prueba esa decisión con los controles visibles, porque pueden ocupar espacio que el juego necesita.
Preguntas sobre gestión del cambio de tamaño en juegos de navegador
¿Cada cambio de tamaño debería cambiar el tamaño del mundo del juego?
No. Muchos juegos conservan coordenadas estables del mundo y solo cambian la cámara o añaden bandas. Cambiar el tamaño del mundo puede afectar a la dificultad, las colisiones y la composición del nivel.
¿Cuándo conviene usar ResizeObserver en vez de un controlador del evento de cambio de tamaño de la ventana?
Usa ResizeObserver cuando el tamaño del elemento relevante pueda cambiar por su contenedor o por el diseño circundante, aunque las dimensiones generales de la ventana sigan iguales.
Más información
¿Has visto algo desactualizado? Notificar una corrección