html5 game tutorial

Create a Maze Engine in HTML5

In this tutorial, you will learn how to create a maze-like navigation system which you could apply to “point and click”, graphical adventures games, and more innovative genres as well. This system was used in my game Me Mnemonic, an HTML5 action memory game for Android, Firefox OS devices and web. At the end of this tutorial, you will be able to create any maze structure, with just few lines of codes, and navigate through it with keyboard arrows, mouse click or touch.


You should be familiar with HTML, CSS, JavaScript and basic object oriented concepts. I will be using limeJS, which is the one most used game frameworks. Please check the documentation on their
web site and install it.

What to expect

You can download the game files here. The root folder contains the non-compiled files, which you can open and read. You’ll need limeJS installed if you want to run them. There is also compiled version, in the “compiled” folder, which you can run standalone in your web browser (“compiled” in the limeJS lingo really means “minified” so that all the dependencies are in a single JavaScript file). Now we will browse through the files and I will explain how this all works.

How it works

Here is the list of files that we will be using:

  • direction.js
  • Level.js
  • Level_1.js
  • maze.css
  • maze.html
  • maze.js
  • Room.js

and a short explanation:

  1. maze.html is a game view, run this to see the maze in action
  2. maze.js is the starting point of the game, something like the main controller. There, we will create the Director, who’s job is to manage the game screens. It will load our maze screen.
  3. The maze screen is created by the class maze.Level_1. All you have to do is populate the array this.rooms, in the constructor, with maze.Room objects.
  4. The rest will be done by it’s parent class maze.Level. Based on the list of rooms, in the array this.rooms, it will create a maze and set up navigation events/controls.

That’s it.

Let’s go deeper


Nothing special here, just create and show the maze.


This is the maze setup. The maze is a set of “rooms”, where we see only one at the time (see demo). Every maze.Room object has to know where is the exit (to up, right, down or left) to other rooms (first parameter array) and its position in the maze (second parameter array).

Room directions

For direction, we use enum maze.direction

In order for this to work, you have to use directions always in the same order: up, right, down or left. So [maze.direction.LEFT, maze.direction.DOWN] is not going to work, but [maze.direction.DOWN, maze.direction.LEFT] is OK. I like to use enums like this because then you make less errors while typing.

Rooms positions

Here is the maze map, the letter Z:


To create this structure in the code, we use an array with 2 dimensions for the room position – the first index is for row, and the second for column. It’s like we are building the table with rows and columns, from bottom to top:

  • [0, 0] means 1st row, 1st column,
  • [0, 1] means 1st row, 2nd column,
  • [0, 2] means 1st row, 3rd column,
  • [1, 0] means 2nd row, 1st column,

Directions and positions

Putting it all together:
new maze.Room([maze.direction.UP, maze.direction.RIGHT], [0, 0]) means that this room has 2 directions, to UP and RIGHT, and its position is 1st row, 1st column. This is the maze starting room, the bottom left room. By default, the starting room is always the first item in this.rooms array.

The engine

Class maze.Level will, based on it’s subclass maze.Level_1, create the maze. maze.Level_1 is just a setup or configuration, but maze.Level is the engine. Let see some of the methods:

This is the place where maze is created. It loops through all rooms and add them to the screen.

This method is responsible for the moving animation. Based on room neighbours, it will set next room and move it along with the current one, so we get a felling that we are moving through the maze.

Where to go now?

Now you can try to make your own maze. Create maze.Level_2 and populate this.rooms array with maze.Room. Ok, that’s fine, now we know how to create maze, but this is not a game yet. We are missing the game logic. Maybe in a future, we can add some bad guys, monsters or any other obstacle to beat and play.

If you have any questions, you can contact me on Twitter: @bmilakovic

Other LimeJS tutorials at the GameDev Academy: