The Easiest Flappy Bird Tutorial Ever? - Beginner Javascript Game

Learn how to code Flappy Bird with the basics of web development. (HTML, CSS & Javascript)
LINK TO CODE: github.com/Beat0154/FlappyBird
LINK TO GAME: beat0154.github.io/FlappyBird/
My website: shawnbeaton.knifecircus.com
Follow me below and reach out if you need any help!
Twitter: ShawnJBeaton
Instagram: ShawnJBeaton
In this video I be showed you how to code flappy bird with just html, css and javascript. It’s pretty fun to play, and not too hard to code and you can change some of the values to make your game unique if you want!
To start, make a new folder, name it flappy bird and then open it in with brackets. Brackets is a text editor that makes it very easy to render a preview of what your website will look like.
Create three files: index.html, style.css, script.js. In the index.html file we’ll begin by creating a basic HTML layout, a head and a body and we’ll change the title to Flappy Bird. Next connect the css file and the script file.
Create a game div which contains all the elements of flappy bird. Inside of that, create 3 more divs, the first with id=”block”, the next one with “hole” and the final div with “character”.
Hop over to your CSS file and begin by removing the basic paddings and margins that are automatically added by the browser. Next start giving the game div some styles. A width and a height and a border so that we can see the outline of it. Also add margin: auto; so that it’s always centered.
Next start styling the block div. We’ll add a width and a height and a background-color. Add left: 400px, because thats the width of the game, and that left property won’t work unless the div has position: relative.
Now create a keyframe animation that will start with the block on the right, and finish with it on the left. Add it to the block div with the animation property, and set it to be infinite. You’ll notice the block goes outside the game div, so just add overflow: hidden to the game div to make it look a lot better!
Next start adding properties to the hole div. Give it mostly the same properties as the block div, except the height will only be 150px and the background color will be white. Because the block and hole div are both position relative that means they come ontop of eachother, so add the property top: -500px to the hole to bring it down 500px, which is the height of the block!
Next we’ll change the position of the hole after every animation.
Start by creating some variables for the block and hole so that we can use the right elements. Next create an event listener that runs a function after every hole “animationiteration”. Inside that function we’ll create a variable random. Math.random returns a random decimal between 0 and 1, multiply it by 300 so that it returns a number between 0 and 300. Also add 150 after, so that it returns a number between 150 and 450, and then also set that to be negative so that its between -150 and -450. Set the top position of the hole to that random number. Now every time the animation runs the hole will have a different position.
Now onto the character. Start by adding some css properties; width, height, background-color: red, position: absolute, top: 100px, and border-radius to make it a ball.
Next create a function that will act as gravity. Make an interval function that runs every 10 milliseconds. Create a new variable characterTop and its going to be equal to the current top position of the character div. We can get that by using “window.getComputedStyles()” and then the element we want the styles from, then “getPropertyValue()” and we want the top property. So now our variable characterTop will be equal to the css value of the top property of the character div. Next set a new top position for the character, and it’ll be the same amount as before except we’re going to add 3px to it.
Next create another function named jump which will make the ball go up, basically the opposite of our gravity function. We’ll have to go back to our HTML and add an onclick to run our jump function, and we’ll put it on the html tag so that it works if the user clicks literally anything.
Next go back to your javascript and create a new variable “jumping” and set it to zero.
Inside the jump function set our new variable to 1 and then when our function ends, set it back to 0. That means that if the jumping variable equals 1 then we are currently jumping, if it equals 0 then we’re not jumping.
Now add an if statement so that the gravity function only changes the top if we’re not currently jumping, or else we would be moving the ball up and down at the same time and that just gets messy.
transcript etc...
Now our flappy bird game is fully functioning. But don’t stop there! Keep adjusting the code and properties and make the game more interesting! Maybe super wide blocks? Or slower or faster movements! Anything is possible!

[@pierreder1368]

"Every single hole has a different position", lol. He was gonna laugh at that, lol.

[@robertefremov9380]

Simple and easy, doesn't over-explain, like a tutorial should be! Well done!

[@dpdoescode]

saw the post yesterday on reddit for this, great video and you explain your thought processes really well! love it, thank you! 🤙

[@thisIsPathan]

Man, your videos are really helping me learning some coding during the quarantine. Thank you.

[@ImY0urHuckl3berry]

Nice man, really digging the clean code and simplicity. Thanks for the knowledge

[@beastlydom2861]

I love making games in code especially with your tutorials I’ve been making a website where I keep all my games I’ve coded

[@lucahemmi299]

this video is hilarious ive watched it about 20 times now in the span of a while and everytime I watch it it gets better

[@andrei9115]

Man, you're a genious. I think you are among a few programmers that actually know how to explain the code in "real human language"...you should have had much more followers for all your work that you do! As a sidenote, I'd like a bit more interaction and interactivity between the js code and the actual rendered html especially when you had to show how modifying the position of the elements is reflected on the page...but anyways, you do alot of work to make everyone understand! I liked so much how you imagined the "gape" with that relative div thing, very logical and straightforward as well!! Also, your english is so easy to understand and I am a romanian :) Well done, bro!!

[@TheSaltyCook]

your videos are super helpful, thank you for making the information so approachable

[@simpleprogramming4671]

what a beautiful explanation loved it, you made my day !

[@sterlingday6362]

Dude your projects are really helping me start making my own games! I love your content! I figured out your last code, can't wait to give this one a go.

[@KnifeCircus]

That's so amazing to hear! Thanks so much for the support!

[@komalkarwa5624]

@@KnifeCircus Me too,but i have a question, which coding app or browser do you use?

[@18hridyandeshpande94]

@@komalkarwa5624 He uses brackets as his code editor

[@amitsoni7685]

@@KnifeCircus Debugging your code by looking you video many times I can't understand when I copy code for github it does not works and . Do you have any suggestions please I want to work on this project because it is cool. You also don't used any input that would be taken from flappy bird that made me think like what you wrote in js.

[@nikeedev]

@@komalkarwa5624 he said in beginning

[@user-sk7cc6fk3t]

It's a good demo for my first game and help me practice what I learned.

[@UnhistoricActs]

Really cool to see these games take shape - keep them coming Shawn! 💯

[@noobde3462]

yeah

[@tanercoder1915]

this will make a nice weekend project!

[@splashbeats_]

Thanks for helping me learn JavaScript!

[@user-rf8sj1yy4c]

really really thanks a lot!!! today is the first day to love javascript!!!!!!!!!! I got motivation to prepare my portfolio for webpublisher.. thank you!

[@simoncordova5655]

Hey buddy keep it up - I've been coding for almosot 5 years and I'm a decade older but but enjoying some of your videos - keep it up buds! PS I see that Raptors mat yes sir!

[@jaredspencer3304]

Super cool. Thanks for the tutorial!

[@shobhitpreetamsahoo4267]

Whoa bro!! Thank you for making such videos... It's really helpful for JS beginners.

[@boneBasterd]

Really awesome idea and also nice dialogue, intresting and thorough, subbed!

[@KnifeCircus]

Thanks so much! It really means a lot!

[@umarjonbakirov6850]

@@KnifeCircus can you creat pin ball in javascript

[@mithunchan02]

Nice brother!! You are doing great!!Keep coming with more 😎

[@greencodeliz6049]

Thank you!🥰 your videos are really helpful

[@aa-kv2zk]

loved it man!

[@Waveclaw18]

Once again, an epic video by KnifeCircus!

[@noobde3462]

yes

[@moiraleon8744]

Amazing Tutorial!!! I love these and thank you so much! Just for anyone coding along if you run into errors with the jump function it might have been the same as mine. At 9:26 line 24 (at this time 23)is if((characterTop>6)&&(counter6)&&(jumpCount

[@switchtoanotherone]

Thanks a lot!!! I just started to learn JavaScript since today. And I wrote some code as him but it didn’t work. But I could solved it thanks to you!!

[@mayankchandratre191]

its a great tutorial thank u for uploading it...I TRIED IT AND IT WORKS SOO FINE!

[@samehzaky]

very simple and effective tutorial, keep up awesome games

[@vaibhavpatil1916]

Thank you for sharing ur knowledge

[@memecroissant5869]

thanks this is gonna be my first game thanks dood

[@anythingguns4890]

how can I make it so it jumps or moves when the spacebar is pressed?

[@paulhan3314]

i love this. thanks for sharing

[@hazeedits1106]

After the jump is added for some reason when I click the ball just stops moving.

[@djblobby]

awesome dude, keep it up!

[@TheCuriousCorner007]

Can we run the jump function by clicking 'space' key??

[@aaravtomar786]

who can even dislike this ??

[@BitCloud047]

this is awesome!! But how do you add a sprite to overlap the dot?

[@burakaltintas5918]

Hi I appreciate what you do I have got a question for you, which I would like to know if we can change the ball and how can we actually change it? Thank you

[@jordankolev6107]

great video, man!

[@ShyamnaikGuguloth]

Awesome videos .... keep going really loving the videos

[@KnifeCircus]

Glad you like them!

[@michaelp.channel331]

I love watching your videos! I learned a lot, I'm hoping you will upload another videos sooner!

[@neginma6285]

THANK YOUUUUUUUUUUUUUUUUU. you saved my LIFE 😂😍

[@mikexue5104]

my 9 years old son likes this very much. thanks.

[@tasin487]

Loved It!

[@Almaguer.]

Really cool video!

[@komalkarwa5624]

Dude your explanation is awesome, thanks. and can you plzz upload a video on " i.o " games ? plzz

[@nair38]

This was my first working game :D

[@JustSinaaax]

Question, when you put the ! To make the html what do you press so it creates it? Is it enter? Because when I do it, it doesn’t make the html layout

[@simulatclown9986]

Its bugged

[@soap304]

why does my bird not jump ? i checked all the code twice. when i click it only stops falling for a second. it does not fly up

[@sami9752]

Hey, great video. Just a quick question, what would be the issue if you used a relative position in the "character". Why did you choose to go with absolute?

[@KnifeCircus]

because if it were position relative, all the elements before it would push it down the page and then setting the top position would have to be negative numbers, so its just easier to keep as absolute.

[@imanmohi2943]

Amazing Shawn 👏

[@KnifeCircus]

Thank you :)

[@asmol7836]

Thanks homie

[@funwithbhumika5582]

it is not working. i dont get space in starting of the script.

[@mismatchingshoes5249]

I get an error in my Java script saying “parsing error: unexpected token ) hole.addEventListener(‘animationiteration’, () => {

[@RealLava]

if there is still a error change "if((characterTop>6)&&(counter6)&&(jumpCount

[@noobde3462]

yes my also

[@binhdantat5560]

This works for windows as well, you just need visual studio code

[@stunsgd2147]

I did it on VIM

[@Mete111]

Does someone know how i can change the speed of falling down ??

[@IZZYE661]

When the ball hits the block it does not end the game. Only hitting the bottom ends it. I have triple checked the code. Any idea how I can fix this?

[@hititpluck]

Im getting an error because of the or symbol ( || ) what am i doing wrong?

[@TonyGRD]

hello I have a problem whit addEventListener.

[@noobguy106]

For some reason, mine's not working. I followed all and triple checked everything and found an error that says "ERROR: Parsing error: Unexpected token) hole.addEventListener('animationliteration', () => " and I dont know what to do. If maybe someone would help me 👉👈

[@alecoostra7074]

Can you also use the Math.random to determine how fast the animation goes? Like one time the tubes go by by 1.5 seconds and the other time it takes 3 seconds?

[@NewLondonMarshall]

yup! And math.random for the icon for the bird itself, colour of the tubes etc

[@craftwithbrain1179]

Really cool man

[@crod1232]

How do you jump? It won't do anything? The ball just falls

[@cerealbawxtv]

For some reason every time I click, my character just stops moving instead of jumping. If anyone can help in anyway please do. Thanks!

[@danoverload999yearsago8]

When I write the first script.js (different hole position) it won't change

[@thedrumdude1780]

what do you click to jump

[@ajmaltariq8242]

Awesome man

[@samtianero558]

what app did you use on creating that game

[@Sankalp20023]

Some pillars have holes and others don't have holes. could you tell me how to fix it

[@soumya00]

Sir, event listner is not working properly.....what should I do?

[@snakgamerz8081]

what should we press to jump

[@rubixcal]

why's the jumping function not working ? guess. something to do with Mac

[@destroyr1242]

So quick question because I can’t figure out why the hole isn’t working, I’m at 3:45 in the video, and have everything up to this point word for word but can’t see the hole when I have the background-color set to white

[@KnifeCircus]

Try going into inspect element and clicking on the hole element in the html and it should highlight it in blue so you can find it, then adjust it from there. Also changing the background colour temporarily will help.

[@ilkinhuseynov9011]

how did you make your game web searching? like in google

[@haroldgordon-smith3462]

When I click the character just stops and does not bounce back up??

[@zhangjeremy4969]

Hi guys, it is a nice video. But my red ball will keep falling out of the game border and the scroll bar on the window will be smaller and smaller, what am I going to solve this problem?

[@AnandKumar-bj3zf]

Can you please tell me how to use an image as your game characters

[@shaungeel1363]

Where do i get java script html and cc+apps

[@sahandumidu2735]

nice work bro

[@marcinooooo]

Tutorial on How to make a leaderboard? Great vid btw!

[@skeleton-bullfrog]

I know I'm late, but whenever I click the ball just stops. any suggestions?

[@chogi9860]

Hey KnifeCircus, just a question, how can you add a background image to the red square?

[@KnifeCircus]

hey! in the css instead of background-color: red; put background-image: url(link ur img here);

[@chogi9860]

wait I can't find the css you are talking about my css only has the canvas css not the square

[@sankalpkapoor9031]

Which app are you using which application

[@Shawnitis]

Bro it's a miracle cz my name is also Shawn ❤

[@user-ze3ui8ur9h]

so i was just thinking, how do i add a high score thing?

[@your.free.electrons]

This is awesome🧠 🌚!

[@joshua_hc_cr]

Just to remind you that the var counter is not even initialized at 9:26, so maybe that is why the "Bird" wasn't performing the function jump(). Thank you very much for the tutorial, it was fun to practice with this game.

[@f0ri335]

i could not understand what the problem is, but thanks to you I found the cause

[@Nino-ne3kl]

Really cool

[@sarveshmishra340]

why we use two html two css and two js file

[@SameerAbbasMughal]

One of the excellent video that I found on the internet❤❤

[@aaravtomar786]

thanks,,,,,, subscribed,,,,,,,,,,,please make more videos on,,,,,,doodle jump , memory game , bullseye etc

[@malitver]

Thx bro

[@desolan9968]

I try this on android but nothing's happened Can u make a tutorial of basic html games compatible for android

[@Murari0004]

After the game over part The animation for block and hole keeps running Can you tell us how to hold it for that interval of time where the alert pops

[@irfanmahmood566]

Did you find a solution?

[@Murari0004]

​@@irfanmahmood566 i tried

[@_xoi.d_]

do you use a mac book or a I Mac

[@obafealabi6570]

Thanks allot ❣️

[@opivaan8061]

how to publish it on google play console?

[@Zachary-it8cx]

what button to the jump

[@jaymeswilliams1904]

Anyone have the dimensions needed to make this full screen in the browser?

[@pranomkawa7894]

dude, I coded everything in the script.js script but the hole in the block doesn't appear.

[@KnifeCircus]

did u so a margin-top: -20px? making the background color not white would make it easier to see aswell, and then change it back