Check out the playlist of web project tutorials here! th-cam.com/play/PLnKe36F30Y4bLhA-st9sC4ZthyV7nsL2Q.html Got a tutorial suggestion? Let me know down below!
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
Not sure what levels you would make with flappy bird since it’s an infinite platform game. Unfortunately web on mobile is different from mobile apps so there are limitations on what you can do. You could add a mouse click handler function (check my wordle or sudoku tutorial where I show how to create one) and add the code that makes the bird jump into the mouse click handler.
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.
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
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
It may seem complicated but it actually isn’t once you take a bit of time to understand it. This is fundamental for game programming. The css trick is just a hacky way to do it and is not recommended.
For games that only require clicking on a grid/board, it’s easier to create html elements. But a game involving movement and physics, you’re better off using canvas or some other graphics library.
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.
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..
Yes you can build levels or check after a certain number of points, you can increase certain things like how fast the player is going. In the case with flappy bird, I don’t think anything changes . Check out my space invaders tutorial for an example!
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
@@KennyYipCoding pretty sure I did doube check but now im trying to do the snake game and the html just does not want to read my javascript, your videos are awesome and helpful but when i try to open it i get the letters but it doesent update the picture
On the computer we are using different event listeners i.e keypress . But in mobile we will be using touch to make bird jump . So you need to use touch listener for that
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
Right click inspect and see if there’s an error message. Best thing to do is to backtrack, rewatch the previous parts of the videos and try to catch where you made a mistake!
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!!!
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.
I forgot to take into account the refresh rate (used by requestAnimationFrame), mine is 60hz yours might be faster. In this case it’d be better to use setInterval(update, 1000/60); so that it’s 60 frames per second
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?
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);
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.
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?
Well games are generally designed to be played on a computer/console or as mobile applications. People generally don’t go on mobile websites to play games.
@@KennyYipCoding then why did you adjust it for mobile devices using meta name? That just seemed redundant if you weren't gonna actually make it mobile friendly?
I love your channel. You are the only youtuber that really goes into debt and explains everything. Perfectly
SAME!! 😀
Check out the playlist of web project tutorials here!
th-cam.com/play/PLnKe36F30Y4bLhA-st9sC4ZthyV7nsL2Q.html
Got a tutorial suggestion? Let me know down below!
quick tip, In vs code in html just type ! then hit tab and you will have the entire code
already knew that lol....thanks anyways !
Thanks! Wasn't aware about it
or you can use html:5 then tab
Thanks a lot of ❤
Your vids are amazing bro, as a beginner, they are helping me massively keep it up
Waited 1,5 months! Thanks a lot!
I'm very happy to both code and play this game again. Thank you very much for your tutorial.
Your video is so useful and easy-understanding. I love it! Thank you for teaching me this and improving my Javascript
You are cooking so hard , hats off
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!
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
Not sure what levels you would make with flappy bird since it’s an infinite platform game. Unfortunately web on mobile is different from mobile apps so there are limitations on what you can do. You could add a mouse click handler function (check my wordle or sudoku tutorial where I show how to create one) and add the code that makes the bird jump into the mouse click handler.
Thanks for the tutorial!
Amazing! Thank you so so much Kenny! Really appreciate the detailed explanation! Grateful
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.
super awesome!!! just finished it!!
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
Not sure what this bug looks like but perhaps you could compare the completed code with the one you wrote and see if you missed something?
Most probably you wrote birdHeight istead of boardHeight in clearRect function)
Did you find the bug?
writing it in vs code and I completed the first 5 minutes of the tutorial, am I doing something wrong?
i didnt understand the context and ratio management and stuff would you kindly help me abt the calculations ?
can you please teel the logic for the detectcollision function, didn't get it.
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
It may seem complicated but it actually isn’t once you take a bit of time to understand it. This is fundamental for game programming. The css trick is just a hacky way to do it and is not recommended.
For games that only require clicking on a grid/board, it’s easier to create html elements. But a game involving movement and physics, you’re better off using canvas or some other graphics library.
How to you create the two vertical lines that signify “or”.
Only recommendation would be to have touch support. Otherwise, this is awesome!
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.
i cannot figure out why i cant get the imagine of flappybird to load it just stays a green block
Sir i am getting error as getcontext is not a function . .. can you plz help
Subscribed !😊
Thank you my friend amazing tutorial
what about the image class ??
I can't get mine to show up on a browser? I'm a beginner.
Thanks a lot bro you are just awesome🥰
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..
Yes you can build levels or check after a certain number of points, you can increase certain things like how fast the player is going. In the case with flappy bird, I don’t think anything changes . Check out my space invaders tutorial for an example!
@@KennyYipCoding alrighty thank you
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?
Right click inspect console, what error do you see?
Also I have the completed code for you to compare. It could be your img path is not correct
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
did you link your css.js properly?
@@KennyYipCoding pretty sure I did doube check but now im trying to do the snake game and the html just does not want to read my javascript, your videos are awesome and helpful but when i try to open it i get the letters but it doesent update the picture
@@RoadRageEntertainment you can copy your codes and open a new window and start again
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?
How to make it works on mobile?, when i try play it on mobile, the bird didn't jump. Pls answer😢
You got it bro ? Can you share how
On the computer we are using different event listeners i.e keypress . But in mobile we will be using touch to make bird jump . So you need to use touch listener for that
you are too good
love from nepal
bro can we use this on our own website😊
I have problem with let board;
Nose inglés pero Justo lo que buscaba
How to add music?
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
Right click inspect and see if there’s an error message. Best thing to do is to backtrack, rewatch the previous parts of the videos and try to catch where you made a mistake!
same issue lol
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!!!
th-cam.com/video/OltY8JIaP-4/w-d-xo.html
I have a video showing how to upload a webpage for free on GitHub
just put the same code on neocities
how do i run it on my browser
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.
can you please put the link of the pictures of the pic even the pipes pleeeeeease
As mentioned in the video, it’s in the GitHub link in the video description
This has helped me soo much
yo i did the same but if i press the key to make the bird jump it will go super fast that rlly weird
I forgot to take into account the refresh rate (used by requestAnimationFrame), mine is 60hz yours might be faster. In this case it’d be better to use setInterval(update, 1000/60); so that it’s 60 frames per second
@@KennyYipCoding yh i got 165hz, gotts try it tommorow
@@KennyYipCoding so what do i change in the code?
when my bird passed the pipe score is increasing by 42
the reset thing not working anyway gr8 tutorial :D
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?
Good work bro
But your bird Wing is not moving
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);
Inside window.onload, it should be:
board.height = boardHeight;
board.width = boardWidth;
Thank you now better but I still not have the bird
And IT is jumps back , when I wrote what you suggest it worked but now thensame issue
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.
Width of image / height of image, is the ratio you wan my to scale
how do i add the flappybird.css and flappybird.js?
On head tag you can add link tag and script tag
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?
Why my code is not working
This game cannot play in mobile please say the solution
I am stuck on how to add the mouse click into this :/ can someone help?
You need to assign a mouse click event handler to the canvas tag. Check out my other tutorials like wordle or connect 4 to see how to do that!
@@KennyYipCoding thank you! I have been stuck on this for over 10 mins. I appreciate the comment :)
@@KennyYipCoding 1 more question. Where in the code would I add it?
keep it up bro
thanks a lot!
LFG!! 🔥🔥🔥
nice sir
please send us the link of the whole code pleeeeeeease
It’s in the video description in the GitHub link…..
send it here pls i am subscribed
i am the biggest fan
@@omniaabdalaziz7917 github.com/ImKennyYip/flappy-bird
you are the number 1
19:21
22:58
Awesome :D
thanks!
God Bless You
Bro you didnt make it mobile device friendly. Wtf
Well games are generally designed to be played on a computer/console or as mobile applications. People generally don’t go on mobile websites to play games.
@@KennyYipCoding then why did you adjust it for mobile devices using meta name? That just seemed redundant if you weren't gonna actually make it mobile friendly?
Bad game