JavaScript Game Tutorial with HTML Canvas


You can find the full, 2-hour tutorial on YouTube on how to make this game with HTML, CSS, and plain JavaScript.

In this tutorial, 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, 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. The buildings are destructible, so we learn about clipping masks, and how to draw the buildings with blast holes.

At the end, we also add AI logic for the enemy gorilla, so you can play against the computer.

You can also find a shorter version of this tutorial on freeCodeCamp.

Files

index.html Play in browser
Feb 07, 2024

Leave a comment

Log in with itch.io to leave a comment.