here is the javascript code document.addEventListener("keydown", event => { if(event.key==="ArrowLeft"){moveLeft();} if(event.key==="ArrowRight"){moveRight();} }); var character = document.getElementById("character"); function moveLeft(){ let left = parseInt(window.getComputedStyle(character).getPropertyValue("left")); left -= 100; if(left>=0){ character.style.left = left + "px"; } } function moveRight(){ let left = parseInt(window.getComputedStyle(character).getPropertyValue("left")); left += 100; if(left { var random = Math.floor(Math.random() * 3); left = random * 100; block.style.left = left + "px"; counter++; }); setInterval(function(){ var characterLeft = parseInt(window.getComputedStyle(character).getPropertyValue("left")); var blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left")); var blockTop = parseInt(window.getComputedStyle(block).getPropertyValue("top")); if(characterLeft==blockLeft && blockTop300){ alert("Game over. Score: " + counter); block.style.animation = "none"; } },1); document.getElementById("right").addEventListener("touchstart", moveRight); document.getElementById("left").addEventListener("touchstart", moveLeft);
You could have just added "overflow:hidden" to the game div so that the block doesn't appear when it goes out of it, nice video though. It helped me alot keep going ;)
Completely loved it.;.actually ended up playing the game for close to 20 times (sue me; i was idle).;; relatively new at coding but your videos give me motivation to learn more
For everyone listen here go to gamediv in style.css type "overflow:hidden". If you die to late and when te block is gone and you move to there and still die listen. At 6:30 you see blockTop300 remove the digits and paste blockTop200 NP
Please make more game tutorial like this....not fast coding type tutorial.... because in this tutorial you explain very well(I understand these types of vid)
Don't listen to the haters. That was a game. I appreciate you teaching people how to make JS games. That dinosaur game is a game, When a beginner programmer makes a game it doesn't has to be the next GTA game, it can be really basic as long as the beginner programmer learns from their mistakes and then makes a non basic game
3:33 the best way i will say it's 'overflow: hidden;'. I like your tutorials because they are good for beginners and people can do whatever they want with the code!👑
In the minute 4:01 I think that we can just use overflow:hidden in the game div to prevent the block to outside from its parent, this is more easy than using new white block
can you please tell me me why my code is not working. I looked all of your tutorials how to make dinosaur game, flappy bird and many more non of them work. TELL ME!!!!!!!!!!!!!
In case of the block, you should add to the game id an overflow: hidden; Though, I love your content! Continue to post videos it helps me to learn a lot!!
Instead of having a white div to hide the the block you can go to the css property of the #game and add overflow hidden Edit: just noticed someone had this idea sorry
Good work broo and thanks a lot, but I think that you have some mistakes in your css code, when you used position:relative with character div , it takes his right positio correctly, but when you added the block div, the character had translated to the bottom with 100px, so if we want to correct this mistake we must add relativeposition to the parent div and the we must use the same values of left and top properties with character div but with the absolute position, it will be right
Bro your video is just nice. But I stucked in a problem. My blocks and character are not appearing inside the game area. Block is coming in extreme right and character downside. And only one block of starting at left is only appearing and after the whole coding, three blocks are not appearing and character is also not bumping into block. My animation is also just opposite from you.... Bro just help me how to solve it!??.....
var block = document.getElementById("block"); block.addEventListener('animationiteration', () => { var random = Math.floor(Math.random() * 3); left = random * 100; block.style.left = left + "px"; }); idk what im doing wrong
Can you show us how to make 3D games with 3D divs? I saw an abandoned project that did this.. I wished it wasn't abandoned because I really wanna know how to make 3D div games :D Edit: Can you also make an in depth collision detection tutorial?
Hi, I have been learning quite a lot from your videos! I have been struggling quite a lot with the idea of increasing animation speed every 10seconds. I tried adding the code below at the bottom of js file.. it does increase the speed every 10 seconds but the change is async with animation.. it occurs randomly & not at the very top var animationDuration=1000; VariableSpeed=setInterval(()=>{ block.style.animationDuration=animationDuration+"ms"; animationDuration-=50; },10000)
here is the javascript code
document.addEventListener("keydown", event => {
if(event.key==="ArrowLeft"){moveLeft();}
if(event.key==="ArrowRight"){moveRight();}
});
var character = document.getElementById("character");
function moveLeft(){
let left = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
left -= 100;
if(left>=0){
character.style.left = left + "px";
}
}
function moveRight(){
let left = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
left += 100;
if(left {
var random = Math.floor(Math.random() * 3);
left = random * 100;
block.style.left = left + "px";
counter++;
});
setInterval(function(){
var characterLeft = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
var blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
var blockTop = parseInt(window.getComputedStyle(block).getPropertyValue("top"));
if(characterLeft==blockLeft && blockTop300){
alert("Game over. Score: " + counter);
block.style.animation = "none";
}
},1);
document.getElementById("right").addEventListener("touchstart", moveRight);
document.getElementById("left").addEventListener("touchstart", moveLeft);
You could have just added "overflow:hidden" to the game div so that the block doesn't appear when it goes out of it, nice video though.
It helped me alot keep going ;)
i tried this but the box still goes past the border but if it worked for you thats cool! :D
Completely loved it.;.actually ended up playing the game for close to 20 times (sue me; i was idle).;; relatively new at coding but your videos give me motivation to learn more
Great video!
Just a suggestion, for hiding the black block out of your game frame you can set "overflow: hidden;" to your game div.
I knew I was being dumb.... haha good call
You are not dumb bro! , Maybe you r good as a backEnd
thank you for making so many simple projects it has really helped me
same
🤯
slide animation is not working and the charracter and the block is not showing in the border
For everyone listen here go to gamediv in style.css type "overflow:hidden".
If you die to late and when te block is gone and you move to there and still die listen.
At 6:30 you see blockTop300 remove the digits and paste
blockTop200 NP
Please make more game tutorial like this....not fast coding type tutorial.... because in this tutorial you explain very well(I understand these types of vid)
Don't listen to the haters. That was a game. I appreciate you teaching people how to make JS games. That dinosaur game is a game, When a beginner programmer makes a game it doesn't has to be the next GTA game, it can be really basic as long as the beginner programmer learns from their mistakes and then makes a non basic game
You are the best person ever on TH-cam
3:33 the best way i will say it's 'overflow: hidden;'. I like your tutorials because they are good for beginners and people can do whatever they want with the code!👑
ya im dumb lol
@@KnifeCircus no i think people can improve that self.👍
Great way of presenting! Awesome video, keep up the good work.
These simple projects beginners friendly & huge help thanks a lot
Hey, can you also write the link to the files so that we can download the game files and then start them on our browsers?
CTRL + S on the webpage saves the webpage. This works for every web page I've ever tried it on.
My right arrow did not work
Dont change all left word to right change only moveLeft to moveRight and left -= 100; to left += 100;
In the minute 4:01 I think that we can just use overflow:hidden in the game div to prevent the block to outside from its parent, this is more easy than using new white block
thanks for great idea!)
can you please tell me me why my code is not working. I looked all of your tutorials how to make dinosaur game, flappy bird and many more non of them work. TELL ME!!!!!!!!!!!!!
send me pictures of your code on instagram or twitter and i can help!
In case of the block, you should add to the game id an overflow: hidden; Though, I love your content! Continue to post videos it helps me to learn a lot!!
Thank you bro for making this simple javaScript game. It's run perfectly..😍
Which type of text editor or brawsoe you used for coding???
Please reply......🤪🤪
Ayush Raj I use brackets.io
Bro this is a service to the people.
My character doesn’t move when I click the arrows, and I’ve copied the code word for word
Instead of having a white div to hide the the block you can go to the css property of the #game and add overflow hidden
Edit: just noticed someone had this idea sorry
Finally, I can play a game with 0 (1) ping!
But isn't the original Subway Surfers made with JavaScript and Unity?
I am having issue that the block is getting any random position but it is supposed to be taking a space of 100px pls tell me how to fix it
where did you learn all this can you pls tell me i wanna know
You make gaming look so easy :) Just subscribed your channel, waiting for new videos.
Thank you very much for this 🙏🏾🙏🏾🙏🏾💪🏾💪🏾💪🏾
did you use visual studio code for that?
How to strong front end web development
My skill is week
So please help me
What way I get
This is cool for us beginners. Thank you for these videos 😊
How do we add sprint aniamtion to it
to make it look cool
I remember this guy from his chirstmas vids
Thank you. Only problem is that sometimes when you're typing the code, it gets cut off and I can't read it
But.i have a prob in my.project when i run after the random thing it shows cant read property event listener of none
how did you put your web in google?
I like that he included the code for iOS
Hi! Im interesting, why do you write code with id but no with class?
Need more awesome tutorials!!😁
Bro...
please create a big Game...
We need more prectice.....on js...
It's really excites me.
..
My block appears in the wrong position, how do I fix this?
same
Try changing the top of your block. See if that works
Which app did you use
Hello, how can I create the word hunt?
Good work broo and thanks a lot, but I think that you have some mistakes in your css code, when you used position:relative with character div
, it takes his right positio correctly, but when you added the block div, the character had translated to the bottom with 100px,
so if we want to correct this mistake we must add relativeposition to the parent div and the we must use the same values of left and top properties with character div but with the absolute position, it will be right
Can you please once again show the whole coding.
That would be gratefull
It wasn't working
Bro your video is just nice. But I stucked in a problem. My blocks and character are not appearing inside the game area. Block is coming in extreme right and character downside. And only one block of starting at left is only appearing and after the whole coding, three blocks are not appearing and character is also not bumping into block. My animation is also just opposite from you.... Bro just help me how to solve it!??.....
Nice to see you again. 😎
Laney Perry Thanks for having me! 😄
can u make a vid for how to install javascript
00:12 lol i was like i clicked on the wrong video
RICH HOMIE SHAWN 🤣 it’s Zoe’s cousin kenzie glad to see you’re still on TH-cam!!
haha wuz good
This is amazing! Make more videos!
How to run this game on phone
bro nice tutorial u go very fast
Awesome bro !👌 Excellent..
when he said what the function does
I thought he said what the fuck does
That was really interesting. Thanks for sharing!
Martín Rodríguez Thanks for watching!
how to add some random time for some powers to spawn on the track??
Good videos but I don't understand the hit detection though
pls show full of code
this is your mistake
Please make like this small videos.
for us like beginner. to catch up with javascript
You are really awesome
*_-Good?-_*
Can someone give me the full code please?
It would be nice to do any of your games whit canvas, it awesome thanks for sharing!!
var block = document.getElementById("block");
block.addEventListener('animationiteration', () => {
var random = Math.floor(Math.random() * 3);
left = random * 100;
block.style.left = left + "px";
});
idk what im doing wrong
Same
make sure You are desperate space between = and > must to be =>
what application do you use to code ?
Brackets
thankyou... next time a 2d car game with simple js htms and css....make it easie to read
Can you show us how to make 3D games with 3D divs? I saw an abandoned project that did this.. I wished it wasn't abandoned because I really wanna know how to make 3D div games :D
Edit: Can you also make an in depth collision detection tutorial?
Where is the cop?
please do this also on jquery
Link to source code
Really nice one
i watched the whole video and i made the game
Good video man
Awesome
You must definitely try MINECRAFT usinv JS, HTML , etc.
It's amazing bro 🤜
add score indications, more elvels, sound etc :D
can you share your github account?
Yeah hopefully maybe he'll do that to me too◉‿◉
instead of placing a div below to cover it'd be simpler to set overflow hidden on the game div :)
the index.html is blank wont work
send me a message on twitter or instagram! id love to help you!
maannnn!! the character goes down when the obstacle came in
Change characters top to
300px
It will be fixed
A very nice game
Nice video
Oh snap Ohkay tee still in here stylecircus 😎🎪
Michael Anthony oh damnnn you remember 🤣
Ever end up getting that Supreme ball?
Pleaee remake this game using mobile phone only.
How can i use it on my phone???
you cant
you can use on your browser
bro can you make a facebook instant games withe javascript
Pls make minecraft using js
thank you
Nandraki.js use css,js,htm game
Pl 3d version of it
Find a perfect name for it it will be cool
Hi, I have been learning quite a lot from your videos! I have been struggling quite a lot with the idea of increasing animation speed every 10seconds. I tried adding the code below at the bottom of js file.. it does increase the speed every 10 seconds but the change is async with animation.. it occurs randomly & not at the very top
var animationDuration=1000;
VariableSpeed=setInterval(()=>{
block.style.animationDuration=animationDuration+"ms";
animationDuration-=50;
},10000)
O yea, what you did would only make the animation 950ms every 10 seconds, not increase the speed every 10 seconds!
please speak game style guitar flash ?
thanks a lot
hey knife circus the bagler the bagel will get you tonight your so scared
itds a nice game
nice