Estructura html para utilizar phaser

by | Mar 11, 2019

El archivo html principal es así:
[html]
<!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>[/html]

El archivo “principal.js”:
[js]
var juego=new Phaser.Game(800,600,Phaser.CANVAS,’bloque_juego’);

juego.state.add(‘Juego’, Juego);
[/js]

El archivo “juego.js”:
[js]
Juego = {
preload: function () {
},
create: function () {
},
update: function () {
}
};
[/js]

Código Ejemplo

[html]
<!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>
[/html]

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