The Easiest Javascript Game Ever
Vložit
- čas přidán 28. 06. 2024
- In this video I show you how I created the most basic, simple javascript game that you can make yourself. It's similar to the google dinosaur game that you play when there's no internet.
If you're trying to code this and get stuck watch this video before you give up: • Web Development: How t...
LINK TO TRY THE GAME: beat0154.github.io/easiest-ga...
LINK TO THE CODE: github.com/Beat0154/easiest-g...
Follow me below and reach out if you need any help!
Twitter: ShawnJBeaton
Instagram: ShawnJBeaton
I create javascript games in their simplest form using only html divs and css animations. They can still be quite fun, and beginner javascript developers can follow along and hopefully learn! - Věda a technologie
Im a little dumb and put "%%" instead of "&&" at 7:26... Sorry!
that was a clear tutorial! Thanks
Ohh😂😂😂
lmao same w me
lol yeah I saw that but I know enough to know that was a mistake no worries tho this was a great tutorial I loved it thank you!
cmon bro
That one feeling when you code looks exactly the same but doesn't work
I can help! what are you stuck on?
@@KnifeCircus whenever I click it won't jump
no wait it works now thank you!
uwu GGFalcon Sweet!
@@KnifeCircus this is a really cool game, I had to do barely any coding
I took me a couple of years to figure out that you can actually play that dinosaur.
Good times
my 10yr old showed me. i had no idea either.
When I was 5 me and my brother were so bored with no internet, we decided to spam keys and that's how we found out about the dinosaur game
One day i accidently clicked space when i didnt have internet and i was so shocked
graphics of an atari great back into the 80's
my uncle showed me
This was awesome, didn't understand a thing but enjoyed throughout.
Same😭😭😂🤣🤣🤣
😂😂😂😂😂
😂😂😂
😂😂😂
Same
very easy to follow. I like how you just got us through it instead of trying to explain every concept. I think for someone starting out, that's helpful to build up some confidence and stop from getting overwhelmed.
Learning Javascript and have been nervous in creating my first game. THANK YOU for making this project fun and easy. Motivates me to continue learning Javascript and other coding languages!
Can you hold me?
@@vincentgallagher_ yes
So how are u after 1 year
Your way of teaching is really good, you create things, and then tells what you add to it, its a pretty efficient and straight forward way, congrats
What a great tutorial, thanks for sharing. Looking forward to making something from this set up.
Did you do it?
@@ardeleanion4435 is that sarcasm I "hear "?
LoL 😂
Bruh. Please keep making these. Simple things like this are really helping me out. A lot of “game tutorials” are like 100 lines long and as a newb that’s just too much to take in. You definitely earned a new subscriber.
Hey did this game work for you
@@DanTheHuman yee
@@BlackDev I tried it but it didn't work for some reason,
idk what I'm doing wrong
@@DanTheHuman what's it no doing might be able to help
@@DanTheHuman if on vscode make sure you get the extension to make Life easier most of my errors if not all are grammar as you can tell I hate punctuation haha but butify,spellcheck and other extension help cover my tracks
I am 37 years old and I have been learning to code for a few months. I love it and can't believe I never considered doing this when I was younger! Anyway, this is the best coding channel I have come across so far. Thank you for doing this!!
I started around the same age and was able to become a web dev - hang in there!
37 here too! been a CAD designer for years! Jumped into coding last month
there was no coding when you was younger unc
damn, long life, more life unc
@@gathingstimothy
never give up unc!
@@jayfiled
This is a nice little demo that shows how easy it is to create simple web games with a little html, css and javascript. Nice work and thanks for sharing. :-)
one of the best and interesting coding tutorials out there! Thank you very much
Finally, a quick well explained tutorial. So helpful, cheers!
Well done, very good explanation and kept as simple as possible. It was perfect as it gave me everything I needed to get started. Thank you!
This was awesome, thank you! My first JS game :)
Can you help me how can i start the game
Man, its the first time i come across your channel, and i have one request: Please make more of this. You're amazing.
Hanan Morat u can check out more of these kind of vids in his channel
Out of the many videos out there on similar topics, the reason I chose this particular video was because you were... smiling! That's quite literally why I chose to watch this. I mean, you simply look happy while creating the game, and that naturally makes me want to join you. Thanks for the nice video.
A great tutorial. Simple, not long, easy to follow along, without theory and long bla-blas.
Great work! Thank you 💓
This is a wonderful video. I was able to do everything you show me, and more. Thank you so much for sharing it.
Ty for reigniting my love of JS!
I’m so excited to continue progressing
Thank you for this very educational tutorial. Keep up the good work!
Just a minor error I saw: At 5:22 it didn't really solve the spam problem as even though it doesn't execute it if it contains the class the setTimeout function would still keep executing, glitching it a bit. To solve it I just added "if (character.classList.contains("animate")){return}" in the start so it returns if it has the class.
function Jump(){
if (character.classList.contains("animate")){return}
character.classList.add("animate");
setTimeout(() => {
character.classList.remove("animate")
}, 500);
}
You did it wrong
@@J1XT3R How so?
I really like this change and have updated my code to reflect it!!
Hi, surely you only want to return:
character.classList.add("animate");
setTimeout(() => {
character.classList.remove("animate")
}, 500);
}
If the character does NOT contain animate class?
Thanks!
In this case, would it not simple be enough to put the timeout function inside the if state?
Hey i just tried this and this was amazing! Can't believe how simple and fun this was to make. Imma try to add more customisations to my character.
Thanks a lot for this :)))
Can you help me how can i start the game or i have a problem
Thank you! I'm beginner in JavaScript, and your videos are helping me a lot!
This was great! I wanted to see how a bog simple JavaScript game could be put together and... well, you did it! Thanks 😀
Less than 1 minute into the video and I'm like: I like this guy!
Awesome video - put so many concepts together and introduced new ones. THANK YOU!
very good explanation for those who aren’t developers and would like to learn. thank you!
This is really amazing :D
Soo easily understood, thank you
Proud of you, Professor Shawn!
This was so awesome. Had so much fun and learned a lot. Thank you so much.
great! I loved it, but I wished you would have explained in more detail the functions
keep up the good content!
Thanks, will do!
@@KnifeCircus im stuck at 2:20 the animation does not work can you help me please?
@@alonlipiner3606 try checking again because this happened to me too lol its kinda embarrassing and frustrating. i put "@@keyframes" instead of "@keyframes"
@@alonlipiner3606 Try to add a ";"
@@alonlipiner3606 same, and I've done like it's shown in the video
thanks I learned alot!
Keep it up bro, got me inspired to go and try it myself!!
Thanks. Needed this to flip the switch on as to how js works.
I appreciate your upload.
Cheers
Please keep making videos like this. Thank you.
3:38. Sneak 100!
Nevertheless, a great video..
Such simple explanations is what people look for.
I am decent at Web Development but when it comes to games im not so good. Thanks for the tutorial! It helped me alot.
Thank you so much, I learned so many things!
I thought: oh this is going to be simple.
Same bro
When you move on to harder coding this will look super simple
This really help me to star a basic game thank you
Thanks man! This helped a lot.
Arey Bhai. Ekdum Bawaal. Bole to Ek number.
3:40 a nice little spit too
Great video! How can you add image instead of the red and blue blocks. For some reason, when I insert an image in css, the space is blank in webpage. Thank you!
i dont know but if you want add image do
Pretty cool idea and some nice starter code explanations. Some of the JS code used is legacy code that isn’t good practice to use these days but I assume you’d be new to JS if you’re looking at this video (or just intrigued like me) so it wouldn’t matter, and the reasoning you’ve given behind the code will never go out of date 😄
I swear! Ev
See.. this is how a coding tutorial video is made. Literally step by step, watching you code in real time. Well done.
thank you! thats what I was going for! you made my day
This game works! 2 words of advice: 1) DO NOT PRESS THE SPACE BAR. "ONCLICK" MEANS YOU PRESS IT WITH YOUR MOUSE KEY! 2) Pay close attention and code "1sec" and not "isec".
Can u pls help me
My character doesn't jump
On click
whenever i run the code, it just shows a white screen and i copied the code from you so i dont know why it did that.
SAME!!!!!
for those of you that might have been having issues getting it to show the alert when you die, check that the lines:
> block.style.animation = "none";
> block.style.display = "none";
actually have the " " or quotation marks.
I didn't have the quotation marks and it was causing an issue. By checking the Developer Tool (F12 on Chrome) it showed that my script.js was having an unhandled error.
Very simple, yet very informative and helpful for the future, thanks a lot for the share
Hi! I think this is a great tutorial, but it doesn't work right on my software. I followed this tutorial using the JSAnywhere app on my iPad. The issues are that
A. the character and block don't go inside the game box, but under it.
B. The block disappears when I add the jump animation to the game.
C. The character will go to the beginning of the jump animation even when it's still in the air.
Maybe you can tell me why this might be happening in a reply?
are the block and character divs inside of the game div? is everything position: relative?
When I got to the part where the blue block was supposed to slide over to the other side it wouldn’t move? I put infinite and linear like you did and I’ve checked it multiple times and can’t seem to find anything wrong with the code. What should I do?
Having same problem.
Same for me and I have no idea why
OHHHH i just figured it out. So you need to write block 1s infinite linear aka one second. I thought it was is like is infinite but nah.
Hope this helps others :)
Just replace the 'is' with 2000ms
Thanks for the this amazing tutorial, I actually learned something there
Thank you very much. It's easy to understand.
When i first added the jump thing it didn't work and said it was not defined how do i fix this???
can you post code here
same dude
little tip: at 5:15 he only puts the first part of the function in the if statement, so if you spam hard enough it still breaks.
The simplest fix i found is to just put the second part (the one that removes the animate class) also inside of the if statement.
Thank you so much! ive been trying to fix it for a long time
An even better tip is to copy it and have it inside and outside the if statement. That way if you build the program and there's multiple ways to achieve the animate class, it still gets removed and you won't have a bug there
Thank you for this coolest lesson!!
So cool! Going to give this a go. Subscribed!
I'm having 2 problems:
1) I can't get the character and block in the border.
2)When I started making the character jump, the block disappeared.
And when I checked the console, these weren't errors.
Edit: My character doesn't doesn't move and the block doesn't appear
Also I'm using android 10.
Hey bud, I'm a pretty new developer myself but I also had the first problem. I solved it by making the margin 10px instead of zero, as zero made it so the border went right along the axis and didn't show it. I'm not sure about the second point though. Hope this helps.
Me too
put the character and block DIVs in between the game divs in the index file. I had the same problem at first!
Nobody :
Literally nobody :
Shawn : "it uses only 10 lines of javascript "
.
.
.
.
Me : oh i seeeeee🙂🙂
Lmfao
You can explain very well, thanks!
Great tutorial, easy to understand.
3:36 spit
I saw that too XD
You just stole a like from me! :))
doesn't matter that anyone is sharing, it's not stealing, its education to share, u should be happy if he has learned from u.
@@kamrankhanofficials he mean this video is awesome and he can't go without giving a like
Kamran Khan, if you don’t have one, I’ll try to be your friend.
@@kamrankhanofficials wooosh
@@gurukirans266 Oh I missed the 'like' from this statement, lolx
THNX this helped me a lot
dude you're a lifesaver. hoping for more awesome content.
czcams.com/video/9DnCCkosNcc/video.html
me pretending i can understand everything
Edit: I've been trying to learn how to code for a long time but it keeps overwhelming me and I'm never successful oof
just take it a step at a time. Learn the basics of HTML and CSS for a few weeks. Do some projects with static display webpages. Then start learning fundamentals of JS, make a fun onClick button animation on that same website or use CSS keyframes to make a moving background. When you have that you can start learning about 3rd party API's and server side API's so you can pull really cool information from another website (say you made a music appreciation website and you wanted to use the youtube, or new york times API to pull the latest videos and articles about a certain band up on your page if a visitor searched for them on your site) i found Express.js made this pretty simple. After that I started looking into SQL and mongoDB, frameworks like Angular and React, how to make my site progressive(like how amazon saves stuff to your cart even after you leave the page)... Then you have to learn state... I'm sorry you have to learn state but its necessary. The cool thing about coding is you can learn stuff when you need it. Like if you want a project of yours to do something cool, spend a few hours on google searching for a tool that does that for you. Then read about how to use it and watch some youtube videos on how to implement it. There are so many amazing tools out there FOR FREE that will let you do anything you want!
Do you actually memorize all of these weird codes or just check them out while programming?
Memorize it like English
My first time even looking at javascript thanks for making it soo simple 🙏
Fun project. well explained. Thanks!
on click its not jumping what can I do????
me too trying to find the answer :(
same
Try refreshing the page. It's probably you already clicked, and you can only click once to get the animation.
This is letarlly scam guys i lost my all qack coin and i got virus
QackCoin on top!
Really like your channel man
Good job! well explained.
One of the best and coolest js tutorial
Wow, super cool! Thanks a lot!
nice and simple ,relaxsing video
Instant subscribe. Great tutorial, friend.
i love this video! plz continue this contents!
good tutorial! made my first game
Wow, this code is really cool, i'm just learning javascript and this is something really impressive. Thanks a lot for the video!
Glad you enjoyed!
Thank you so much Shawn ^^
cool example! It was fun to watch. Thak you very much!
Thank a lot! Very funny game! Nice for the beginners!
Good job! I'd probably just compare if those two blocks are colliding without the magic values so we could adjust the style and still not break the game.
I love this type of short video.. Made by you....You got a new subscriber.. That's me.. Hat's 🎩 off to you.. Amazing video.. And love from India. 🇮🇳
Awesome video thanks for uploading
Thank you very much , amazing ! 🔥
I followed u thru the HTML/CSS bit completely lost at JS 😂 don’t worry tho I’ll get there. Looks fun to try!
Thanks, man! This was very helpful! I've done some web programming, but I need to improve my Javascript skills. HTML and CSS are way easier for me, but I am learning JS!
same for me
me watching this at 1am and understood everything, thanks man
Very interesting, I learned some useful concepts, thank you KnifeCircus!
I loved it! Thank you, I will try tomorrow on my free time at my job.
I cannot see the blocks. The alert(game over) runs and I got 1 point on the score. But the only css that I can see is the .game part, a 1px solid black
Thank you, very good tuttorial!
Raffert thanks!
Thank you bro it was very helpful
This is amazing! How would you add the icons like in the original game for example? :) love your work
That's very useful to newbie coders
Thank you so much for this tutorial