The Easiest Flappy Bird Tutorial Ever? - Beginner Javascript Game
ฝัง
- เผยแพร่เมื่อ 23 ส.ค. 2024
- Learn how to code Flappy Bird with the basics of web development. (HTML, CSS & Javascript)
LINK TO CODE: github.com/Bea...
LINK TO GAME: beat0154.githu...
My website: shawnbeaton.kn...
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!
"Every single hole has a different position", lol. He was gonna laugh at that, lol.
the hand covering the mouth lol
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!!
Simple and easy, doesn't over-explain, like a tutorial should be! Well done!
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
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!!
Man, your videos are really helping me learning some coding during the quarantine. Thank you.
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.
That's so amazing to hear! Thanks so much for the support!
@@KnifeCircus Me too,but i have a question,
which coding app or browser do you use?
@@komalkarwa5624 He uses brackets as his code editor
@@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.
@@komalkarwa5624 he said in beginning
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
Nice man, really digging the clean code and simplicity. Thanks for the knowledge
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
saw the post yesterday on reddit for this, great video and you explain your thought processes really well! love it, thank you! 🤙
Really cool to see these games take shape - keep them coming Shawn! 💯
yeah
who can even dislike this ??
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.
i could not understand what the problem is, but thanks to you I found the cause
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!
really really thanks a lot!!! today is the first day to love javascript!!!!!!!!!! I got motivation to prepare my portfolio for webpublisher.. thank you!
This works for windows as well, you just need visual studio code
I did it on VIM
what a beautiful explanation loved it, you made my day !
It's a good demo for my first game and help me practice what I learned.
Thanks for helping me learn JavaScript!
your videos are super helpful, thank you for making the information so approachable
this will make a nice weekend project!
Really awesome idea and also nice dialogue, intresting and thorough, subbed!
Thanks so much! It really means a lot!
@@KnifeCircus can you creat pin ball in javascript
Once again, an epic video by KnifeCircus!
yes
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
After the jump is added for some reason when I click the ball just stops moving.
my 9 years old son likes this very much. thanks.
how can I make it so it jumps or moves when the spacebar is pressed?
Nice brother!! You are doing great!!Keep coming with more 😎
if there is still a error change "if((characterTop>6)&&(counter6)&&(jumpCount
yes my also
Can we run the jump function by clicking 'space' key??
Super cool. Thanks for the tutorial!
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
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.
Whoa bro!! Thank you for making such videos... It's really helpful for JS beginners.
its a great tutorial thank u for uploading it...I TRIED IT AND IT WORKS SOO FINE!
I think you learn web development in India, Mumbai, am i right?
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
Its bugged
I get an error in my Java script saying “parsing error: unexpected token ) hole.addEventListener(‘animationiteration’, () => {
why's the jumping function not working ? guess. something to do with Mac
Thank you for sharing ur knowledge
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
Did you find a solution?
@@irfanmahmood566 i tried
How did you instantly get by just type div#game?
Emmet abreviation from VS or Brackets
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 👉👈
very simple and effective tutorial, keep up awesome games
Dude your explanation is awesome, thanks.
and can you plzz upload a video on " i.o " games ? plzz
it is not working. i dont get space in starting of the script.
Bro it's a miracle cz my name is also Shawn ❤
loved it man!
Does someone know how i can change the speed of falling down ??
thanks this is gonna be my first game thanks dood
Thank you!🥰
your videos are really helpful
How do you jump? It won't do anything? The ball just falls
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
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?
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.
Thanks homie
I love watching your videos! I learned a lot, I'm hoping you will upload another videos sooner!
dude, I coded everything in the script.js script but the hole in the block doesn't appear.
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
Awesome videos .... keep going really loving the videos
Glad you like them!
THANK YOUUUUUUUUUUUUUUUUU. you saved my LIFE 😂😍
Tutorial on How to make a leaderboard? Great vid btw!
i love this. thanks for sharing
hello I have a problem whit addEventListener.
This was my first working game :D
Some pillars have holes and others don't have holes. could you tell me how to fix it
For some reason every time I click, my character just stops moving instead of jumping. If anyone can help in anyway please do. Thanks!
Hey KnifeCircus, just a question, how can you add a background image to the red square?
hey! in the css instead of
background-color: red;
put
background-image: url(link ur img here);
wait I can't find the css you are talking about my css only has the canvas css not the square
this is awesome!! But how do you add a sprite to overlap the dot?
Could you start making links to your code?
so i was just thinking, how do i add a high score thing?
Next game u can try to make a hangman's game.... Simple hangman's game with just JS...
Loved It!
Why can’t i jump?
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?
yup! And math.random for the icon for the bird itself, colour of the tubes etc
awesome dude, keep it up!
Really cool video!
I tried to set a custom image using css the function and it just makes everything on screen white. Here is the code. please help! #character{
width: 20px;
height: 20px;
background-image: background-image: url("599.png");
position: absolute;
top: 100px;
border-radius: 50%;
}
you have background-image: twice when u only need it once, thats probably the problem
Try to use one of the background-position type: contain, cover...etc!
what should we press to jump
Im getting an error because of the or symbol ( || ) what am i doing wrong?
great video, man!
Amazing Shawn 👏
Thank you :)
Counter is not defined
Edit: create a VAR named counter and give it a value of 0.
knifecircus please add that you can jump with space bar please!
One of the excellent video that I found on the internet❤❤
thanks,,,,,, subscribed,,,,,,,,,,,please make more videos on,,,,,,doodle jump , memory game , bullseye etc
Awesome man
I love it good but next time add a phase button
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?
I know I'm late, but whenever I click the ball just stops. any suggestions?
Why mine is not jumping
what do you click to jump
Really cool man
Sir, event listner is not working properly.....what should I do?
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?
I try this on android but nothing's happened
Can u make a tutorial of basic html games compatible for android
Can you please tell me how to use an image as your game characters
Where do i get java script html and cc+apps
When I write the first script.js (different hole position) it won't change
Which app are you using which application
why we use two html two css and two js file
what button to the jump
what app did you use on creating that game