HTML5 flappy bird tutorial

How to make a Flappy Bird in HTML5

About 2 months ago I set myself a challenge: build one new HTML5 game per week on lessmilk.com. So far I have 9 games available. Since I started a lot of people have asked me to write about how to make games. In this post we will see how to make a Flappy Bird in HTML5.

Flappy Bird is a nice little game with easy to understand mechanics, and I thought it would be a perfect fit for an HTML5 game tutorial. So in this tutorial we are going to make a simplified version of Flappy Bird, in only 65 lines of Javascript with the Phaser framework.

Note 1: you need to know some Javascript in order to understand this tutorial.

Note 2: If you want to learn more about the Phaser framework and how to set up your environment, you should read my short getting started tutorial first.

Set up

You should download this basic template that I made for this tutorial. In it you will find:

  • phaser.min.js, the minified Phaser framework v1.1.5.
  • index.html, where the game will be displayed.
  • main.js, a file where we will write all the code.
  • assets/, a directory with 2 images (bird.png and pipe.png).

Put all of these files on your webserver. Open the index.html file in your browser, and open the main.js file in your text editor.

In the main.js file you should see the basic structure of a Phaser project that we discussed in the previous tutorial.

We are going to fill in the preload(), create() and update() functions, and add some new functions to make the game work.

The bird

Okay, so now you are ready to code! Let’s first focus on adding a bird to the game that can be controlled with the spacebar key.

Everything is quite simple and well commented, so you should be able to understand easily the code below. For better readability, I removed the Phaser initialization and states management code that you can see above.

First we update the preload(), create() and update() functions.

And just below this, add these two new functions.

Save the main.js file with the new code, and reload the index.html file. You should have a bird jumping when you press the spacebar key.

The pipes

A Flappy Bird game without pipes is not really interesting, so let’s change that.

First, load the pipe sprite in the preload() function.

Then, create a group of pipes in the create() function. Since we are going to handle a lot of pipes in the game, it’s easier to use a group of sprites. The group will contain 20 sprites that we will be able to use as we want.

Now we need a new function to add a pipe in the game. By default, all the pipes contained in the group are dead and not displayed. So we pick a dead pipe, display it, and make sure to automatically kill it when it’s no longer visible. This way we never run out of pipes.

The previous function displays one pipe, but we need to display 6 pipes in a row with a hole somewhere in the middle. So let’s create a new function that does just that.

To actually add pipes in the game, we need to call the add_row_of_pipes() function every 1.5 seconds. We can do this by adding a timer in the create() function.

And finally add this line of code a the beginning of the restart_game() function to stop the timer when we restart the game.

Now you can save your file and test the code. This is slowly starting to look like a real game.

Scoring and collisions

The last thing we need to finish the game is adding a score and handling collisions. And this is quite easy to do.

Add this in the create() function to display a score label in the top left.

Put this in the add_row_of_pipes(), to increase the score by 1 each time new pipes are created.

And add this in the update() function to call restart_game() each time the bird collides with a pipe.

And we are done! Congratulation, you now have an HTML5 Flappy Bird clone. You can download the full source code here.

What’s next?

The game is working, but it’s a little bit boring. In the next tutorial we’ll see how we can make it better by adding sounds, animations, menus, etc. Sounds interesting to you? So read how to make a Flappy Bird in HTML5 – Part 2.

Enjoyed this article? Then please consider sharing it on Twitter. And you can also follow me: @lessmilk_.

And you can have a look at my “one HTML5 game per week” challenge on lessmilk.com

Published by

Thomas Palef

Thomas Palef is a 25 years old French Engineer. He loves building things, and he strives for simplicity in everything he do. His latest project is to build HTML5 games on his website lessmilk.com.

Share this article