• Monday , 1 June 2020

Flappy Bird Game Using JavaScript

Code Canyon



We will create the Flappy Bird game using JavaScript only, means no framework is been used during the tutorial, the tutorial has two parts:

1st part : we understand everything about the game, we discuss things before we code.
2nd part : Type in the Code.

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

The Game link : https://github.com/CodeExplainedRepo/FlappyBird-JavaScript

****************************************************
Other Tutorials for games created using JavaScript :
****************************************************

Snake : https://www.youtube.com/watch?v=9TcU2C1AACw

tetris : https://www.youtube.com/watch?v=HEsAr2Yt2do

*************
Social Media
*************

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

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

Original source

3d Ocean

Related Posts

30 Comments

  1. Vaibhavkumar Patel
    December 16, 2018 at 12:43

    Can you make one gun shooting game in javascript.
    Please make this video as soon as possible.

  2. SphXCyprex
    December 16, 2018 at 12:43

    Where do I find the images?

  3. Pablo Milkybar
    December 16, 2018 at 12:43

    The way this guy says "width" makes me laugh.

  4. 徐宏杰
    December 16, 2018 at 12:43

    hello,i think the logic of game over part is not strict; when the bird bump into upper portion pipeNorth,game is not over at once

  5. hicks003
    December 16, 2018 at 12:43

    this is great, how can you do to move faster every 10 pipes for exapmle?

  6. Billy The kid
    December 16, 2018 at 12:43

    25:15

  7. Billy The kid
    December 16, 2018 at 12:43

    15:47

  8. Iam1297
    December 16, 2018 at 12:43

    Great tutorial !! 🙂

  9. Alfonso Leonheart
    December 16, 2018 at 12:43

    good tutorial ,thanks…my problem is about the locate.reload() code…which don't work well if your not running it on a browser…

  10. eTeTi GaNa
    December 16, 2018 at 12:43

    Great explanation as always, is it possible to save highscore using just JavaScript ?

  11. Geek's Hood
    December 16, 2018 at 12:43

    hello, I have a question about "Constant" which is "pipeNorth.height + gap" in my version constant doesn't seem to work like this instead position of pipeNorth (pY) + gap is working really fine so should I use this approach or if not or I am wrong then please help me……..

  12. OuchaneCC
    December 16, 2018 at 12:43

    i love you bro

  13. Craig Reustle
    December 16, 2018 at 12:43

    Great video. I'm going to tweak the code to see if i can improve on it.

  14. Ryuxx
    December 16, 2018 at 12:43

    Great video man!
    I got a question, in @23:35 I get so lost on that Detect collision code lol incredibly complicated, mind If I could get an explanation :)?

  15. Yun Werlang Brandalizze
    December 16, 2018 at 12:43

    Hey! Thank you for this video! It helped me a lot, since I'm trying to program my first game.

  16. Ever Sununi
    December 16, 2018 at 12:43

    Thanks for this I didn't know about requestAnimationFrame so far , but it makes making games like this a little bit easier, first of all, animation is much more smother. I have done all you described and make some changes to look it like a real simple game 😉 –> https://lighttest.github.io/gra-flappy-bird-prosty-klon-slynnej-gierki/

  17. Hamza Anwar
    December 16, 2018 at 12:43

    u are just brilliant!!! I never thought about mKing a game on web 🙂 thnks very much 🙂

  18. hpno
    December 16, 2018 at 12:43

    Thank you for this tutorial! You're great at explaining the logic and th ought process behind the code. Keep it up!

  19. Has Cena
    December 16, 2018 at 12:43

    dude your instructions and way of explaining code makes things so much clearer, you should make some kind of udemy course. I would be buying all your stuff, you are great at teaching!

  20. Артём Морозов
    December 16, 2018 at 12:43

    very good, thanks for your work. One thing, could you, please, add license file to your repo?

  21. famous under the raps replica
    December 16, 2018 at 12:43

    It's showing error

  22. Zoran Krstic
    December 16, 2018 at 12:43

    Never use for, or any other loops inside RAF or Intervals… Better use pipe.forEach, works better in this case IMO

  23. dog.
    December 16, 2018 at 12:43

    what engine is this?

  24. comics teller
    December 16, 2018 at 12:43

    unable to load image it says undifined image please help out

  25. computeraidedyami
    December 16, 2018 at 12:43

    Very good explanation

  26. Easton Morgan
    December 16, 2018 at 12:43

    I have written and implemented this code word for word and my pipeSouth image won't load. I'm going through everything again to see what i missed. Also my collision detection is not working correctly so I'll need to try it again. Other than that it would appear to probably work correctly if I can correct my mistakes.

  27. 王叮叮
    December 16, 2018 at 12:43

    Wow! Following your video, I made my first game. I am looking forward to seeing you have more tutorials. Thanks!

  28. Cryptic Coding
    December 16, 2018 at 12:43

    Sir thank you.you helped me to learn code better.keep it up

  29. Sri Charan
    December 16, 2018 at 12:43

    any one give completed game github link..

Leave A Comment

You must be logged in to post a comment.