itch.io is community of indie game creators and players

Devlogs

JavaScript Game Tutorial with HTML Canvas

Gorillas
A browser game made in HTML5

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 41 kB
    Feb 07, 2024
Leave a comment