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
30 responses to “Flappy Bird Game Using JavaScript”
Can you make one gun shooting game in javascript.
Please make this video as soon as possible.
Where do I find the images?
The way this guy says "width" makes me laugh.
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
this is great, how can you do to move faster every 10 pipes for exapmle?
https://www.youtube.com/watch?v=gPgHB4iY_9k
25:15
15:47
Great tutorial !! 🙂
good tutorial ,thanks…my problem is about the locate.reload() code…which don't work well if your not running it on a browser…
Great explanation as always, is it possible to save highscore using just JavaScript ?
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……..
i love you bro
Great video. I'm going to tweak the code to see if i can improve on it.
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 :)?
Hey! Thank you for this video! It helped me a lot, since I'm trying to program my first game.
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/
u are just brilliant!!! I never thought about mKing a game on web 🙂 thnks very much 🙂
Thank you for this tutorial! You're great at explaining the logic and th ought process behind the code. Keep it up!
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!
very good, thanks for your work. One thing, could you, please, add license file to your repo?
It's showing error
Never use for, or any other loops inside RAF or Intervals… Better use pipe.forEach, works better in this case IMO
what engine is this?
unable to load image it says undifined image please help out
Very good explanation
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.
Wow! Following your video, I made my first game. I am looking forward to seeing you have more tutorials. Thanks!
Sir thank you.you helped me to learn code better.keep it up
any one give completed game github link..