JavaScript Game Tutorial with HTML Canvas: Gorillas

Pubblicato il: 30 gennaio 2024
sul canale di: 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

In questa pagina del sito puoi guardare il video online JavaScript Game Tutorial with HTML Canvas: Gorillas della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Hunor Márton Borbély 30 gennaio 2024, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 27,317 volte e gli è piaciuto 568 spettatori. Buona visione!

915