JavaScript Game Tutorial with HTML Canvas: Gorillas

Veröffentlicht am: 30 Januar 2024
auf dem Kanal: 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

Auf dieser Seite können Sie das Online-Video JavaScript Game Tutorial with HTML Canvas: Gorillas mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Hunor Márton Borbély 30 Januar 2024 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 27,317 Mal angesehen und es wurde von 568 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

915