How To Make A Flappy Bird in HTML5 - Part 1

12/5/2015
HowtomakeaFlappyBirdinHTML5Part1
I make games and write tutorials on

lessmilk.com
This is the blog where I write about my projects
12 Aug 2014
How to make a Flappy

Bird in HTML5 - Part 1
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 we are going to make a
simplified version of Flappy Bird, in only 65 lines of
http://blog.lessmilk.com/howtomakeflappybirdinhtml51/
1/12
12/5/2015
Javascript with the Phaser framework.

Click here to test the game we are going to build.
Note: this tutorial was originally for Phaser 1.1, but was
recently updated for Phaser 2.0.
Set Up
You should download this empty template that I made
for this tutorial. In it you will find:
phaser.min.js, the Phaser framework v2.0.5
index.html, where the game will be displayed
main.js, a file where we will write all our code
assets/, a directory with 2 images (bird.png and
pipe.png)
You should also download the code editor Brackets, that
will make our life easier to set up a webserver.
Empty Project
In the index.html file we add this simple code:
<!DOCTYPEhtml>
<html>
<head>
2/12
12/5/2015
<metacharset="utf8"/>
<title>FlappyBirdClone</title>
<scripttype="text/javascript"
src="phaser.min.js"></script>
<scripttype="text/javascript"src="main.js">
</script>
</head>
<body>
<p>Pressthespacebartojump</p>
<divid="gameDiv"></div>
</body>
</html>
It will load all the necessary Javascript files, and add a

"gameDiv" element where our game will be displayed.
In the main.js file we should add this, which will create
an empty Phaser project:
//InitializePhaser,andcreatea400x490pxgame
vargame=newPhaser.Game(400,490,Phaser.AUTO,
'gameDiv');
//Createour'main'statethatwillcontainthe
game
3/12
12/5/2015
varmainState={
preload:function(){
//Thisfunctionwillbeexecutedatthe
beginning
//That'swhereweloadthegame'sassets
},
create:function(){
//Thisfunctioniscalledafterthepreload
function
//Herewesetupthegame,displaysprites,
etc.
},
update:function(){
//Thisfunctioniscalled60timesper
second
//Itcontainsthegame'slogic
},
};
//Addandstartthe'main'statetostartthegame
game.state.add('main',mainState);
game.state.start('main');
We are going to fill in the preload() , create() and

update() functions, and add some new functions to
make the game work.
The Bird
4/12
12/5/2015
The Bird
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.
preload:function(){
//Changethebackgroundcolorofthegame
game.stage.backgroundColor='#71c5cf';
//Loadthebirdsprite
game.load.image('bird','assets/bird.png');
},
create:function(){
//Setthephysicssystem
game.physics.startSystem(Phaser.Physics.ARCADE);
//Displaythebirdonthescreen
this.bird=this.game.add.sprite(100,245,
'bird');
//Addgravitytothebirdtomakeitfall
5/12
12/5/2015
game.physics.arcade.enable(this.bird);
this.bird.body.gravity.y=1000;
//Callthe'jump'functionwhenthespacekeyis
hit
varspaceKey=
this.game.input.keyboard.addKey(Phaser.Keyboard.SPAC
EBAR);
spaceKey.onDown.add(this.jump,this);
},
update:function(){
//Ifthebirdisoutoftheworld(toohighor
toolow),callthe'restartGame'function
if(this.bird.inWorld==false)
this.restartGame();
},
And just below this, we add these two new functions:
//Makethebirdjump
jump:function(){
//Addaverticalvelocitytothebird
this.bird.body.velocity.y=350;
},
//Restartthegame
restartGame:function(){
//Startthe'main'state,whichrestartsthe
6/12
12/5/2015
game
game.state.start('main');
},
Testing
Now it's time to test our game. Open the index.html file
with the Brackets editor, then click on the small icon in
the top right corner:
It will launch a live preview of the game, where you

should have a bird jumping when you press the
spacebar key.
If you don't want to use Brackets, then you'll have to use
a local webserver to test the game.
The Pipes
A Flappy Bird game without pipes is not really
interesting, so let's change that.
7/12
12/5/2015
First, we load the pipe sprite in the preload() function.
game.load.image('pipe','assets/pipe.png');
Since we are going to handle a lot of pipes in the game,

it's easier to use a Phaser feature called 'group'. The
group will contain 20 pipes that we will be able to use as
we want. So we add this in the create() function.
this.pipes=game.add.group();//Createagroup
this.pipes.enableBody=true;//Addphysicstothe
group
this.pipes.createMultiple(20,'pipe');//Create20
pipes
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.
addOnePipe:function(x,y){
//Getthefirstdeadpipeofourgroup
varpipe=this.pipes.getFirstDead();
//Setthenewpositionofthepipe
pipe.reset(x,y);
8/12
12/5/2015
//Addvelocitytothepipetomakeitmoveleft
pipe.body.velocity.x=200;
//Killthepipewhenit'snolongervisible
pipe.checkWorldBounds=true;
pipe.outOfBoundsKill=true;
},
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.
addRowOfPipes:function(){
//Pickwheretheholewillbe
varhole=Math.floor(Math.random()*5)+1;
//Addthe6pipes
for(vari=0;i<8;i++)
if(i!=hole&&i!=hole+1)
this.addOnePipe(400,i*60+10);
},
To actually add pipes in the game, we need to call the

addRowOfPipes() function every 1.5 seconds. We can do
this by adding a timer in the create() function.
this.timer=game.time.events.loop(1500,
this.addRowOfPipes,this);
9/12
12/5/2015
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.
We add this in the create() function to display a score
label in the top left.
this.score=0;
this.labelScore=game.add.text(20,20,"0",{font:
"30pxArial",fill:"#ffffff"});
And we put this in the addRowOfPipes() , to increase the

score by 1 each time new pipes are created.
this.score+=1;
this.labelScore.text=this.score;
Next, we add this line in the update() function to call

restartGame() each time the bird collides with a pipe.
game.physics.arcade.overlap(this.bird,this.pipes,
this.restartGame,null,this);
10/12
12/5/2015
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 and animations. Read part 2.
For your information, I also wrote a book on how to
make a full featured game with Phaser. More
information on: DiscoverPhaser.com.
Want to get my free ebook "How To Plan, Create, and

11/12
12/5/2015
Promote Games", and be notified when one of my

new games or blog posts is out? Then join more than
5,000 people on my newsletter.
Register to the newsletter:
email
register
No spam, and unsubscribe at any time.
Thomas
Share this post
Blog's homepage | Lessmilk's homepage
GhosteryblockedcommentspoweredbyDisqus.
comments powered by Disqus
All content copyright lessmilk blog 2015 All rights reserved.

Proudly published with Ghost
12/12

How To Make A Flappy Bird in HTML5 - Part 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

How To Make A Flappy Bird in HTML5 - Part 1

Transféré par

Droits d'auteur :

Formats disponibles

12/5/2015

I make games and write tutorials on

How to make a Flappy

Flappy Bird is a nice little game with easy to understand

Javascript with the Phaser framework.

It will load all the necessary Javascript files, and add a

We are going to fill in the preload() , create() and

make the game work.

And just below this, we add these two new functions:

It will launch a live preview of the game, where you

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

Since we are going to handle a lot of pipes in the game,

Now we need a new function to add a pipe in the game.

The previous function displays one pipe, but we need to

To actually add pipes in the game, we need to call the

this by adding a timer in the create() function.

Scoring and Collisions

And we put this in the addRowOfPipes() , to increase the

Next, we add this line in the update() function to call

And we are done! Congratulation, you now have an

Want to get my free ebook "How To Plan, Create, and

Promote Games", and be notified when one of my

No spam, and unsubscribe at any time.

Share this post

Blog's homepage | Lessmilk's homepage

comments powered by Disqus

All content copyright lessmilk blog 2015 All rights reserved.

Vous aimerez peut-être aussi