All you need to

Make HTML 5 Games — Isometric Board Game Tutorial

In this tutorial and matching video tutorial, we will go through the steps to code an isometric board game using the HTML 5 Canvas and JavaScript.

An HTML 5 Isometric Board Game to reveal colored orbs in order

The game we will be making is called Orbs of Order where the player can move with mouse or keys to four lanterns. Once at a lantern, the player can press to reveal a colored orb. The player must reveal the orbs in the color order shown at the bottom right. Path finding (A*) is used to keep the player on the path which is the medium grey color in the picture above.

Preparation

Anyone should be able to follow the steps and make the game, however there are many skills and techniques used to make this type of game on your own. Here is ◎ Your Guide To Coding Creativity on the Canvas which introduces this magical world.

All of this is free and with very little set-up!

Simple Isometric Board Example in ZIM Editor

We will make the game with the ZIM JavaScript Canvas Framework that has a Game module with a Board() class to make isometric board games. ZIM has an online editor and both a simple isometric example and the full isometric game are in the editor.

Editor

We usually make games in a desktop editor such as VS Code by Microsoft — free and quick to install. We will do the tutorial assuming that you are using VS Code but you can code it all online in the ZIM Editor if you wish.

Note: to use the path finding we call a custom script which can only be done in the ZIM Editor if you are logged in. The sign-up is just an e-mail and password and it lets you save files and lists to share which are excellent for teaching too!

Template

To get started in VS Code, make a new file called iso.html and grab the ZIM template from https://zimjs.com/code — press the COPY button and paste it into your page. If working in the ZIM Editor then you do not need this.