Facebook Twitter RSS Reset

(Hacelo Vos Mismo)Como hacer el Flappy Bird en HTML5.Parte 1

(Hacelo Vos Mismo)Como hacer el Flappy Bird en HTML5.Parte 1



Flappy Birs es un buen juego con mecánicas fáciles de entender, y creo que es perfecto para crear un Tutorial de juegos HTML5. Por eso vamos a hacer una version simplificada del Flappy Birds en 75 lineas de Javascript con el Framework Phaser.

Clickea acá para que veas el tipo de juego que vamos a hacer.


Nota: el tutorial era en un principio para el Phaser 1.1, ahora esta actualizado a la version Phaser 2.0.

(Hacelo Vos Mismo)Como hacer el Flappy Bird en HTML5.Parte 1

  • Set UP

Para comenzar el trabajo vamos a bajar el siguiente Template vació en el que encontraras:

  • phaser.min.js, el Phaser framework v2.0.5



  • index.html, Donde el juego sera visualizado



  • main.js, un archivo donde escribiremos todo nuestro código



  • assets/, un directorio con dos imagenes (bird.png and pipe.png)



Tambien podemos bajar el editor de códigos Brackets que nos va a solucionar la vida fácilmente para subir el Webserver.

java

  • Proyecto vacio



En el archivo index.html colocaremos este simple código:







Flappy Bird Clone





Press the spacebar to jump





Esto cargara todos los archivos de javascript necesarios, y agregara un elemento gameDiv que hará que nuestro juego pueda ser visualizado.

En el archivo main.js necesitaremos agregar lo siguiente, con esto crearemos un Proyecto Phaser vació.

// Initialize Phaser, and create a 400x490px game

var game = new Phaser.Game(400, 490, Phaser.AUTO, ‘gameDiv’);

// Create our ‘main’ state that will contain the game

var mainState = {

preload: function() {

// This function will be executed at the beginning

// That’s where we load the game’s assets

},

create: function() {

// This function is called after the preload function

// Here we set up the game, display sprites, etc.

},

update: function() {

// This function is called 60 times per second

// It contains the game’s logic

},

};

// Add and start the ‘main’ state to start the game

game.state.add(‘main’, mainState);

game.state.start(‘main’);

Con esto vamos a poner las funciones preload(), create() y update() y agregaremos algunas nuevas funciones para que el juego no crashee.

lenguaje

  • El Pajarito

Vamos a poner en foco y a agregar el pájaro al juego para que pueda ser controlado con la tecla espacio.

Todo esto es muy simple y todo esta bien explicado para que cualquiera de ustedes entiendan fácilmente que código que sigue.

Para mejor redacción removí la iniciación Phaser y el código de administración de estados que se puede ver arriba

Primero actualizaremos las funciones del preload(), create() y update(). en el Phaser que creamos en el paso anterior..

preload: function() {

// Change the background color of the game

game.stage.backgroundColor = ‘#71c5cf’;

// Load the bird sprite

game.load.image(‘bird’, ‘assets/bird.png’);

},

create: function() {

// Set the physics system

game.physics.startSystem(Phaser.Physics.ARCADE);

// Display the bird on the screen

this.bird = this.game.add.sprite(100, 245, ‘bird’);

// Add gravity to the bird to make it fall

game.physics.arcade.enable(this.bird);

this.bird.body.gravity.y = 1000;

// Call the ‘jump’ function when the spacekey is hit

var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

spaceKey.onDown.add(this.jump, this);

},

update: function() {

// If the bird is out of the world (too high or too low), call the ‘restartGame’ function

if (this.bird.inWorld == false)

this.restartGame();

},

Y justo debajo de esto vamos a agregar las siguientes dos funciones:

// Make the bird jump

jump: function() {

// Add a vertical velocity to the bird

this.bird.body.velocity.y = -350;

},

// Restart the game

restartGame: function() {

// Start the ‘main’ state, which restarts the game

game.state.start(‘main’);

},

suerte

  • Testeando

Ahora es el momento de testear nuestro juego. Abrimos el archivo index.htlm con el editor Brackets, después cliqueamos en icono pequeño de la esquina superior derecha.

(Hacelo Vos Mismo)Como hacer el Flappy Bird en HTML5.Parte 1

Esto sera el launcher de una presentación en vivo del juego, donde encontraremos un pajarito que salta cuando presionamos la tecla espacio.

Si no quieren usar el editor Brackets entonces pueden buscar algún Webserver local para testear el jueguito.

(Hacelo Vos Mismo)Como hacer el Flappy Bird en HTML5.Parte 1

  • Tubos

El juego de Flappy Bird sin las tuberías no seria realmente interesante, entonces vamos a cambiar esto.

Primero vamos a colocar el sprite del tubo en la función preload()

game.load.image(‘pipe’, ‘assets/pipe.png’);

Necesitamos tener un montón de tuberías en el juego, para eso vamos a utilizar una función muy simple del Phaser que que se llama group.

El group va a contener 20 tubos que vamos a poder utilizar como nosotros queramos.

Entonces vamos a agregar esto en la función: create().

this.pipes = game.add.group(); // (Esto crea el grupo)

this.pipes.enableBody = true; // (Esto agrega física al grupo)

this.pipes.createMultiple(20, ‘pipe’); // (Crea 20 tubos)

Ahora necesitamos una nueva función que agregue las tuberías al juego. Por default todos los tubos del grupo esta muertos y no se muestran en pantalla. Entonces tomaremos un tubo muerto, lo llevaremos al display y nos aseguraremos que este automáticamente muerto cuando ya no este visible. de esta manera nunca tendremos que escapar de los tubos que van quedando detrás.

addOnePipe: function(x, y) {

// Get the first dead pipe of our group

var pipe = this.pipes.getFirstDead();

// Set the new position of the pipe

pipe.reset(x, y);

// Add velocity to the pipe to make it move left

pipe.body.velocity.x = -200;

// Kill the pipe when it’s no longer visible

pipe.checkWorldBounds = true;

pipe.outOfBoundsKill = true;

},

Esta función previa muestra un solo tubo, pero necesitamos mostrar 6 tubos juntos con un agujero en algún lugar del medio.

Entonces vamos a crear una nueva función que haga esto.

addRowOfPipes: function() {

// Pick where the hole will be

var hole = Math.floor(Math.random() * 5) + 1;

// Add the 6 pipes

for (var i = 0; i < 8; i++)
if (i != hole && i != hole + 1)

this.addOnePipe(400, i * 60 + 10);

},

Para que se agreguen tubos continuamente en el juego debemos llamar a la función addRowOfPipes() cada 1.5 segundos. Podemos hacer esto agregando un Timer en la función create().

this.timer = game.time.events.loop(1500, this.addRowOfPipes, this);

Ahora podemos guardar el archivo y volver a testear el código en Brackets. Esto es un comienzo lento de lo que realmente es el juego.

java

  • Puntuacion y Colisiones

Lo ultimo que debemos hacer antes de terminar el juego es agregar el score y manejar las colisiones. Y esto es tambien facil de hacer.

Agregaremos en la función create() un score que sera visualizado en la esquina izquierda.

this.score = 0;

this.labelScore = game.add.text(20, 20, “0”, { font: “30px Arial”,

fill: “#ffffff” });


Y vamos a poner esto en el addRowOfPipes() para incrementar el score en 1 cada vez que pasemos a través de nuevos tubos que son creados.

this.score += 1;

this.labelScore.text = this.score;

A continuación agregaremos esta linea en la función update() para hacer el restartGame() cada vez que el pajarito choque con alguna tubería.

game.physics.arcade.overlap(this.bird, this.pipes, this.restartGame,

null, this);


Y entonces lo hemos terminado. Felicitaciones tenes en tus manos un clon de Juego Flappy Bird en HTML5 en tus manos.

Tambien si sos manco podes descargar el código completo desde acá.

lenguaje

  • Como seguimos?

El juego esta andando pero es un poquito aburrido, en el proximo tutorial les enseño como poner sonidos y otras animaciones.

Te sirvio? Hace click acá abajo para seguirme y descargate las mejores imágenes dia a dia

(Hacelo Vos Mismo)Como hacer el Flappy Bird en HTML5.Parte 1

Atención!!!! No te pierdas los otros post con Imagenes y Wallpapers:

Star Wars Wallpapers y Excelentes Imagenes

Fallout Wallpapers y Excelentes Imagenes

Breaking Bad Wallpapers y Excelentes Imagenes

Universo Dc Wallpapers y Excelentes Imagenes

Universo Marvel Wallpapers y Excelentes Imagenes

Joker no more

No comments yet.

Leave a Comment