Primer Phaser

No puedo recordar exactamente cuando se atravesó en mi camino el framework Phaser para desarrollo de videojuegos, aunque me ha llamado la atención no lo avía probado y he aquí el primer acercamiento confitado con unas cuantas cosas más.

1. Centrado vertical y horizontal de un elemento con CSS.

2. Escalado adaptativo, del elemento al tamaño de la ventana que lo contiene.

3. Maximisar al tamaño de la pantalla una ventana emergente.

4. ‎cargar una imagen con el framework Phaser.

Centrado vertical y horizontal de un elemento con CSS.

Concretamente necesitamos dos contendores (< div >) el "padre" el cual determina lo necesario para heredar las características al "hijo".

En el caso del ejemplo el "padre" es el de la pagina.

html, body { margin: 0px; background-color: #656565; width: 100%; height: 100%; display: flex; /* esta propiedad es la que proporciona la magia*/ align-items: center; /* alineacion vertical */ justify-content: center; /* alineacion horizontal */ }

y definimos las características del "hijo".

#videojuego{ width: 320px; height: 192px; }


display: flex es una propiedad que nos permite el diseño de una estructura flexible de disposición receptiva. ¿quieres conocer mas? puedes verlo en este articulo de w3school.