Easy JavaScript Game Tutorial

Learn how to create an easy game using JavaScript. We're going to create a game similar to the chrome dinosaur game (no internet connection game) using plain JavaScript.
We're going to be using HTML, CSS & JavaScript. Feel free to code along to this tutorial & make the game. Hope you enjoy!
Don't forget to Subscribe here: / @krisfoster1
Code: github.com/kriscfoster/chrome...

[@markward7604]

Kris thank you for posting this excellent example of java script coding.
Also, thank you for posting it in Git.
A great example that I can take apart and show my students in class, please keep posting...!

[@benbrown1143]

This was a great video! thank you!!

[@navinkandpal6767]

Awesome man👍

[@DeltatyCode]

Awesome , loved it !

[@KrisFoster1]

Thank you @Deltaty Code, Glad you enjoyed!

[@boltlightning7804]

Awesome! it feels very good to make my own game and play it! I am super interested in learning programming so this was awesome! thanks very much! my best score right now is 313!

[@cassiodias1965]

Awesome! Simple and precise!

[@KrisFoster1]

Glad you enjoyed @Cassio Dias 😉

[@Thunder-tv2sm]

Thanks to your video I can continue my code project

[@CODEFORTRESS]

In the css, if you add the linear after the infinite it will gonna have the same speed.

[@johnpavan4881]

Learnt a lot thanks

[@dripliboi5563]

THANK YOU SO MUCH!!!!

[@dinushamaduwanthi8242]

thank you verymuch a lot

[@naksushi8228]

I got stucked around 16.30 cause you didn't reload the page to make the dino keep jumping right? you pressed the spacebar to make the dino jump, right? but for me, I pressed the space bar and it won't jump. I also keep reload the page to see what went wrong and see the difference between my code and yours. but, I can't find anything. I'm a student and I need your explaination, please.

[@ronnyt5914]

i had the same issue, you have to delete the jump animation in the dino id in your css. it cant be there twice in one css file i guess

[@zachsmith4775]

Great video, thanks!

[@KrisFoster1]

Glad you enjoyed @Zach Smith!

[@rynstation8206]

Yes! Thanks so much! I always try other tutorials but the animation never works for me. This video really helped me! Thank you!

[@KrisFoster1]

Glad you enjoyed @HeroicAgenda576!

[@Z00Mcontent]

MY NAME MRRRR CHHHEEEEEEEEEEEEEEEEESE

[@mozzsticks]

How would i make it so the 'dino' is actually animated with its legs moving in the og game? i've got both my sprites, i just dont know where to put them.
great tutorial though!

[@owenwatss]

what is the editor you used?

[@johnpavan4881]

New subscriber

[@bl4841]

i keep getting "expected an identifier and instead saw const" on the javascript page. any tips on that?

[@lucascecin]

Just followed the tutorial and learned a lot! Thanks, man! Just one sugestion I watched on other video: the rock animation can get smoother if you add "linear"
on CSS:
animation: rock 1.8s infinite linear;

[@bethannebentley5940]

I have to make my webpage where the game is, long it takes up most of my screen space. Any ideas?

[@selenacool3077]

I need help with my rock not staying in the box and just slides out but then spawns back to the right spot. So any tips for the rock to stay in the box. And I copied the same code as u

[@zeee1261]

loved the video. really helped me honestly.

[@KrisFoster1]

Thank you for the feedback @Mirale

[@frittzho2720]

can u do a video where u make this game more advanced and interesting?

[@sertansantos3032]

Nice very nice

[@KrisFoster1]

Glad you enjoyed @Sertan Sahbaz

[@codewithdoge]

Cant we do overflow hidden to hide rock if it gets out of the div?

[@PCOPedro]

I tried it and worked also

[@lucifermorningstar6238]

I just did every thing and my dino still not jump can you help me ?

[@Adrenaliinz]

Thanks. Great video. Explained very well.
I was doing something similar, but I ran into one problem. I'd like to be able to stop the infinite animation once the game is over and even after OK-ing the alert to make sure the game is stopped properly and only if the player wants to play again to press a separate button, which we can tie in with the reload method, which I can figure out how to do, but the only problem I can't solve is stopping the game completely even after the alert is satisfied. If someone can suggets something I'd appreciate it. I'm new and still learning JS. tnx

[@yawn8974]

I ran into the same issue and am also new but will try to explain how I fixed it. Instead of putting the animation for the rock directly in the formatting, I made a separate class list for the rock (just like the animation for the dinosaur is separate). Then, in javascript, I used addEventListener("click") to start the rock-animation when you click on the screen. And then in the final condition to end the game, I just removed the class list from the rock. Hope that makes sense

[@elliot9969]

What code editor are you using?

[@coconutwateryt]

he uses visual studio code

[@SmartT-gamer5]

My dinosaur image isn't showing up, can you explain why?

[@rueben9656]

keeps underlining my colons do anyone know why pls help its not working

[@parindyapigera1790]

Why is that the Dinosaur's legs aren't moving?

[@Crime_pays]

How did you align the score. Your screen is covering the code and your accent is hard to understand

[@shehan_ff]

my dinasour dosent jump

[@omranshahrour7291]

Thank you, You are awesome but you need to get your voice a little bit higher...

[@KrisFoster1]

Thank you for the feedback!

[@Z00Mcontent]

My NARM MRE CHREEESERES!

[@Venom_VSA1234]

dinosaur is not jumping

[@Z00Mcontent]

MY NAME MR CHEESE!!!

[@pradeepkumarreddykondreddy7048]

voice is too low

[@KrisFoster1]

Thank you for the feedback, will try to make it better next time

[@Z00Mcontent]

MRY NRAME MRE CHREsSE