D4mations.com

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:
https://www.codeexplained.org/2019/05/create-original-flappy-bird-using.html

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: https://github.com/CodeExplainedRepo/Original-Flappy-bird-JavaScript

****************************************************************************************
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
*************

Facebook: https://web.facebook.com/codeexplainedorg
Twitter: https://twitter.com/code_explained

************
HASHTAGS
************
#JavaScript #Games #JavaScriptGames #FlappyBird

Original source

d4mer

, , , , , , , , , , , , , , ,

44 responses to “Create The Original Flappy Bird Game Using JavaScript and HTML5 canvas”

  5. 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){

    switch(state.current){

    case state.getReady:

    state.current = state.game;

    break;

    case state.game:

    bird.flap();

    break;

    case state.over:

    state.current = state.getReady;

    break;

    }

    });

  12. 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

  20. 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 🙂

  21. 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: http://www.liveyourdreams.be/tests/flappybird.php

    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: http://www.liveyourdreams.be/tests/flappybird2.php

    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.

    Edit
    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

  27. 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~! 🙂

  28. 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!

  31. 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,
    if(this.y+this.h/2>=cvs.height-fg.h){

    this.y = cvs.height-fg.h-this.h/2;
    if(state.current===state.game){

    state.current=state.over;
    }
    }
    why here needs a if(state.current===state.game), 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.

    Thanks

  32. 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.

Leave a Reply