The Easiest Javascript Game Ever

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!

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

[@user-cx6ik6ks6z]

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

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

[@arslanmehmood6371]

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

[@axel.z932]

Same😭😭😂🤣🤣🤣

[@palaksharma4973]

😂😂😂😂😂

[@kooxaldoxt5162]

😂😂😂

[@RaeesEditzYT]

😂😂😂

[@Galaxy_World]

Same

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

[@vincentgallagher_]

Can you hold me?

[@suli_jj6025]

@@vincentgallagher_ yes

[@nizartarik5858]

So how are u after 1 year

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

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

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

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

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

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

[@useruser-bv1ej]

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

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

[@OSmith301]

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

[@Nick-td1sh]

Can you help me how can i start the game

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

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

[@trjblq]

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

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

[@eng2grow]

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

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

[@4n0nym0u5]

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

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

[@victornaut]

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

[@visaogeralservicenow]

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

[@oddsandexabytes]

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

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

[@rohinimallem7826]

Soo easily understood, thank you

[@wildebtw]

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

[@Aricade111]

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

[@your.free.electrons]

This is really amazing :D

[@f0urO4]

thanks I learned alot!

[@kristinscott7156]

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

[@nightwaves6089]

I am decent at Web Development but when it comes to games im not so good. Thanks for the tutorial! It helped me alot.

[@rishabhjha9869]

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

[@jaylenjames364]

Please keep making videos like this. Thank you.

[@Zaba_the_Dogling]

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

[@waldomorales3281]

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

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

[@ignatiusnwankwo415]

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

[@sertanlagarza4758]

Very simple, yet very informative and helpful for the future, thanks a lot for the share

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

[@bitterbacon5408]

This really help me to star a basic game thank you

[@spaaaaace8952]

Instant subscribe. Great tutorial, friend.

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

[@masonhess1654]

3:40 a nice little spit too

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

[@danielsedoyeka6501]

Thanks for the this amazing tutorial, I actually learned something there

[@myknoxvilleliving]

Thank you so much, I learned so many things!

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

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

[@AddSomeChips]

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

[@jayagarwal9759]

Thanks man! This helped a lot.

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

[@prexxx4638]

same dude

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

[@adeshshah8537]

Proud of you, Professor Shawn!

[@user-xf7wx3zk8j]

Thank you so much for this tutorial

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

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

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

[@houseguest5090]

Fun project. well explained. Thanks!

[@Merrical]

3:36 spit

[@rarcarat5097]

I saw that too XD

[@delta_nightz]

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

[@spirit469]

Lmfao

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

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

[@fabdvl]

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

[@mikuculus3720]

Memorize it like English

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

[@appleyt6757]

@@kamrankhanofficials wooosh

[@kamrankhanofficials]

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

[@musicforsoul123]

One of the best and coolest js tutorial

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

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

[@salmanadil4947]

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

[@Sahil_dhankecha]

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.

[@converter8230]

You can explain very well, thanks!

[@marienixon148]

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

[@QackCoin]

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

[@I-wdad]

QackCoin on top!

[@arkitpoudel9766]

THNX this helped me a lot

[@MissileGuidance]

Thank you very much , amazing ! 🔥

[@martin_straka]

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.

[@rezwansaki]

Thanks for this nice tutorial. I hope you make more tutorials like this. 🙂

[@CodeWithAli]

Thank you brother, I was learning game development on javascript

[@JustinK0]

real men use c++/c#

[@reymarckessaguirre5082]

@@JustinK0 Real men don't care what language it is. They can program the same shit on any language.

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

[@premprakassingh2787]

good tutorial! made my first game

[@acehabes5154]

Good job! well explained.

[@Nairuulagch]

Thank you for this coolest lesson!!

[@victorcallender1311]

Great tutorial, easy to understand.

[@buildit8649]

Thank you bro it was very helpful

[@qqqqqq262]

i love this video! plz continue this contents!

[@luristran5856]

Thank you so much Shawn ^^

[@PeteR-hk3ze]

cool example! It was fun to watch. Thak you very much!

[@taraskravchuk9139]

Thank a lot! Very funny game! Nice for the beginners!

[@ryangilcabatuan329]

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

[@worldofcarsCA]

kzbin.info/www/bejne/b3XRdHahpNiBmcU

[@ViralPanchal97]

Arey Bhai. Ekdum Bawaal. Bole to Ek number.

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

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

[@jwoodywoodward12]

This is amazing! How would you add the icons like in the original game for example? :) love your work

[@ronnelmacompas1647]

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

[@Rh-sg7jz]

Thank you, very good tuttorial!

[@KnifeCircus]

Raffert thanks!

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

[@MrVibhore1989]

Awesome video thanks for uploading

[@saadbaig3060]

Great vid! my friend You got a Sub.

[@freeT0watch]

amazing. thanks for the tutorial 👌😎