Estructura html para utilizar phaser

by | Mar 11, 2019

El archivo html principal es así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>

    <script src="js/juego.js"></script>
    <script src="js/principal.js"></script>

    <title>Mi Juego</title>
</head>
<body>
    <div id="bloque_juego"></div>
</body>
</html>

El archivo “principal.js”:

var juego=new Phaser.Game(800,600,Phaser.CANVAS,'bloque_juego');

juego.state.add('Juego', Juego);

El archivo “juego.js”:

Juego = {
    preload: function () {
    },
    create: function () {
    },
    update: function () {
    }
};

Código Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
    <title>Title</title>
</head>
<body>

<script>
    var juego = new Phaser.Game(600, 400, Phaser.CANVAS, 'bloque_juego'); //Crear el objeto juego con opciones CANVAS de Phaser

    var logo;
    var estadoPrincipal = {
        preload: function () {
            juego.stage.backgroundColor = "#34a853"; // Cambiar de color del fondo.
            juego.load.image('logo', 'img/petertips.png'); //Agregar imagen.
        },
        create:function () {
            logo=juego.add.image(300,200, 'logo'); //Cargar la imagen.
            logo.anchor.setTo(0.5); //Para centrar el objeto
        },
        update:function () {
            logo.rotation += 0.01; //Rotar la imagen
        }
    };

    juego.state.add('principal',estadoPrincipal);
    juego.state.start('principal');
</script>

    <div id="bloque_juego"></div>
</body>
</html>

El resultado sería:
[advanced_iframe src=”https://petertips.cl/ejemplos/phaser_ejemplo.html” width=”100%” height=”500″]