Member-only story
All you need to
Make HTML 5 Games — Tile Game Tutorial
In this tutorial and matching video tutorial, we will go through the steps to code a tile game using the HTML 5 Canvas and JavaScript.
Tile games are basically games arranged in a grid or with tiles that you drag around. In this case, we have a grid-based game to spot which objects are not changing as the rest of the objects change. This game could also be called a pattern game.
At the bottom of the screen is the number of “eternal” objects to find and the time it has taken. There are five levels, each time there are more objects and more objects to find. A Leader board is used to keep track of the lowest times.
We have two examples, a Simple Tile Game and a Complete Tile Game. You are welcome to look over the simple one first but the tutorial will show the steps to make the complete game.
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!
We will make the game with the ZIM JavaScript Canvas Framework for coding creativity! You might want to check the site out too the many things that can be made with ZIM. There is an online editor with many Zapps!
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.
Template
To get started in VS Code, make a new file called tile.html and grab the ZIM template from https://zimjs.com/code — press the COPY button and…
