The Easiest Javascript Game Ever

[@KnifeCircus]

Im a little dumb and put "%%" instead of "&&" at 7:26... Sorry!

[@NickName-mn6jm]

that was a clear tutorial! Thanks

[@sitadobhal4212]

Ohh😂😂😂

[@ardaturker4775]

lmao same w me

[@bilalnadeem9164]

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

[@denizhalimi387]

I took me a couple of years to figure out that you can actually play that dinosaur. Good times

[@ch3apjoe]

my 10yr old showed me. i had no idea either.

[@TouchcreatorYT]

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

[@dranonjagaming8365]

One day i accidently clicked space when i didnt have internet and i was so shocked

[@bvsanchez6161]

graphics of an atari great back into the 80's

[@Monkey4325]

my uncle showed me

[@arslanmehmood6371]

This was awesome, didn't understand a thing but enjoyed throughout.

[@ElChino.C.D.N]

Same😭😭😂🤣🤣🤣

[@kooxaldoxt5162]

😂😂😂

[@RaeesEditzYT]

😂😂😂

[@Galaxy_World]

Same

[@thedarkbath7728]

Bruuh its true for me dude LMAO

[@uwuggfalcon5540]

That one feeling when you code looks exactly the same but doesn't work

[@KnifeCircus]

I can help! what are you stuck on?

[@uwuggfalcon5540]

@@KnifeCircus whenever I click it won't jump

[@uwuggfalcon5540]

no wait it works now thank you!

[@KnifeCircus]

uwu GGFalcon Sweet!

[@uwuggfalcon5540]

@@KnifeCircus this is a really cool game, I had to do barely any coding

[@Ikgeloofhetniet]

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

[@jayfiled]

I started around the same age and was able to become a web dev - hang in there!

[@gathingstimothy]

37 here too! been a CAD designer for years! Jumped into coding last month

[@lerekomashoeng6921]

there was no coding when you was younger unc

[@lerekomashoeng6921]

damn, long life, more life unc @@gathingstimothy

[@lerekomashoeng6921]

never give up unc! @@jayfiled

[@dorisaerwin]

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!

[@Sandy_Marley]

Can you hold me?

[@suli_jj6025]

@@Sandy_Marley yes

[@nizartarik5858]

So how are u after 1 year

[@thydevdom]

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.

[@DanTheHuman]

Hey did this game work for you

[@BlackDev]

@@DanTheHuman yee

[@DanTheHuman]

@@BlackDev I tried it but it didn't work for some reason, idk what I'm doing wrong

[@BlackDev]

@@DanTheHuman what's it no doing might be able to help

[@BlackDev]

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

[@OSmith301]

This was awesome, thank you! My first JS game :)

[@Nick-td1sh]

Can you help me how can i start the game

[@ameliamargaurite3150]

What a great tutorial, thanks for sharing. Looking forward to making something from this set up.

[@ardeleanion4435]

Did you do it?

[@val_csb630]

@@ardeleanion4435 is that sarcasm I "hear "? LoL 😂

[@the_kid777]

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.

[@isaqueggomes8776]

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); }

[@J1XT3R]

You did it wrong

[@isaqueggomes8776]

@@J1XT3R How so?

[@KnifeCircus]

I really like this change and have updated my code to reflect it!!

[@Joe-od3td]

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!

[@MarcJensan]

In this case, would it not simple be enough to put the timeout function inside the if state?

[@codybradley5652]

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.

[@everyone5200]

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

[@DavidReidChannel]

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

[@useruser-bv1ej]

one of the best and interesting coding tutorials out there! Thank you very much

[@trjblq]

Finally, a quick well explained tutorial. So helpful, cheers!

[@gonzalo_rosae]

great! I loved it, but I wished you would have explained in more detail the functions keep up the good content!

[@KnifeCircus]

Thanks, will do!

[@alonlipiner3606]

@@KnifeCircus im stuck at 2:20 the animation does not work can you help me please?

[@mattjeth]

@@alonlipiner3606 try checking again because this happened to me too lol its kinda embarrassing and frustrating. i put "@@keyframes" instead of "@keyframes"

[@purplaxo]

@@alonlipiner3606 Try to add a ";"

[@juanvazquez5836]

@@alonlipiner3606 same, and I've done like it's shown in the video

[@travnutztv]

for those having issues with any code, I've found that the best way to troubleshoot is via the F12 function on google chrome. find the error, correct mispelling or delete extra characters, all else fails retype the line giving you the error. Idk why but it works... sometimes...

[@StevePaceS]

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!

[@victornaut]

Less than 1 minute into the video and I'm like: I like this guy!

[@perplexingpasta53]

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 :)))

[@Nick-td1sh]

Can you help me how can i start the game or i have a problem

[@HiyokuMakatoYT]

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.

[@CleanDeeds]

I thought: oh this is going to be simple.

[@Vongeance]

Same bro

[@simonriley1981]

When you move on to harder coding this will look super simple

[@Aricade111]

Ty for reigniting my love of JS! I’m so excited to continue progressing

[@rishabhjha9869]

3:38. Sneak 100! Nevertheless, a great video.. Such simple explanations is what people look for.

[@visaogeralservicenow]

Thank you! I'm beginner in JavaScript, and your videos are helping me a lot!

[@Charlie-fx5vs]

This is a wonderful video. I was able to do everything you show me, and more. Thank you so much for sharing it.

[@newintcomm]

A great tutorial. Simple, not long, easy to follow along, without theory and long bla-blas. Great work! Thank you 💓

[@snowflake870]

this deserves a medal for the most unclear tutorial, he isn't even telling us what anything does

[@sterlingday6362]

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

[@adityadwivedi3831]

Can u pls help me My character doesn't jump On click

[@Zaba_the_Dogling]

very good explanation for those who aren’t developers and would like to learn. thank you!

[@paraplu_2839]

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.

[@user-xf7wx3zk8j]

Thank you so much! ive been trying to fix it for a long time

[@namyak-bf9od]

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

[@ViralPanchal97]

Arey Bhai. Ekdum Bawaal. Bole to Ek number.

[@Oddpistachio1]

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!

[@codingwithjeril7091]

same for me

[@oddsandexabytes]

This was great! I wanted to see how a bog simple JavaScript game could be put together and... well, you did it! Thanks 😀

[@WebGame2k]

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.

[@pilgrim9542]

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.

[@DavidJames535]

Me too

[@ShaunHill.]

put the character and block DIVs in between the game divs in the index file. I had the same problem at first!

[@NotBlazerMC]

Wow, Javascript is indeed very easy to learn

[@jaylenjames364]

Please keep making videos like this. Thank you.

[@HyperionBadger]

See.. this is how a coding tutorial video is made. Literally step by step, watching you code in real time. Well done.

[@KnifeCircus]

thank you! thats what I was going for! you made my day

[@your.free.electrons]

This is really amazing :D

[@waldomorales3281]

Keep it up bro, got me inspired to go and try it myself!!

[@icantthinkofaname5440]

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?

[@mediumshrimp9696]

Having same problem.

[@rafaelbocsa781]

Same for me and I have no idea why

[@rafaelbocsa781]

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 :)

[@devangnagvenkar3765]

Just replace the 'is' with 2000ms

[@m0nz13]

I followed u thru the HTML/CSS bit completely lost at JS 😂 don’t worry tho I’ll get there. Looks fun to try!

[@rohinimallem7826]

Soo easily understood, thank you

[@معتصممنصور-ش7ن]

I like the game, I apply it on VS Code My suggestion when alert appear after the collide, it remove animation property and give back again like this: if(blockLeft>0 && blockLeft130) { block.style.animation='none'; block.style.left='480px'; alert('U Lose') block.style.animation='block 1s linear infinite 1s'; } the 1s at the end of animation property is a delay to allow the user to prepare for next round

[@lacampanadorada]

Very kindly thank you man!

[@delta_nightz]

Nobody : Literally nobody : Shawn : "it uses only 10 lines of javascript " . . . . Me : oh i seeeeee🙂🙂

[@spirit469]

Lmfao

[@adeshshah8537]

Proud of you, Professor Shawn!

[@masonhess1654]

3:40 a nice little spit too

[@tomasvenegas6062]

Wow, this code is really cool, i'm just learning javascript and this is something really impressive. Thanks a lot for the video!

[@KnifeCircus]

Glad you enjoyed!

[@tomasvenegas6062]

[@jacoblockwood4034]

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?

[@KnifeCircus]

are the block and character divs inside of the game div? is everything position: relative?

[@txubbsy]

This was so awesome. Had so much fun and learned a lot. Thank you so much.

[@f0urO4]

thanks I learned alot!

[@4n0nym0u5]

Thank you for this very educational tutorial. Keep up the good work!

[@josephlee8944]

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!

[@xxninja500xx7]

i dont know but if you want add image do

[@princeoftherealm]

Imagine not owning a game, and out of nowhere you're like: fuckit. imma make it myself

[@mp_decarvalho]

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

[@johnryan5361]

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!

[@ryangilcabatuan329]

dude you're a lifesaver. hoping for more awesome content.

[@worldofcarsCA]

kzbin.info/www/bejne/b3XRdHahpNiBmcU

[@bitterbacon5408]

This really help me to star a basic game thank you

[@kristinscott7156]

Awesome video - put so many concepts together and introduced new ones. THANK YOU!

[@djblobby]

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.

[@Elisei36]

SAME!!!!!

[@nikhilrajmehta2824]

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

[@IOAN2ER]

You just stole a like from me! :))

[@kamrankhanofficials]

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.

[@gurukirans266]

@@kamrankhanofficials he mean this video is awesome and he can't go without giving a like

[@reymarckessaguirre5082]

Kamran Khan, if you don’t have one, I’ll try to be your friend.

[@kamrankhanofficials]

@@gurukirans266 Oh I missed the 'like' from this statement, lolx

[@firefox3155]

This is so cool! only ive been sitting here for 30 minutes trying to find my mistake, because the blue block wont move... I got the red block to jump though so I am confused.

[@draweasynow2077]

When i first added the jump thing it didn't work and said it was not defined how do i fix this???

[@electronicfun9296]

can you post code here

[@prexverdeflor01]

same dude

[@bambinoesu]

@@prexverdeflor01 he declared a class name .animate on css but not on the html. so i created the class="animate" and added it on the character div on the html file

[@bambinoesu]

he declared a class name .animate on css but not on the html. so i created the class="animate" and added it on the character div on the html file

[@pezcue937]

I am on a quest to find how I can make an array that contains multiple blocks so I can send sets of 2 or 3 blocks This is all I wanna do to it: - Change the image of the blocks using background-image:url("...ruta de la imagen "); - make a double jump by double clicking - make a better trigger for you lose - make more randomized blocks coming in the way of the character block. havent had any luck, I still dont understand JS that much lol

[@Merrical]

3:36 spit

[@rarcarat5097]

I saw that too XD

[@incia.8469]

me watching this at 1am and understood everything, thanks man

[@fabdvl]

Do you actually memorize all of these weird codes or just check them out while programming?

[@mikuculus3720]

Memorize it like English

[@morathanan]

Man, its the first time i come across your channel, and i have one request: Please make more of this. You're amazing.

[@ricardoroshen8615]

Hanan Morat u can check out more of these kind of vids in his channel

[@salmanadil4947]

on click its not jumping what can I do????

[@DUO_QUEST]

me too trying to find the answer :(

[@bouchetouche]

same

[@lamborghinicentenario2497]

Try refreshing the page. It's probably you already clicked, and you can only click once to get the animation.

[@spaaaaace8952]

Instant subscribe. Great tutorial, friend.

[@Daniel-mq3qb]

Thank you for putting that up. The condition character.classList != "animate" will always be false, because classList is actually a list (DomTokenList). You can change it to character.classList.contains("animate").

[@zai_ry11]

Thanks mate! Commenters like you are lifesavers

[@QackCoin]

This is letarlly scam guys i lost my all qack coin and i got virus

[@wildebtw]

Thanks. Needed this to flip the switch on as to how js works. I appreciate your upload. Cheers

[@User--died1234]

hey, great video and explaination . hoping to see more such bit sized videos like these .love from india:)

[@musicforsoul123]

One of the best and coolest js tutorial

[@reportaccounthcc2463]

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 😄

[@teflonrozay1074]

I swear! Ev

[@antnovs]

I found this hard, imagine the people making The Witcher games or God of War....

[@myknoxvilleliving]

Thank you so much, I learned so many things!

[@jimmyjillion4541]

Wow this helped me so much! I really appreciate the amount of effort you put into this video So keep the legendary work up! Bye!

[@Eatrice1]

everything worked fine but i had a problem with css but overall great tutorial

[@AddSomeChips]

My first time even looking at javascript thanks for making it soo simple 🙏

[@marienixon148]

So cool! Going to give this a go. Subscribed!

[@John-Wilkins]

You're an inspiration dude!

[@SakthivelNadar]

I made the game like a dino(instead of dina a red face guy) with score show and i am working in saving the game score to device storage so we can retrieve the high score data and can modify that when you beat that!!!!

[@caleyCodeLab]

Really like your channel man

[@jayagarwal9759]

Thanks man! This helped a lot.

[@buildev22]

Extra little something I did: after *alert("U Lose!")* put *location.reload()* this will make it so when the user clicks the ok from the alert it reloads the browser.

[@qqqqqq262]

i love this video! plz continue this contents!

[@vaibhavpatil1916]

Smartly u make in 8 mins it's knowledgeable and helpful

[@seemaagarkar7967]

Guys if you have written your code till 5:30 but your red block doesnt jump, try left clicking your mouse ;)

[@alessandrocomita5771]

Very interesting, I learned some useful concepts, thank you KnifeCircus!

[@vicais9146]

I loved it! Thank you, I will try tomorrow on my free time at my job.

[@vicais9146]

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

[@orangeystudios2070]

“…even for someone who’s never coded before.” *does 500 unfollowable things in 2 seconds*

[@manuelpedrobelli5043]

Thanks for the video, it help a lot. Cheers from argentina

[@proventhrower3858]

Me over here thinking what I was doing was hard than this guy comes out here

[@Nairuulagch]

Thank you for this coolest lesson!!

[@converter8230]

You can explain very well, thanks!

[@ronnelmacompas1647]

Thank you very much. It's easy to understand.

[@Tom23313]

I’m stuck ! When I type 0% and 100% for the animations, the numbers aren’t highlighted and nothing happenes to the game ( no animation ) I’ve copied exactly , any ideas ?