Create Flappy Bird clone in Javascript HTML CSS 

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

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

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

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

Waited 1,5 months! Thanks a lot!

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

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

super awesome!!! just finished it!!

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.

Check out the playlist of web project tutorials here! ru-vid.com/group/PLnKe36F30Y4bLhA-st9sC4ZthyV7nsL2Q Got a tutorial suggestion? Let me know down below!

Thank you my friend amazing tutorial

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.

Thanks a lot bro you are just awesome🥰

This has helped me soo much

you are too good love from nepal

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

keep it up bro

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

how to center the text Game Over?

i cannot figure out why i cant get the imagine of flappybird to load it just stays a green block

thanks!

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

i have a question about the birdImg.src, for the js in the newest version, the js couldn't read it, can you help me ASAP please?

nice sir

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.

Hi I have a problem with the setInterval() timing , if I pass 1500 there will be just one pipe in the game , but around 500-700 ms is ok but the game appear fast. shouldn't be these timing standard , why when I set it to 1.5 I have just one pipe? should i use setTimeOut function to make delay? what do I do with just one pipe?

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

Awesome :D

Nose inglés pero Justo lo que buscaba

I have problem with let board;

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

I've went a long and made sure all my code was lined to yours and everything was working fine at first but than i went to check again and it stays stuck on the bluescreen and doesnet update the dementions when i view live server in visuail studio and doesen't update the background and I double checked the code is right

God Bless You

how do i run it on my browser

How to add music?

the reset thing not working anyway gr8 tutorial :D

this was pretty awesome! but once you have made a game like this one, how would you upload it or publish it in an actual website? i've followed this tutorial but cant seem to figure it out how to publish it in a website. i've tried to test what i have so far but cant seem to be able to embed it. any help is greatly appreciated!!!

bro i write the same code like you write but after adding pipes moving code, there is no gap between two pipes ,my game background is not visible can you tell what i should i do

how do i add the flappybird.css and flappybird.js?

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

Hy! I have a problem and I dont know why... when I try to set the board sizes in the js file, it dont do nothin. I checked and i think i am wrote the same as you. I refered int the html correctly I tried with a alert message. I have the same issues with other games tutorials to. Please help me!:) My code: js let board; let boardWidth = 500; let boardHeight = 640; let context; let birdWidth = 34; let birdHeight = 24; let birdX = boardWidth/8; let birdY = boardHeight/2; let bird = { x : birdX, y : birdY, width : birdWidth, height : birdHeight } window.onload = function(){ board = document.getElementById("board"); boardHeight = boardHeight; boardWidth = boardWidth; context = board.getContext("2d"); } context.fillStyle = "green"; context.fillRect(bird.x, bird.y, bird.width, bird.height);

yo i did the same but if i press the key to make the bird jump it will go super fast that rlly weird

LFG!! 🔥🔥🔥

can you please put the link of the pictures of the pic even the pipes pleeeeeease

Why my code is not working

Good work bro But your bird Wing is not moving

I am stuck on how to add the mouse click into this :/ can someone help?

22:58

Hello, can you explain me how do u find the ratio like the 17 and 12, i know that u did x2 for 34, 24. But the 17 and 12 iam lost.... Btw i do like this video and your tutorial, nice job.

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..

please send us the link of the whole code pleeeeeeease

hey i have recently started practicing your vids and i must say you are incredible!! Is there your community page on discord ,insta or anywhere else where we could post over frequent queries and get other's suggestions as well as yours along with project ideas?

Ignore this comment👍 9:28

Bro you didnt make it mobile device friendly. Wtf

Bad game

19:21