DEV Community

Cover image for How to Code Chrome Dino Game with JavaScript and a HTML Canvas

Posted on

How to Code Chrome Dino Game with JavaScript and a HTML Canvas

In this exciting tutorial we are going to build a clone of the chrome dinosaur game with Javascript and a HTML Canvas. This version of the game can be played on a touch screen or with a keyboard. The game will scale to fit on any size screen.

Try the game out here. On a mobile device play in landscape orientation for the best experience.

The goal of the game is for the dinosaur to avoid the obstacles by jumping over them. As the dinosaur runs along the desert it will encounter cactuses. If you don't jump over them it's game over. Our dino can perform a low or high jump. A low jump is achieved with a quick tap of the screen or quick press of the space bar. A high jump requires taping the screen longer or pressing the space bar longer.

We will cover the following topics and more:

  • Game loop
  • Animation
  • Collision detection
  • Scaling a game to fit to any size screen.
  • How to take into account different frame rates.
  • Randomly generating enemy sprites(cactuses)
  • and much more!

If you enjoy this tutorial please subscribe, like and share on YouTube.

YouTube Tutorial:

Top comments (0)