Create The Original Flappy Bird Game Using JavaScript and HTML5 canvas

To play and see the game we’re going to create, please head over my Website:

Flappy Bird was a side-scrolling mobile game featuring 2D retro style graphics. The objective was to direct a flying bird, named “Faby”, who moves continuously to the right, between sets of Mario-like pipes. If the player touches the pipes, they lose. Faby briefly flaps upward each time that the player taps the screen; if the screen is not tapped, Faby falls because of gravity; each pair of pipes that he navigates between earns the player a single point, with medals awarded for the score at the end of the game. No medal is awarded to scores less than ten. A bronze medal is given to scores between ten and twenty. In order to receive the silver medal, the player must reach 20 points. The gold medal is given to those who score higher than thirty points. Players who achieve a score of forty or higher receive a platinum medal. Android devices enabled the access of world leaderboards, through Google Play.

There is no variation or evolution in gameplay throughout the game, as the pipes always have the same gap between them and there is no end to the running track, having only the flap and ding sounds and the rising score as rewards.

And today you’re going to create the Flappy Bird game using JavaScript and HTML (or HTML5 canvas).

We’re not using any framework to build the game, Just Vanilla JavaScript.

This is a beginner’s guide on how to create the flappy bird game using JavaScript and HTML.

Download the starter template from gitHub, so you can follow the tutorial step by step :

The Game link:

Here you can find some other tutorials, that you might like to see

Ping Pong Game Using JavaScript

Create a Multiple Choice Quiz Using JavaScript

Tetris Game Using JavaScript

Snake Game Using JavaScript

Flappy Bird Game Using JavaScript

Social Media


#JavaScript #Games #JavaScriptGames #FlappyBird

Original source

44 thoughts on “Create The Original Flappy Bird Game Using JavaScript and HTML5 canvas

  • April 26, 2020 at 08:11

    Didn't understand, how this switch from 0 to 2 by clicking 🙁

    const state = {

    current : 0,

    getReady : 0,

    game : 1,

    over : 2


    // Control the game

    cvs.addEventListener("click", function(evt){


    case state.getReady:

    state.current =;





    case state.over:

    state.current = state.getReady;




  • April 26, 2020 at 08:11

    God I can't keep up with your typing speed or is the video really sped up?thank you anyway for making me spend my time during quarantine

  • April 26, 2020 at 08:11

    1:22 HTML
    2:08 To follow the tutorial step by step
    4:51 Draw to canvas
    8:03 Draw image to canvas
    12:29 Fit an image
    13:45 Draw the Bird
    16:46 !!!Coding!!!
    23:49 Game State
    27:13 !!!Coding!!!
    29:48 Animate the Bird
    36:18 !!!Coding!!!
    37:42 Gravity and flap
    42:26 !!!Coding!!!
    44:57 Bird Rotation
    51:07 Bird Update()
    53:12 Move foreground
    56:22 !!!Coding!!!
    58:59 Create the Pipes
    1:03:05 Draw the Pipes
    1:05:05 Move the Pipes
    1:06:54 !!!Coding!!!
    1:10:59 Collision Detection
    1:14:18 !!!Coding!!!
    1:17:29 Score
    1:22:06 !!!Coding!!!
    1:25:30 On Click Event
    1:29:11 !!!Coding!!!
    1:32:25 Adding the Sounds

  • April 26, 2020 at 08:11

    This game is impossible to play at 144 hz, I swapped over to 60 hz and was playable. So this has given me a challenge to fix this 🙂

  • April 26, 2020 at 08:11

    If your bird instantly spawns to the bottom of the screen on the getReady state (after you lose the game) just add this in your "if(state.current == state.getReady)", inside the bird object: this.speed = 0;

  • April 26, 2020 at 08:11

    Hi. its a great video. i just want to know how to store this.value and in a .csv file everytime the game ends. also. can we set a limit as to how long you can play the game ??

  • April 26, 2020 at 08:11

    My code didn't work after i had finished code the score section in 1:22:08 , which turn my canvas to a blank white screen. Then, i figured out "local storage" code is the problem.. After deleting local storage command in the code, the game screen recover and everythings goes well. I Also had checked the local storage syntax, but everythings just lookin good. Any help would be appreciate, thankyou 🙂

  • April 26, 2020 at 08:11

    Great tutorial, thank you very much for making it

    I did however change the code to new javascript without the semi-colons and with arrow-functions and used my own naming for functions and variables

    Works like a charm

    You can find the result and check the source-code here:

    For the collision detection, if you say "bird.y – bird.radius > p.y" you can fly over the top pipe and for the bottom pipe the same thing if there were no floor, if you say "bird.y + bird.radius > bottomPipeYPos + this.h", you would be able to fly under the bottom pipe (1:12:54 in the video and 1:13:43 in the video and again at 1:14:00 in the video and at 1:15:29 in the video)

    This you can see on this page where you can fly over the top pipes if you click fast enough:

    These two conditions should be left out so the if statement should look like this:

    if (bird.x + bird.radius > p.x && bird.x – bird.radius > p.x + this.w && bird.y – bird.radius < p.y – this.h) {

    if (bird.x + bird.radius > p.x && bird.x – bird.radius > p.x + this.w && bird.y + bird.radius > bottomPipeYPos) {


    Now you cannot fly over the top pipe or under the bottom pipe if there were no floor.

    If you want it in one if statement, then it should look like this:

    if (bird.x + bird.radius > p.x && bird.x – bird.radius > p.x + this.w && bird.y – bird.radius < p.y – this.h || bird.y + bird.radius > bottomPipeYPos) {


    There is also the medal you get after you die, gold, silver, bronze or none.

    In the meantime, I have added and tweaked a few things like displaying the highscore in the document title and at the bottom right of the canvas, widened the gap with 5 pixels and made the maximum top Y for the pipes so that the minimum amount of pixels that the pipes are visible are the same, so I centered the 150 pixels playing area
    You can study the source code to find out how I did those things

  • April 26, 2020 at 08:11

    First of all, Thank you so much. your video is awesome !
    I have a question.
    at 33:10. frames = 0, 1, 2… ( you explained that change frames But )

    Sir, your code.
    update: function(){
    this.period = state.current === state.getReady ? 10 : 5;

    this.frame += frames % this.period === 0 ? 1 : 0;

    this.frame = this.frame % this.animation.length;

    I understood like this.

    getReady :
    this.frame += 0%10 === 0 ? 1:0; -> this.frame += 1
    this.frame = 1%4 (animation.length : 1)

    game :
    this.frame += 0%5 === 0 ? 1:0 -> this.frame += 1
    this.frame = 2%4

    ( again and again 3%4, 4%4 =0 )

    My question is .. why did you explain about changed 'frames' ?
    because always frames = 0?

    Is this right?

    Anyway Thank you for your video . Have a good day.
    please answer if you have a time. Thank you~! 🙂

  • April 26, 2020 at 08:11

    Thank you for your tutorial.
    Besides, could you please tell me how you can find the coordinates of each small image from the source one and exact location in the canvas so that they can fit nicely?
    Thank you!

  • April 26, 2020 at 08:11

    This video is brilliant. I especially love that you have the logic sections that walk through your implementation process before you actually code it.

  • April 26, 2020 at 08:11

    Thank you for this detailed explanation.

    I have two questions:

    1. How to play the DIE only once, cause I found during the state.over, the DIE sound plays without a stop, how to play this sound only once?

    2. under the bird.update,

    this.y = cvs.height-fg.h-this.h/2;

    why here needs a if(, it seems I could put state.current=state.over directly in the context, and it works fine. Cause I think when the bird is on the ground, then it means it's already over.


  • April 26, 2020 at 08:11

    Hello Sir. I am a big fan of your tutorials. You explain slowly and with examples, which make your videos instantly likeable. Not to mention, the non-native english speakers like us, it is a great resource. So, thanks for this incredible work towards the community.
    I have just one question regarding this game, that how do we make it for full screen withuout pixelating the images.
    I tried to use targetWidth(tW) for my foreground, but it completely broke my app when I tried to move it by dx. Any suggestion would be welcome. Have a great day.

  • April 26, 2020 at 08:11

    hello sir .. thanks for your beautiful tutorials..
    and can you give me the idea that how can we move the fore ground in your previous flappy bird tutorial..??

  • April 26, 2020 at 08:11

    I spend four hours learning begging level stuff- I learned to incorporate css into html. but man this stuff looks intimidating but I'll get to that level eventually. thanks

  • April 26, 2020 at 08:11

    didn't you already make a flappy bird tut? is this supposed to be a super-fancy one?

Leave a Reply