Estructura html para utilizar phaser
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″]
