Coding Chrome Dino Game in JavaScript with a HTML Canvas - Complete Tutorial - Game Development

Published: 10 January 2023
on channel: Coding With Adam

20,288

322

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
https://codingwith-adam.github.io/din...
On a mobile device play in landscape orientation for the best experience.

Github Repo
https://github.com/CodingWith-Adam/di...

Direct link to download project and images
https://github.com/CodingWith-Adam/di...

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.

Try the game out here
https://codingwith-adam.github.io/din....

Chapters
00:00 Introduction
11:10 Game loop
14:47 Display Dino
22:42 Ground
30:54 Animate DIno to Run
35:11 Dino Jump
46:34 Cactus
59:54 Game Over Collision
1:04:01 Display Game Over Text
1:05:22 Restart game after Game Over?
1:09:32 Tap or press space to start game
1:11:56 Game Speed
1:13:21 Score and High Score

#javascript #gamedev

On this page of the site you can watch the video online Coding Chrome Dino Game in JavaScript with a HTML Canvas - Complete Tutorial - Game Development with a duration of hours minute second in good quality, which was uploaded by the user Coding With Adam 10 January 2023, share the link with friends and acquaintances, this video has already been watched 20,288 times on youtube and it was liked by 322 viewers. Enjoy your viewing!

331