Estructura html para utilizar phaser

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″]