Adaptación del juego
HTML se adaptó inicialmente utilizando píxeles, porque las unidades de medida de la pantalla no son metros y centímetros, sino píxeles. Cuantos más píxeles, mejor, cuántas "cuadrículas" se muestran.
A medida que los dispositivos se desarrollan, la "cuadrícula" de píxeles se hace cada vez más pequeña. A veces, el tamaño de la cuadrícula de los teléfonos móviles nuevos es la mitad de la cuadrícula original y no es exacto describirlo en píxeles, por lo que se introduce este concepto.
Por ejemplo, en el iPhone 6 de 375*667, los píxeles reales son 750*1334 y las imágenes que damos necesitan píxeles reales para mostrar más detalles, por lo que se derivan dos conceptos, a saber, ancho de pantalla, altura, ancho y alto de la pantalla * pixelratio = ancho y alto del juego.
Muchos desarrollos de juegos utilizan la relación de 750*1334 como referencia, y la relación de aspecto es 0,56 (la definí en secreto como pantalla de 0,56).
En la API de lienzo de dom, canvas.width/canvas.height es el ancho del contexto, que es el ancho del juego, y style.width, o descrito por transform, es el ancho de css, que es el ancho de la pantalla.
Si la proporción es consistente, por ejemplo, el juego es 640*1334 (es decir, 0,56 de pantalla), simplemente podemos acercar y alejar.
Si las proporciones son inconsistentes, existen dos métodos.
Si se ajusta el tamaño del juego, la interfaz de usuario del juego también debe ajustarse en consecuencia, porque solo la ventana gráfica se hace más grande, pero la posición de la interfaz de usuario no cambia y aún quedan más ajustes por hacer. necesario.
En términos generales, elegiremos ancho fijo, porque la primera sensación al pasar del iPhone6 al iPhoneX es que la altura se ha vuelto más grande, no que el ancho se ha vuelto más estrecho.
La adaptación requiere considerar tanto el eje horizontal como el vertical. Debido al ancho fijo, no necesitamos considerar el eje horizontal, solo el eje vertical.
A veces cambiamos la proporción y posición de los objetos mostrados adaptándonos. En este punto, cuando se utiliza animación, el valor inicial puede ser incorrecto y el valor final también puede ser incorrecto.
En este momento podemos utilizar un contenedor de doble capa. El contenedor exterior es adaptable y el contenedor interior se utiliza para la animación. Por ejemplo, la adaptación del contenedor exterior da como resultado una escala de 0,8, pero el contenedor interior aún se amplía de 1 a 1,2 y los dos eventualmente se superpondrán.