JavaScript Game Tutorial with HTML Canvas: Gorillas

Publicado el: 30 enero 2024
en el canal de: Hunor Márton Borbély

27,317

568

In this exciting new JavaScript Game Tutorial, we code a modern version of the iconic 1991 classic game, Gorillas!

This tutorial is both a JavaScript Game Tutorial and an introduction to the HTML Canvas elements. First, we learn how to draw on a Canvas element with JavaScript. How to draw the background, the buildings, the gorillas, and the bomb.

Then we add interaction. We add event handlers, we cover how to aim, how to animate the bomb across the sky, and how to detect if the bomb hit the enemy or a building.

Be sure to stay till the end, where we also add AI logic for the enemy gorilla, so you can play against the computer.

Play the Game: https://codepen.io/HunorMarton/full/j...
Source Code: https://github.com/HunorMarton/gorillas
Buy Me a Coffee: https://www.buymeacoffee.com/hunor

Twitter — / hunorborbely
CodePen — https://codepen.io/HunorMarton
Website — http://hunormarton.github.io
And more — https://bio.link/hunor

0:00 - Overview
2:12 - Project Setup
3:23 - Initial Files
7:56 - Initializing a New Game
11:36 - Drawing Introduction
19:49 - Drawing the Background Sky
22:36 - Drawing the Background Buildings
26:04 - Drawing the Main Buildings
35:30 - Drawing the Gorillas
37:16 - Drawing the Body of the Gorillas
38:50 - Drawing the Arms of the Gorillas
43:36 - Drawing the Face of the Gorilla
47:13 - Drawing a Simple Bomb
49:35 - Scaling
53:15 - Aiming
54:05 - Info Panels
56:50 - Bomb Grab Area
59:57 - Event Handlers
1:05:18 - Follow the Drag Movement
1:07:16 - Drawing the Throw Trajectory
1:08:46 - The Animation Loop
1:14:15 - Detecting if the Bomb Got Off-Screen
1:16:45 - Drawing the Bomb as a Spinning Banana
1:19:58 - Simple Hit Detection of the Buildings
1:21:27 - Drawing the Buildings with Blast Holes
1:27:16 - Improve Hit Detection Precision
1:29:37 - Improved Hit Detection of the Buildings
1:31:19 - Gorilla Hit Detection
1:34:14 - Announcing the Winner
1:36:58 - Play Against the Computer
1:51:52 - Drawing a Thinking Gorilla
1:53:32 - Next Steps

Music: https://www.unminus.com
The original game: https://www.retrogames.cz/play_654-DO...

#javascript #game #canvas #webdevelopment #codepen

En esta página del sitio puede ver el video en línea JavaScript Game Tutorial with HTML Canvas: Gorillas de Duración hora minuto segunda en buena calidad , que subió el usuario Hunor Márton Borbély 30 enero 2024, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 27,317 veces y le gustó 568 a los espectadores. Disfruta viendo!

915