JavaScript Tutorial: Build Flappy Bird and Doodle Jump

Improve your JavaScript skills by building two popular millennial games: Doodle Jump & Flappy Bird.

In this video, you will practice over 32 of JavaScript's most popular methods in order to build the two games. This includes .forEach(), .push(), .shift(), .addEventListener(), .appendChild(), while loops, Classes, constructors and many more.

✏️ Course created by Ania Kubow.

⭐️ Course Contents ⭐️
⌨️ (00:00) Introduction
⌨️ (01:54) Introduction to Doodle Jump
⌨️ (01:56) Doodle Jump game logic
⌨️ (03:34) Setting up our game
⌨️ (07:37) Creating our doodler
⌨️ (12:02) Creating our platforms
⌨️ (15:02) Creating our Platform Class
⌨️ (19:53) Moving our platforms
⌨️ (23:12) Making our doodler jump
⌨️ (22:40) Making our doodler fall
⌨️ (27:21) Writing our game over logic
⌨️ (30:54) Hooking up our keyboard keys
⌨️ (38:21) Making our doodler go left and right
⌨️ (44:57) Removing and adding new platforms using array work
⌨️ (48:49) Removing all children of the grid using a while loop
⌨️ (49:41) adding the score

⌨️ (51:42) Flappy Bird introduction
⌨️ (51:44) Flappy Bird game logic
⌨️ (52:08) Setting up our project
⌨️ (57:55) Writing our start game logic
⌨️ (1:00:35) Making our bird jump
⌨️ (1:03:01) Hooking up our keyboard keys
⌨️ (1:04:04) Generate a pipe obstacle
⌨️ (1:09:04) Move the obstacle
⌨️ (1:11:34) Generate new obstacles using setInterval() and setTimeout()
⌨️ (1:13:06) Write our game over logic
⌨️ (1:18:53) We learn how to add images to our project
⌨️ (1:22:37) We expand our collision rules using && and ||
⌨️ (1:25:01) We add the final stages of styling learning about z-index

--

[aniakubow]

Big love to the freecodecamp community! Hope you like the video, do let me know if there is anything I can do better in the comments below :)

[coerol]

Thank you Rightful heir to the Iron Throne !

[excxmoody]

Slowly each and every time I've become more and more capable of following along and to some extent understand. TY!

[TheViolinRoom]

This was a great tutorial to learn many concepts. I am currently working through a course to write music for games and I've actually tried adding some of my compositions in flappy bird to give the game some life. In game play and game over state. Lots of fun

[carsonprice]

Doodle jump hell yeah! I made the flappy bird python game and wasn’t impressed with it personally but I’m excited for doodle jump! One of my favorites as a kid!

[markgoho]

You remind me a lot of Todd Motto: clear instruction, excellent articulation, solid content. Thanks for making this video!!!

[talhaansari]

Awesome great helpful video ... one addition ... instead of removing and creating platform again and again once they reach bottom ... 1. set visibility of platform to hidden 2. set platform.bottom = 600 (i.e top) 3. set visibilty back to visible... and that should work completely fine and smmooth Just another way which I think is more OK ...nyways it was great

[thesmartest]

i felt uncomfortable not writing semicolon 😁 am enjoying this tutorial. thank you so much

[naturalhealth]

Thank you for taking time to create these wonderful videos.

[ayanokoji]

Kuboania Your the best teacher I have ever learn from. Coding stuff

[ispeakthetruth]

That's Cersei stormborn
Mother of dragon and elephant :P

[lisovyy]

Ania - the queen of House Platformer, the First of Her Name, Queen of Flappy birds and doodlers, protector of the event loop, the mother of vars, the Khaleesi of div containers, the UltimetlyDefined, the Breaker of closures.

[meg]

48:25 I think the glitching is happening if you press the same direction multiple times (ie you press left when the doodler is already going left) so it's creating multiple timers. I was able to fix it by adding "if (isGoingLeft) return" and "if (isGoingRight) return" to the top of the respective move functions, so if you're already going that way it'll just get out of the function. Great video!

[arjunsemwal]

Thanks Ms. Ania for sharing such a great tutorial ❤

[nizambao]

Great video. Thank you so much for making the video and sharing it.

[braveitor]

Explanations are clear and concise. Congrats. Really good job. I'd do several things differently, though in games this simple are not that vital. For example, in the Doodle Jump game, I'd reuse the platforms that disappear from the bottom to reposition them up again (with random X), so it wouldn't be necessary modifying the array, creating and destroying objects, shifting and pushing, and so on. Also I wouldn't use so many intervals but hey, as long as it works... :)

[santiagoguerra]

Yeeaah! A really fun way to learn JS, thank you so much I can see all the effort you put in this amazing video!

[Rene-whfb]

great Video.
One thing i noticed. if you press the arrow key more than once you create mulitple Intervalls.
After the game is over we can only clear the latest one.
That is where the glich is comming from.

Keep up the great work 😃

[SeanP]

Thanks so much for the video! It was great fun while learning and practicing some core techniques! Awesome!

[supernovaletscreateachange]

Love you sister❤
Thank you for making such a nice video for learning javascript 😍
Lots of love from India🇮🇳🇮🇳