Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70
Create The Original Flappy Bird Game Using JavaScript and HTML5 canvas | D4mations.com
  • Saturday , 24 October 2020

Create The Original Flappy Bird Game Using JavaScript and HTML5 canvas

Code Canyon



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

3d Ocean

Related Posts

44 Comments

  1. MultiBlackPredator
    April 26, 2020 at 08:11

    How can I add a new state that shows the top 10 scores locally when clicking a "score" button

  2. Sgt Jimmy Wabs
    April 26, 2020 at 08:11

    How do you change the speed at which the pipes come towards the user without changing the x gap between them?

  3. Wanderson Gomes
    April 26, 2020 at 08:11

    Brasil aqui! Muito obrigado. Encontrei seu canal recentemente e ja me inscrevi. Obrigado por compartilhar seu conhecimento.

  4. Florian Felix
    April 26, 2020 at 08:11

    amazing video! I'm only a beginner but you helped me understand so much in so little time!

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

    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;

    }

    });

  6. G-Nightcore
    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

  7. Khlood 323
    April 26, 2020 at 08:11

    How i can use page up and down

  8. Grzegorz Filmak
    April 26, 2020 at 08:11

    Great tutorial, thank you 😀

  9. Łukasz Kobylański
    April 26, 2020 at 08:11

    Awesome video! The coolest part is showing what our code will do and where before we jump into coding <3 So good learning stuff!

  10. ᴛᴇᴄʜɴᴏ ĸɴιɢнт
    April 26, 2020 at 08:11

    Hey, there is a bug in the code, "One can go over the canvas and still the score counts on and the bird doesn't die" , how to solve this problem ?

  11. Nhật Trần
    April 26, 2020 at 08:11

    great tutorial !!!

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

  13. Loïs Hannah
    April 26, 2020 at 08:11

    does anyone know how to change the gap between the pipes, because it isn't working

  14. xteclisx27
    April 26, 2020 at 08:11

    How can I get the x and y coords of the png file?

  15. Cyndevia
    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 🙂

  16. Steve's teacher
    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;

  17. Javier Zúñiga
    April 26, 2020 at 08:11

    You definitely deserve a like and my subscription, thank you…

  18. micheal jackson
    April 26, 2020 at 08:11

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

  19. damn it nab it
    April 26, 2020 at 08:11

    "boild dis game"

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

  21. Jeroen Eeman
    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: 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

  22. nam le
    April 26, 2020 at 08:11

    how to responsive on mobile?

  23. BLSANJI GAMING
    April 26, 2020 at 08:11

    Which web browser do you use to check the status of the background and image loads or not?

  24. Abdol Ghamdi
    April 26, 2020 at 08:11

    great work !
    i enjoyed it very much !
    but you missed adding the medals or the trophy but its ok ^^

  25. Sanya Kataria
    April 26, 2020 at 08:11

    can we use spacebar instead of mouse click in addeventlistener function ?

  26. Nguyễn Khánh
    April 26, 2020 at 08:11

    thank you so much <3 <3 <3

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

  28. Dũng Ngô Tấn
    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!

  29. Paulo Reizinho
    April 26, 2020 at 08:11

    Thanks for this man, really well explained. Keep doing it.

  30. Ben Melluish
    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.

  31. MrCottonlion
    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,
    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. Piyush Kaushik
    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.

  33. bishal ghimire
    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..??

  34. opm Finley
    April 26, 2020 at 08:11

    dab

  35. sayan dutta
    April 26, 2020 at 08:11

    AWESOME MAN 👍👍👍

  36. Minh Le
    April 26, 2020 at 08:11

    Thank you so much for your channel! Love your explanation!

  37. yuksel bey
    April 26, 2020 at 08:11

    Thank you. You are explaining very well. I agree. Please continue your lessons.

  38. kaushik srivatsan
    April 26, 2020 at 08:11

    wow!! Awesome explanation and tutorial!! but what about the medals images! Anyway please continue your work!

  39. Ahammed Imtiaze
    April 26, 2020 at 08:11

    Just Woww. Appreciate for your beautiful Work. Thank you man. You are the boss !!!

  40. Carlos&Kat wuzzita
    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

  41. EM
    April 26, 2020 at 08:11

    thank you bro, you are appreciated .

  42. Premnath D
    April 26, 2020 at 08:11

    Wow.. Super helpful. Create more beginner friendly JS projects

  43. Егор Мадьяров
    April 26, 2020 at 08:11

    It’s awesome!

  44. sam
    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 Comment

You must be logged in to post a comment.