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.

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.

Nota 1: lo que necesita saber algo de JavaScript con el fin de entender este tutorial .

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

Tabla de contenidos

Configurar

Usted debe descargar esta plantilla básica que hice para este tutorial. En ella se encuentran:

• phaser.min.js, la Phaser minified marco v1.1.5.
  
• index.html, donde se mostrará el juego.
  
• main.js, un archivo en el que vamos a escribir todo el código.
  
• activos /, un directorio con 2 imágenes (bird.png y pipe.png).
  
  

  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.
  El archivo

  En los main.js debería ver la estructura básica de un proyecto Phaser que discutimos en el tutorial anterior.
  // 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.
  

  El pájaro
  

  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.
  

  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.
  

  En primer lugar, actualizar la precarga (), cree () y update () funciones.
  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
  // 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.
  

  Los tubos
  

  A Bird juego Flappy sin tubos no es muy interesante, así que vamos a cambiar eso.
  

  En primer lugar, cargar el sprite tubo en la función de precarga ().
  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.
  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.
  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.
  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 ().
  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.
  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.
  

  Puntuación y colisiones
  

  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.
  

  Añadir esto en la función de crear () para mostrar una etiqueta puntuación en la parte superior izquierda.
  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 .
  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.
  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í.
  

  ¿Qué sigue?
  

  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
  

  ha gustado este artículo? Entonces, por favor considera compartirlo en Twitter. Y también se puede seguirme:. @Lessmilk _
  

  Y usted puede echar un vistazo a mi desafío “un juego HTML5 por semana” en la lessmilk.com
  

  Mensajes relacionados