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!

[LivingTaco]

What did you use to make the html file because I am on Mac too.

[markward]

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

[CODEFORTRESS]

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

[naksushi]

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.

[Thunder-tvsm]

Thanks to your video I can continue my code project

[rynstation]

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

[thecodekid-ro]

Great how you did this without using the canvas element

[boltlightning]

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!

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

[zeee]

loved the video. really helped me honestly.

[selenacool]

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

[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

[parindyapigera]

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

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

[lucifermorningstar]

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

[SmartT-gamer]

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

[bl]

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

[bethannebentley]

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

[rueben]

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