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
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!!
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 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.
really really thanks a lot!!! today is the first day to love javascript!!!!!!!!!! I got motivation to prepare my portfolio for webpublisher.. thank you!
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.
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!
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.
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
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 👉👈
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?
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.
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%; }
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?
Sure! Thats an interesting video idea. The way I did it on version 2 probably isn't the best way, so maybe a video showing multiple ways to do it with pros and cons of each!
Simple and easy, doesn't over-explain, like a tutorial should be! Well done!
Man, your videos are really helping me learning some coding during the quarantine. Thank you.
"Every single hole has a different position", lol. He was gonna laugh at that, lol.
the hand covering the mouth lol
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, 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!!
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
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
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
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
really really thanks a lot!!! today is the first day to love javascript!!!!!!!!!! I got motivation to prepare my portfolio for webpublisher.. thank you!
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.
After the jump is added for some reason when I click the ball just stops moving.
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!
It's a good demo for my first game and help me practice what I learned.
Can we run the jump function by clicking 'space' key??
how can I make it so it jumps or moves when the spacebar is pressed?
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
what a beautiful explanation loved it, you made my day !
Thanks for helping me learn JavaScript!
This works for windows as well, you just need visual studio code
I did it on VIM
this will make a nice weekend project!
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
How do you jump? It won't do anything? The ball just falls
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
who can even dislike this ??
if there is still a error change "if((characterTop>6)&&(counter6)&&(jumpCount
yes my also
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
your videos are super helpful, thank you for making the information so approachable
hello I have a problem whit addEventListener.
my 9 years old son likes this very much. thanks.
it is not working. i dont get space in starting of the script.
I get an error in my Java script saying “parsing error: unexpected token ) hole.addEventListener(‘animationiteration’, () => {
so i was just thinking, how do i add a high score thing?
Some pillars have holes and others don't have holes. could you tell me how to fix it
Once again, an epic video by KnifeCircus!
yes
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
its a great tutorial thank u for uploading it...I TRIED IT AND IT WORKS SOO FINE!
Whoa bro!! Thank you for making such videos... It's really helpful for JS beginners.
How did you instantly get by just type div#game?
Emmet abreviation from VS or Brackets
what should we press to jump
Nice brother!! You are doing great!!Keep coming with more 😎
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
why's the jumping function not working ? guess. something to do with Mac
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
Super cool. Thanks for the tutorial!
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 👉👈
thanks this is gonna be my first game thanks dood
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
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
let gravity = -0.6; // Gravity is negative, pulling the bird upwards
let jump = 10; // Jump sends the bird downward
let score = 0;
let gameOver = false;
// Bird settings
const bird = {
x: 100,
y: canvas.height / 2,
width: 40,
height: 40,
velocity: 0,
image: new Image(),
};
// Load the bird image
bird.image.src = 'i.imgur.com/3JRIHaF.png'; // Replace with your own bird image
// Pipes (Obstacles) settings
const pipes = [];
const pipeWidth = 50;
const pipeGap = 150;
const pipeSpeed = 2;
function createPipe() {
const pipeHeight = Math.random() * (canvas.height - pipeGap - 100) + 50;
pipes.push({
x: canvas.width,
bottomHeight: pipeHeight,
topHeight: canvas.height - pipeHeight - pipeGap
});
}
setInterval(createPipe, 2000); // Create a new pipe every 2 seconds
function drawBird() {
ctx.drawImage(bird.image, bird.x, bird.y, bird.width, bird.height); // Draw the bird
}
function drawPipes() {
pipes.forEach((pipe) => {
ctx.fillStyle = "#A1887F"; // Pipe color (brown)
// Bottom pipe (obstacle coming from the bottom)
ctx.fillRect(pipe.x, canvas.height - pipe.bottomHeight, pipeWidth, pipe.bottomHeight);
// Top pipe (obstacle coming from the top)
ctx.fillRect(pipe.x, 0, pipeWidth, pipe.topHeight);
});
}
function movePipes() {
pipes.forEach((pipe, index) => {
pipe.x -= pipeSpeed;
if (pipe.x + pipeWidth < 0) {
pipes.splice(index, 1); // Remove the pipe when it goes off-screen
score++; // Increase score when a pipe passes
}
});
}
function checkCollision() {
// Check if the bird hits the ground or ceiling
if (bird.y < 0 || bird.y + bird.height > canvas.height) {
gameOver = true;
}
// Check for collision with the pipes
pipes.forEach((pipe) => {
if (
bird.x + bird.width > pipe.x &&
bird.x < pipe.x + pipeWidth &&
(bird.y < pipe.topHeight || bird.y + bird.height > canvas.height - pipe.bottomHeight)
) {
gameOver = true;
}
});
}
function displayScore() {
ctx.fillStyle = "black";
ctx.font = "30px Arial";
ctx.fillText("Score: " + score, 10, 40);
}
function gameLoop() {
if (gameOver) {
ctx.fillStyle = "red";
ctx.font = "50px Arial";
ctx.fillText("Game Over!", canvas.width / 2 - 150, canvas.height / 2);
ctx.font = "30px Arial";
ctx.fillText("Final Score: " + score, canvas.width / 2 -
Does someone know how i can change the speed of falling down ??
Sir, event listner is not working properly.....what should I do?
what do you click to jump
When I write the first script.js (different hole position) it won't change
When I click the character just stops and does not bounce back up??
I know I'm late, but whenever I click the ball just stops. any suggestions?
Could you start making links to your code?
Dude your explanation is awesome, thanks.
and can you plzz upload a video on " i.o " games ? plzz
how did you make your game web searching? like in google
Can you please tell me how to use an image as your game characters
I think you learn web development in India, Mumbai, am i right?
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
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.
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!
why we use two html two css and two js file
For some reason every time I click, my character just stops moving instead of jumping. If anyone can help in anyway please do. Thanks!
I try this on android but nothing's happened
Can u make a tutorial of basic html games compatible for android
loved it man!
very simple and effective tutorial, keep up awesome games
this is awesome!! But how do you add a sprite to overlap the dot?
Where do i get java script html and cc+apps
Which app are you using which application
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?
what app did you use on creating that game
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?
Thanks a lot, but is it possible to add a bird image like in the real game?
yes instead of background-color use background-image!
what button to the jump
THANK YOUUUUUUUUUUUUUUUUU. you saved my LIFE 😂😍
how can u type the star on keyboard??
shift + 8
Thank you for sharing ur knowledge
Bro it's a miracle cz my name is also Shawn ❤
can you make video how to put web or game in google
Tutorial on How to make a leaderboard? Great vid btw!
Can you make a video about change website theme as your 2nd Version website using css
Sure! Thats an interesting video idea. The way I did it on version 2 probably isn't the best way, so maybe a video showing multiple ways to do it with pros and cons of each!
@@KnifeCircus Thanks
"Uncaught ReferenceError: counter is not defined" please help
This was my first working game :D
how to publish it on google play console?
Thank you!🥰
your videos are really helpful
do you use a mac book or a I Mac
I think I copied the code correctly but when I click nothing happens.
Counter is not defined
Edit: create a VAR named counter and give it a value of 0.
What are the controls
any help my character keeps rising up when i jump
please add code for start ,pause and restart button for any game.
rajendra kumar singh Thats for you to add! im just here to make the games
Awesome videos .... keep going really loving the videos
Glad you like them!
Why mine is not jumping
your website is blocked and the arrows do not work
Next game u can try to make a hangman's game.... Simple hangman's game with just JS...
I love watching your videos! I learned a lot, I'm hoping you will upload another videos sooner!
Really cool video!