Hace aproximadamente 2 meses me impuse un reto: construir un nuevo juego de HTML5 por semana en lessmilk.com. Hasta ahora tengo 9 juegos disponibles. Desde que empecé a muchas personas me han pedido que escriba sobre cómo hacer juegos. En este post vamos a ver cómo hacer que un pájaro Flappy en HTML5. P>
p>
Flappy Bird es un juego poco agradable con fácil de entender la mecánica, y pensé que sería un ajuste perfecto para un tutorial del juego HTML5. Así que en este tutorial vamos a hacer una versión simplificada de Flappy Bird, en sólo 65 líneas de Javascript con el marco Phaser. P>
Nota 1: lo que necesita saber algo de JavaScript con el fin de entender este tutorial p>.
Nota 2:. Si desea obtener más información sobre el marco Phaser y cómo configurar el entorno, debe leer mi breve tutorial de introducción primero p>
Tabla de contenidos p>
Configurar h2>
Usted debe descargar esta plantilla básica que hice para este tutorial. En ella se encuentran: p>
- phaser.min.js, la Phaser minified marco v1.1.5. Li>
- index.html, donde se mostrará el juego. Li>
- main.js, un archivo en el que vamos a escribir todo el código. Li>
- activos /, un directorio con 2 imágenes (bird.png y pipe.png). Li>
Ul>
Ponga todos estos archivos en su servidor web. Abra el archivo index.html en el navegador y abrir el archivo main.js en su editor de texto. P>
El archivoEn los main.js debería ver la estructura básica de un proyecto Phaser que discutimos en el tutorial anterior. p>
// Inicializar Phaser, y crea un juego 400x490px gamevar = new Phaser.Game (400, 490, Phaser.AUTO, ‘game_div’); // crea un nuevo estado ‘principal’ que contendrá el main_state gamevar = {precarga: Función () {// función llamado primero a cargar todos los activos}, crear: function () {// Fuction llama después de ‘precarga’ para configurar el juego}, actualizar: function () {// función llama 60 veces por segundo} ,}; // Añadir e iniciar el estado de ‘principal’ para iniciar el gamegame.state.add ( ‘principal’, main_state); game.state.start ( ‘principal’); 12345678910111213141516171819202122 // Inicializar Phaser, y crea un 400x490px gamevargame = newPhaser.Game (400490, Phaser.AUTO, ‘game_div’); // Crea un nuevo estado ‘principal’ que contendrá la gamevarmain_state = {precarga: function () {// función llamado primero a cargar todos los activos}, crear: function () {// Fuction llama después de ‘precarga’ para configurar el juego}, actualizar: function () {// función llama 60 veces por segundo},}; // Añadir e iniciar el estado de ‘principal’ para iniciar el gamegame.state.add ( ‘principal’, main_state); game.state.start ( ‘principal’);vamos a llenar en la precarga (), cree () y update () funciones, y añadir nuevas funciones para hacer funcionar el juego. p>
El pájaro h2>
Bien, ahora ya está listo para el código! primer foco Vamos en la adición de un pájaro en el juego que puede ser controlado con la barra espaciadora. p>
Todo es bastante simple y bien documentado, por lo que debe ser capaz de entender fácilmente el código de abajo. Para facilitar la lectura, me quita el código de inicialización y gestión de estados Phaser que se puede ver arriba. P>
En primer lugar, actualizar la precarga (), cree () y update () funciones. P>
precarga: function () {// Cambiar el color de fondo del juego this.game.stage.backgroundColor = ‘# 71c5cf’; // Cargar el this.game.load.image sprite de aves ( ‘pájaro’, ‘activos / bird.png’); }, Crear: function () {// Mostrar el ave en la pantalla this.bird = this.game.add.sprite (100, 245, ‘pájaro’); // Agregar la gravedad para el pájaro para hacer caer this.bird.body.gravity.y = 1000; // Llamar a la función de ‘saltar’ cuando el spacekey es golpeado var = space_key this.game.input.keyboard.addKey (Phaser.Keyboard.SPACEBAR); space_key.onDown.add (this.jump, este); }, Actualizar: function () {// Si el ave está fuera del mundo (demasiado alto o demasiado bajo), llamar a la función ‘restart_game’ si (this.bird.inWorld == false) this.restart_game ();} , 12345678910111213141516171819202122232425preload: function () {// Cambiar el color de fondo de la gamethis.game.stage.backgroundColor = ‘# 71c5cf’; // Cargar el spritethis.game.load.image aves ( ‘pájaro’, «activos / ave. png ‘);}, crear: function () {// Mostrar el pájaro en el screenthis.bird = this.game.add.sprite (100.245,’ pájaro «); // se añade gravedad al ave para que sea fallthis. bird.body.gravity.y = 1,000; // Llamar a la función de ‘salto’ cuando el spacekey es hitvarspace_key = this.game.input.keyboard.addKey (Phaser.Keyboard.SPACEBAR); space_key.onDown.add (this.jump , this);}, actualizar: function () {// Si el ave está fuera del mundo (demasiado alto o demasiado bajo), llame a la functionif ‘restart_game’ (this.bird.inWorld == false) this.restart_game ( );.},Y justo debajo de este, añadir estas dos nuevas funciones p>
// Hacer el salto de aves salto: function () {// Añadir una velocidad vertical para el ave this.bird.body.velocity.y = -350;}, // Reiniciar el gamerestart_game: function () {// inicio del estado ‘principal’, que reinicia el juego this.game.state.start ( ‘principal’);}, 1234567891011 // Hacer el salto salto de aves: function () {// Añadir una velocidad vertical a la birdthis.bird.body .velocity.y = -350;}, // Reiniciar el gamerestart_game: function () {// Start el estado ‘principal’, que reinicia la gamethis.game.state.start ( ‘principal’);},Guarde el archivo main.js con el nuevo código, y volver a cargar el archivo index.html. Usted debe tener un salto de aves al pulsar la barra espaciadora. P>
Los tubos h2>
A Bird juego Flappy sin tubos no es muy interesante, así que vamos a cambiar eso. P>
En primer lugar, cargar el sprite tubo en la función de precarga (). P>
this.game.load.image ( ‘pipe’, ‘activos / pipe.png’); 1this.game.load.image ( ‘pipe’, ‘activos / pipe.png’);A continuación, crear un grupo de de tuberías en la función de crear (). Ya que vamos a manejar una gran cantidad de tubos en el juego, es más fácil de usar un grupo de sprites. El grupo contiene 20 sprites que vamos a ser capaces de utilizar como queremos. P>
this.pipes = game.add.group (); this.pipes.createMultiple (20, ‘tubería’); 12this.pipes = game.add.group (); this.pipes.createMultiple (20, ‘tubería’);Ahora necesitamos una nueva función para añadir una tubería en el juego. Por defecto, todos los tubos contenidos en el grupo están muertos y no se muestra. Así que elegimos un tubo de muertos, lo mostramos, y nos aseguramos de matar automáticamente cuando ya no es visible. De esta manera nunca se quede sin tubos. P>
add_one_pipe: function (x, y) {// Obtener el primer tubo muertos de nuestra tubería grupo var = this.pipes.getFirstDead (); // establecer la nueva posición de la pipe.reset tubería (x, y); // Agregar la velocidad a la tubería para que sea mover a la izquierda pipe.body.velocity.x = -200; // muertes del tubo cuando ya no es visible pipe.outOfBoundsKill = true;}, 12345678910111213add_one_pipe: function (x, y) {// Obtener el primer tubo muertos de nuestra groupvarpipe = this.pipes.getFirstDead (); // establecer las nueva posición de la pipepipe.reset (x, y); // Añadir la velocidad a la tubería para hacer que se mueva leftpipe.body.velocity.x = -200; // Kill la tubería cuando ya no es visible pipe.outOfBoundsKill = true ;},las pantallas de función anteriores un tubo, pero necesitamos para mostrar 6 tubos en una fila con un algún lugar agujero en el medio. Así que vamos a crear una nueva función que hace precisamente eso. P>
add_row_of_pipes: función) {agujero var (= Math.floor (Math.random () * 5) 1; for (var i = 0; i & lt; 8; i ++) si (i = agujero & amp;! & amp;! i = 1 agujero) this.add_one_pipe (400, i * 60 + 10); }, 1234567add_row_of_pipes: function () {varhole = Math.floor (Math.random () * 5) 1; para (vari = 0; i & lt; 8; i ++) si (i = agujero & amp; & amp; i = agujero! 1) this.add_one_pipe (400, I * 60 + 10);},para añadir tuberías realidad en el juego, tenemos que llamar a los add_row_of_pipes () de cada 1,5 segundos. Podemos hacer esto mediante la adición de un temporizador en la función de crear (). P>
this.timer = this.game.time.events.loop (1500, this.add_row_of_pipes, este); 1this.timer = this.game.time.events.loop (1500, this.add_row_of_pipes, this);Y por último añadir esta línea de código de un comienzo de la función restart_game () para detener el temporizador cuando reiniciamos el juego. p>
this.game.time.events.remove (this.timer); 1this.game.time.events.remove (this.timer);Ahora usted puede guardar su archivo y probar el código. Esto está empezando lentamente a parecerse a un juego real. P>
Puntuación y colisiones h2>
La última cosa que necesitamos para terminar el juego es la adición de una puntuación y gastos de colisiones. Y esto es bastante fácil de hacer. P>
Añadir esto en la función de crear () para mostrar una etiqueta puntuación en la parte superior izquierda. P>
this.score = 0; estilo var = {font: «30px Arial», relleno: «#ffffff»}; this.label_score = this.game.add.text (20, 20, «0», el estilo); 123this.score = 0; varstyle = {font: «30px Arial», relleno: «# ffffff»}; this.label_score = this.game.add.text (20,20, «0», el estilo);poner esto en el add_row_of_pipes (), para aumentar la puntuación en 1 cada vez nuevos tubos se crean p>.
this.score + = 1; this.label_score.content = this.score; 12this.score + = 1; this.label_score.content = this.score;y añadir en la función de actualización () para restart_game llamada () cada vez que las aves colisiona con una tubería. p>
this.game.physics.overlap (this.bird, this.pipes, this.restart_game, null, this); 1this.game.physics.overlap (this.bird, this.pipes, this.restart_game, null, this);Y hemos terminado! Enhorabuena, ahora tiene un clon HTML5 Bird Flappy. Puede descargar el código fuente completo aquí. P>
¿Qué sigue? H2>
El juego está funcionando, pero es un poco aburrido poco. En el siguiente tutorial vamos a ver cómo podemos hacerlo mejor mediante la adición de sonidos, animaciones, menús, etc. suena interesante para usted? Así que lea cómo hacer que un pájaro Flappy en HTML5 -. Parte 2 p>
ha gustado este artículo? Entonces, por favor considera compartirlo en Twitter. Y también se puede seguirme:. @Lessmilk _ p>
Y usted puede echar un vistazo a mi desafío “un juego HTML5 por semana” en la lessmilk.com p>
Mensajes relacionados h3>