Create Flappy Bird clone in Javascript HTML CSS

How to code flappy bird in javascript, html, and css.

In this tutorial, you will learn to create the flappy bird game with html, css, and javascript. Specifically, you will learn how to code the game using html5 canvas.

Throughout the tutorial, you will learn how to create the game loop, add images onto the canvas, add click handlers to make the flappy bird jump, randomly generate pipes and move them across the screen, detect collisions between the flappy bird and each pipe, and add a running score.

Java Game Programming Projects Playlist:

JavaScript Game Programming Projects Playlist:

Subscribe for more coding tutorials 😄!

[QuackQuack]

quick tip, In vs code in html just type ! then hit tab and you will have the entire <!DOCTYPE> code

[azureharris]

I love your channel. You are the only youtuber that really goes into debt and explains everything. Perfectly

[masterman]

Your vids are amazing bro, as a beginner, they are helping me massively keep it up

[zarakikenpachi]

I have a really small request, hoping you could incorporate it in one/some of your tutorials.

If you could show how to add a clickable link or modal to a canvas game, and how to make the game responsive for standard phone and tablet screen sizes.

Apart from that, amazing tutorial. Thanks a lot for your efforts.

[RayShine]

Your video is so useful and easy-understanding. I love it! Thank you for teaching me this and improving my Javascript

[tanmayi]

Amazing! Thank you so so much Kenny! Really appreciate the detailed explanation! Grateful <3

[henkdevries]

really helpfull when you draw out what you are programming, helped me alot. Good tutorial video.

[chetanrathi]

awsome tutorial!!! you make coding game look like playing it!

[ksamuelchris]

This is great example of creating flappy bird with HTML5 I would like to know if you would talk about making the game for mobile .
For example using the screen to make the bird move by tapping the screen. I also was wondering about game sound input and perhaps level generations

[MuhammadAzmiRayana]

How to make it works on mobile?, when i try play it on mobile, the bird didn't jump. Pls answer😢

[Hoodies]

This tutorial is very helpfull, and well explained. I just think that u should add the code for resetting the bird as his original place when u restart the game cause the bird will spawn as the exact same place he died in the precedent run. Anyway thank you a lot it was a very nice tutorial.

[josearanda]

writing it in vs code and I completed the first 5 minutes of the tutorial, am I doing something wrong?

[QuackQuack]

and for the flappy bird instead of drawing it with complicated math, can't you just create a div called bird and in the CSS file put the flappy bird image in the div with: background-image: url(Birb);
and then code it to move? and then do the same thing with the board cuz it looks complicated compared of what you did with the Whack a mole vid

[chrisrutledge]

Only recommendation would be to have touch support. Otherwise, this is awesome!

[BrilliartStudios]

I can't get mine to show up on a browser? I'm a beginner.

[yamraj]

can someone help me when i tried to run the Top pipe movement code, the pipes did sucessfully moved to left but then they left a black screen between them

[classicarroll]

How to you create the two vertical lines that signify “or”.

[Error-erki]

THANKYOU SO MUCH!!!!, I JUST DID YOUR CHALLENGE AND IT WORKING NOW. But my real challenge is giving it a coins to collect or pts to earn to acquire some power ups :< its so damn hard. Hope I can finish it.

[ellis-prhh]

the explanation is so great and code is pretty much easy to understand ..just one question ..as someone is playing the game, after some period of playing usually games gets pretty fast so that it becomes hard to play...can we do in this too? if yes then how..

[johnanthonylontoc]

Your video is so good!!but can you make a video of that flappy bird but with highscore theme