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

preview_player
Показать описание
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.

Github Repo

Direct link to download project and images

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

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
Рекомендации по теме
Комментарии
Автор

Thank you Adam. I started to study JavaScript Oct. 2021. The first tutorial I could complete was yours. I won't forget how I felt🤓

Bullet-ShawnSak
Автор

Hi Adam. I tried this tutorial and I made it👍. I haven’t skipped to study even a day since I started to study JS and I think I’ve improved. I’ll keep going💪‼️ Thank you for taking time to make the tutorial🙏.

Bullet-ShawnSak
Автор

Thank you Adam! I have been learning alot with this tutorial, great that you explain every line, there are many youtubers who don´t do it so this is very helpful, your so talented and brilliant I hope to be like that one day! srry for my English is not my native, thank you again! <3

marian
Автор

Заметил особенность. Если запустить игру и перейти на другую вкладку, то скорость и higscore будут расти, а динозавр будет стоять на месте. Пока писал комментарий 4500+ очков набил🤣

vnnxyqe
Автор

Отличное объяснение. Всё просто и понятно.

vnnxyqe
Автор

Thanks - I'm working my way through the odin project (not yet onto javascript) so looking forward to understanding this video soon hopefully 😜do you work full time as a developer and youtube on the side?

AMK
Автор

The game is glitching as in it pauses for a fraction of a second sometimes. Any workarounds?

rohitparakh
Автор

because of differ type "module " my js file is not working

yomanthunder
Автор

Amazing video, I have learned a lot. There is just one thing that I do not understand when I do touch the Space all the page goes down, is there a way to block it? Please, could you help me?

fabiobuffoli
Автор

Can You Make A Flappy Bird Tutorial For index.html And js Mabye And Css?

aldesianvero