JavaScript Game Tutorial: Gorillas

Welcome to the source code repository for the Gorillas JavaScript Game Tutorial. There are multiple versions of this tutorial.

• The simplified version you can find on freeCodeCamp. This is a comprehensive guide, yet it lacks several main features of the final game and the graphics is more stripped down.

• The full tutorial you can find on YouTube. This includes many more chapters, like how to make the buildings destructible, how to animate the hand of the gorilla to follow the drag movement while aiming, and we add AI logic, so you can play against the computer.

• You can also play the final, extended version of the game on CodePen. This includes even more features, like light and dark mode and in this version the flying bomb is also affected by the wind.

While the main tutorials are very packed, there are still a few topics we could not cover in them. Below you can also find a few follow-up tutorials

• How to make the game fullscreen?

• How to handle dark mode?

Source Code for the freeCodeCamp Article

You can find the simplified version of this tutorial on freeCodeCamp. You can find the end result of this article as a playable game on Vercel. If you follow along you should end up with the following source code:

• Source Code for the freeCodeCamp article

Source Code for the YouTube Tutorial

You can find the full version of the tutorial on YouTube. You can play the final, single player version of the game on Vercel. Here are the source codes for each major step.

Initial Setup

• 0.0 - Initial Setup

• 0.1 - Initializing State

Drawing with HTML Canvas

• 1.0 - Adjusting the Coordinate System

• 1.1 - Draw Background Sky

• 1.2 - Draw Background Buildings

• 1.3 - Draw Main Buildings

• 1.4 - Draw Gorilla

• 1.5 - Draw the Body of the Gorillas

• 1.6 - Draw the Arms of the Gorillas

• 1.7 - Draw the Face of the Gorilla

• 1.8 - Draw a Simple Bomb

• 1.9 - Scaling

Aiming

• 2.1 - Info Panels for Angle and Velocity

• 2.2 - Bomb Grab Area

• 2.3 - Event Handling

• 2.4 - Follow the Drag Movement with the Hand of the Gorilla

• 2.5 - Draw the Throw Trajectory

Animation and Hit Detection

• 3.0 - Animation Loop and Moving the Bomb

• 3.1 - Detecting if the Bomb got off-screen and Switching Players

• 3.2 - Draw the Bomb as a Spinning Banana

• 3.3 - Simple Hit Detection of the Buildings

• 3.4 - Draw Buildings with Blast Holes

• 3.5 - Improve Hit Detection Precision

• 3.6 - Improved Hit Detection for Buildings

• 3.7 - Gorilla Hit Detection

Endgame

• 4.0 - Announcing the Winner and Starting a New Game

AI Logic

You can find a play the final, single player version of the game on Vercel.

• 5.0 - AI Logic

• 5.1 - Draw a Thinking Gorilla

Follow-Up Tutorials

How to use the Fullscreen API in JavaScript?

How to run a game you created for the web in fullscreen? In this quick tutorial, we check how to display a game or any other HTML element in fullscreen, how to exit fullscreen, and how to make a nice fullscreen toggle button in SVG.

Source Code

Demo

How to handle dark mode with CSS and JavaScript? (with SVG toggle button)

How can we detect dark mode in CSS and JavaScript? How can we manually override it with a toggle button? And how do we save our setting in localStorage? In this quick tutorial, we look into detecting dark mode in CSS and JavaScript and then create a toggle button with SVG to override the default behavior.

Source Code

Source Code of the Final, Extended Version

You can find a play the final, extended version on CodePen and on Vercel.

• Source code of the final, extended version

About

Made by Hunor Márton Borbély in 2024

Follow me on X

Buy Me a Coffee