Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Tutorial: How to make a Flappy Bird in HTML5 with Phaser


lessmilk
 Share

Recommended Posts

Hello,

 

I just wrote a Phaser tutorial on how to make a simple Flappy Bird clone in 65 lines of Javascript.

 

You can read the tutorial here: blog.lessmilk.com

Edit: And here's the part 2 of the tutorial.

 

post-6087-0-89981700-1392914020.png

 

If you are new to Phaser, this can be a good way to discover how Phaser works.

And if you already know well Phaser, I'd love to hear your feedback!

 

Thanks :-)

Link to comment
Share on other sites

Thanks for the tutorial, just what i was looking for, a nice and simple implementation.

 

Question:

 

How can you make it so that score only increments when the player passes through the pipe, and not when the pipe appears on the screen?

 

At the moment the score increments before player has reached the pipe.

Link to comment
Share on other sites

Thanks a lot for your feedback! :-)

 

 

I am a beginner in game development, your games inspired me to start using Phaser  :)

Thank you for the tutorial, very helpful for a beginner!

 

Wow, that's awesome! Welcome to the wold of Phaser developers then ;-)

 

 

Thanks for the tutorial, just what i was looking for, a nice and simple implementation.

 

Question:

 

How can you make it so that score only increments when the player passes through the pipe, and not when the pipe appears on the screen?

 

At the moment the score increments before player has reached the pipe.

 

I made it that way to keep the code as simple as possible. There are lots of way to do this, for examples:

- Add an invisible sprite where the hole is. When the bird hit this sprite, increase the score by one and kill the sprite.

- Or check in the update function if a pipe is behind the bird. When that happens, increase the score by one and set a flag to not count the same pipe twice.

 

 

adding row of pipes based on time is a bad idea because on low end devices the rows are sticked together making the game unplayable.

 

You are right. However:

- On low end devices playing a reflex game is never going to be a great experience anyway

- And "every 1.5 seconds" is easy to understand and perfect for a beginner tutorial 

Link to comment
Share on other sites

I made it that way to keep the code as simple as possible. There are lots of way to do this, for examples:

- Add an invisible sprite where the hole is. When the bird hit this sprite, increase the score by one and kill the sprite.

- Or check in the update function if a pipe is behind the bird. When that happens, increase the score by one and set a flag to not count the same pipe twice.

 

Makes perfect sense, im happy the code is simple, im new to phaser and this tutorial is perfect for me to learn.

 

Thanks for your answers, i may have a go at adding an invisible sprite, seems a logical approach.

 

Keep up the great work.

Link to comment
Share on other sites

Hi there,

First of all thank you for the tutorial. Now to the problem i encountered when fooling around with it.
I wanted to add a tileSprite as background but its not displayed and i have no idea what possible i could have done wrong, here are the lines i added.
 

preload: function() { 		this.game.load.image('background', 'assets/background.png');          ...        ...    },create: function() {         this.background = this.game.add.tileSprite(0, 0, 400, 480, 'background');        ...        ...    },
Link to comment
Share on other sites

 

Hi there,

First of all thank you for the tutorial. Now to the problem i encountered when fooling around with it.

I wanted to add a tileSprite as background but its not displayed and i have no idea what possible i could have done wrong, here are the lines i added.

 

preload: function() { 		this.game.load.image('background', 'assets/background.png');          ...        ...    },create: function() {         this.background = this.game.add.tileSprite(0, 0, 400, 480, 'background');        ...        ...    },

 

The code you posted seems fine. Are you getting any error messages in the console?

Link to comment
Share on other sites

Really nice tutorial .. Very easy to understand. I'd love to see more of those when 2.0 is out...

May I ask javascript newbee question..

I've seen several games implemented in a way that looks a little bit easier to understand for beginners.. Also examples, other phaser tutorials (the one where you collect stars with the phaser dude) are done this way..

What's with the whole .prototype use that leads to this this. Overload? Could you elaborate or just point me to a page where I can learn more about it? Thx

Link to comment
Share on other sites

Really nice tutorial .. Very easy to understand. I'd love to see more of those when 2.0 is out...

May I ask javascript newbee question..

I've seen several games implemented in a way that looks a little bit easier to understand for beginners.. Also examples, other phaser tutorials (the one where you collect stars with the phaser dude) are done this way..

What's with the whole .prototype use that leads to this this. Overload? Could you elaborate or just point me to a page where I can learn more about it? Thx

 

Good question! 

The ".prototype" and "game_state" are useful when managing multiple states in a game, like a menu, a play scene, a credit, etc. 

So right now you don't need them for the simple flappy bird clone. But since I'm planning to actually add a loading scene and a menu in the next tutorial, I decided to include this code from the beginning to make the transition easier.

So wait for the next tutorial to better understand what it is for and how to use it! :-)

Link to comment
Share on other sites

@lessmilk_   thank you very much for the answer..    i am playing around with phaser for 2 weeks now trying to learn everything necessary to make a nice game (so i'm very happy about new and good tutorials like yours because i can learn a lot from seeing other ways to accomplish things with phaser.. =)

so i already came across states.. but i implementet states completely without .prototype  .. you can look at the source on my "playground"  http://test.xapient.net/phaser/    therefore i still don't understand why there are 2 ways to do this and what is the advantage of your approach.. it seems much more sophisticated  so i figure it has an advantage..  maybe for loading the states from different js files?

 

(i'm still seeking for a method to make those damn buttons touch senisitive ^^)

Link to comment
Share on other sites

@lessmilk_   thank you very much for the answer..    i am playing around with phaser for 2 weeks now trying to learn everything necessary to make a nice game (so i'm very happy about new and good tutorials like yours because i can learn a lot from seeing other ways to accomplish things with phaser.. =)

so i already came across states.. but i implementet states completely without .prototype  .. you can look at the source on my "playground"  http://test.xapient.net/phaser/    therefore i still don't understand why there are 2 ways to do this and what is the advantage of your approach.. it seems much more sophisticated  so i figure it has an advantage..  maybe for loading the states from different js files?

 

(i'm still seeking for a method to make those damn buttons touch senisitive ^^)

 

I just made some tests, and you are right, my code could have been simpler. I'm updating my tutorials right now to remove the .prototype. Thanks! :-)

Link to comment
Share on other sites

@lessmilk hmmm.. You're welcome..i guess.. Now i'm a little bit confused ;)

@slash... I'm not sure i understood you correctly but if you are searchin for a way to autoresize your game to use all available space or even go full screen on mobile devices only.. Phaser does that for you..I could post an example if you like..

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...