How to code Google Chrome Dinosaur Game in JavaScript HTML CSS

In this tutorial, you will learn to build the famous google chrome dinosaur game with html, css, and javascript. Specifically, you will learn how to code the game using html5 canvas.

Throughout the tutorial, you will learn how to create the game loop, add images onto the canvas, add click handlers to allow the dinosaur to jump, randomly generate cactuses or cacti and move them across the screen, detect collisions between the dinosaur and each cactus, and add a running score.

Java Game Programming Projects Playlist:

JavaScript Game Programming Projects Playlist:

Subscribe for more coding tutorials 😄!

[KennyYipCoding]

Check out the playlist of web project tutorials here!

Got a tutorial suggestion? Let me know down below!

[Jokiander]

Such a surreal moment when I look down at your time, and realize your time lined up with mine (I'm watching this at 4am). Excellent tutorial, and very easy to follow along!

[yawn]

Great tutorial, thanks! Your explanations are so clear and the pacing is perfect.

[julianrodriguezlopez]

Great video! I used to work coding with my students and it worked really good. The simplicity helped us to do it rapidly. Unfortunately we have to see many units in few time.

[DeepakSingh-kbon]

I don’t understand how to do the starting explorer stuff. When I add new folder i get workspace and I don’t know how to change it into dinosaur game with the img and how to separate that from the rest

[lofi-fol]

I did set the canvas and offset variables as you did, but the green box doesn't appear on my canvas, only when I put lower values, but they're not the right values :/

[anti-feministblood]

For only 36min of coding, this is impressive

[sentoo]

Would you be able to do a tutorial on how to make the ground move. that would be very helpful

[AceslicerYt]

i have a problem. when I add the image i put them in the folder, but when I put the "./img/dino.png" it doesn't load. what am i doing wrong?

[YoFrahzrr]

i did the coding in like 5 mins cause of the links!

[prasannasahoo]

i am not able to load the dino image on the browser. please help

[ayushkatare]

whenever I going live in vs code, the game is not coming, why it is so?

[Rdblts]

10:06 I was wondering which extension you meant.. maybe I just haven't been paying enough attention but I just can't find it-
edit: nvm- i have found out that i spelled img instead of imgs and that's the reason the images didn't show- spent like 30 mins on it as well..

[idanavisar]

Hi i saw u did a super mario game on java can you upload the code game pls

[ojevrid]

How can I download the dinosaur image or where can I download the dinosaur image and the cactus?

[ferescalante]

how do i add the game over and reset>?

[sentoo]

the only thing that doesn’t work for me is my score stays at 0