0

Tengo un canvas con phaser con las siguientes dimensiones:

game = new Phaser.Game(480, 600, Phaser.AUTO, "");

Esto lo muestro en el ordenador y no hay problema, es la medida que necesito, pero cuando lo visualizo desde el móvil me gustaría que se adaptara al ancho de la pantalla.

Ahora mismo en el móvil se ve como pequeño, y hay que hacer zoom con los dedos para adaptarlo. La idea es que tomara el ancho de la pantalla y estuviera el contenido bien ajustado.

Por otro lado. El canvas es llamado desde un .html con un script:

<script src="phaser.min.js"></script>
<script src = "game.js"></script>

Y en el <body> de ese fichero .html se genera el canvas, eso significa que todo lo que escriba en el <body> aparece siempre por encima del canvas. ¿Hay alguna manera de ubicar el canvas en otro lugar que yo quiera dentro del <body>.

Muchas gracias como siempre!

2 respuestas 2

1

Tienes que usar los media queries de css pero en javascript.

Por medio de una condicional, le dices que si esta en un celular entonces en ancho del Canvas debe ser igual al ancho de la ventana, sino, pues le das el ancho que tu quieras.

const mediaQuery = window.matchMedia("(orientation: portrait)")
game = new Phaser.Game({
    width: (mediaQuery.matches ? window.innerWidth : 480),
    height: (mediaQuery.matches ? window.innerWidth : 600)
});
0

En la parte del config agrega parent: 'juego', Es decir te quedaria algo asi:

var config = {
        type: Phaser.AUTO,
        parent: 'juego',
        width: 800,
        height: 600,
        physics: { ...

Y lo llamas desde el html con un div de la siguiente manera: <div id="juego"></div>.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.