Así que quiero saber cómo trabajar con un (que será en pantalla completa) en diferentes tamaños de pantalla.
Este es un problema común que tiene una resolución bastante fácil. A menudo, esto se hace separando las coordenadas del lienzo duro de lo que a veces se llama coordenadas "modelo".
Realmente depende de cómo esté organizado el código, pero supongo que el juego tiene algo de altura y ancho para el mundo que ocupa la mayor parte o la totalidad de la pantalla. Las dos proporciones de aspecto de las pantallas a las que se dirige son 1.5 y 1.666, por lo que querrá atender al más pequeño
Así que realmente querrá hacer su juego en un conjunto de coordenadas "modelo" que no tienen relación con la pantalla o el tamaño del lienzo. Dado que solo está orientando dos tamaños de pantalla, las coordenadas de su modelo pueden ser de 960x640, ya que esa es la menor de las dos proporciones de aspecto. No tiene que ser así. En su lugar, podría ser 100x50 para las coordenadas de su modelo. Pero en este ejemplo usaremos 960x640 como coordenadas de nuestro modelo.
Internamente, nunca utilizará otra cosa que estas coordenadas del modelo. Nunca piensas en otras coordenadas al hacer tu juego.
Cuando el tamaño de la pantalla es 960x640 no tendrá que cambiar nada en absoluto ya que es una asignación 1: 1, que es conveniente.
Luego, cuando el tamaño de la pantalla es realmente de 800x480, cuando llegue el momento de dibujar en la pantalla, querrá traducir todas las coordenadas del modelo por (3/4), por lo que el juego se realizará y usará internamente 960x480, pero se dibujará en el área de (720x480). También querrá tomar cualquier mouse o entrada táctil y multiplicarlo por (4/3) para convertir las coordenadas de la pantalla en coordenadas del modelo.
Esta traducción puede ser tan fácil como llamar al ctx.scale(3/4, 3/4) antes de dibujar todo.
Por lo tanto, ambas plataformas tendrán un código que está escrito asumiendo que el juego tiene un tamaño de 960x640. La única vez que las coordenadas del modelo se convierten en coordinadas de pantalla es cuando se dibuja en el lienzo (que es de un tamaño diferente) y se convierten las coordenadas del mouse/touch del lienzo en coordenadas del modelo.
Si eso te parece confuso, puedo intentar hacer una muestra.
obras ctx.scale pero hace un poco borrosa mapas de bits (incluso escalar hacia abajo). La solución para esto sería tener diferentes conjuntos de imágenes para cada resolución (rango), ¿verdad? – Ixx
¿Por qué toda esta escala explícita? Use el ancho/alto en el HTML para establecer el tamaño de su "modelo", y use esas coordenadas sin escala en todas partes. Luego use CSS para hacer que el tamaño físico de su