# Adapta la presentación sin cambiar el modelo del juego

> Adapte una superficie de juego a su contenedor sin vincular el estado de la simulación a las dimensiones de la pantalla y pruebe el diseño en ventanas gráficas cambiantes.

- URL: https://oneshotgems.ai/es/topics/responsive-game-layouts
- Categoría: Para desarrolladores de juegos
- Tipo: Guía
- Actualizado: 5 de octubre de 2026

Un juego de navegador puede ejecutarse en una página cuyo tamaño cambia al girar el teléfono, aparecer la barra del navegador o abrirse un panel. Separa las coordenadas de simulación del tamaño visible del canvas. Así, el diseño puede adaptarse sin cambiar por accidente la posición de los objetos, la física o las comprobaciones de impacto cada vez que cambia la vista.

## Mide el recipiente y elige una báscula.

Utilice las dimensiones del contenedor del juego en lugar de asumir que la ventana es el área jugable. Un ResizeObserver puede informar cuando ese elemento cambia, incluidos los cambios causados ​​por el diseño circundante en lugar de un cambio de tamaño de la ventana gráfica. Decide si el juego debe cambiarse en formato tamaño carta, recortarse o redistribuirse con una relación de aspecto estrecha y hacer visible la elección en lugar de alargar los círculos hasta convertirlos en óvalos.

Para un campo de juego virtual fijo, calcule un factor de escala que se ajuste a su ancho y alto, luego centre el espacio restante. Convierta las coordenadas del puntero a través de la inversa de esa misma transformación antes de realizar la prueba. Para un juego que cambia de flujo, actualice los anclajes de diseño y las formas de colisión juntas para que los controles no sigan usando posiciones del tamaño anterior.

## Siga cambiando el tamaño fuera del ciclo de simulación

Almacene el mundo del juego en unidades estables y trate la resolución del respaldo del lienzo, el tamaño de CSS y la proporción de píxeles del dispositivo como preocupaciones de renderizado. Cuando cambie el tamaño, actualice la superficie de dibujo y vuelva a dibujarla; No reinicie el nivel ni vuelva a calcular el estado del objeto a menos que las reglas del juego lo requieran. Esta separación evita que un cambio de tamaño de la barra de herramientas parezca un reinicio.

Pruebe una ventana gráfica estrecha y amplia, un cambio de tamaño y orientación del escritorio mientras el juego está activo. Verifique el ajuste del texto, toque las posiciones de destino y coordine la conversión. La guía ResizeObserver de MDN explica la observación de las dimensiones de los elementos y advierte que cambiar el tamaño observado dentro de la devolución de llamada puede crear bucles.

## Preguntas

**¿Debo cambiar el tamaño del mundo del juego cuando el lienzo cambia de tamaño?** Por lo general, mantenga estables las coordenadas de la simulación y adapte la presentación o el diseño. Si el diseño cambia intencionalmente el campo de juego, actualice sus reglas, objetos y mapeo de entrada juntos.

**¿Por qué utilizar ResizeObserver en lugar de solo cambiar el tamaño de la ventana?** Un contenedor de juego puede cambiar de tamaño debido al diseño circundante sin cambiar el tamaño de la ventana. ResizeObserver informa directamente los cambios en la dimensión del elemento.

## Sigue tu curiosidad

- [Gestiona los cambios de orientación en juegos de navegador](https://oneshotgems.ai/es/topics/game-orientation-changes): Mantenga el juego legible cuando un dispositivo gira recalculando el diseño y el mapeo de entrada sin tratar la orientación como un reinicio del juego.
- [Objetivos táctiles de tamaño para juegos de navegador](https://oneshotgems.ai/es/topics/game-touch-targets): Haga que los controles del juego sean más fáciles de utilizar separando las ilustraciones visuales de los límites interactivos y verificando el tamaño, el espaciado y la superposición en los dispositivos táctiles.
- [Convertir la posición del puntero en el canvas a coordenadas del juego](https://oneshotgems.ai/es/topics/hit-testing-canvas-coordinates): Convierte la posición del puntero en el canvas a coordenadas del juego para mantener alineados los objetivos visibles y sus zonas de clic después de cambiar la escala.

## Más información

- [MDN: Cambiar tamaño del observador](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
- [MDN: relación de aspecto](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio)

---
Página canónica: https://oneshotgems.ai/es/topics/responsive-game-layouts