Skip to content

HTML5 Canvas Sample – Building a maze

by aloshbennett on February 15th, 2011

There are a lot of features that HTML5 bring. What makes canvas popular?


There!

Canvas provides a screen area onto which you could draw 2D shapes and images. The set of APIs are simple. But the strength of the canvas comes from how you could manipulate it using javascript.

We start by defining a canvas. Note that the canvas element would be rendered only if your browser supports it.

<canvas id="canvas" width="100" height="100">Your browser does not support canvas.</canvas>

Next, we define an array in javascript to hold the maze data, initialize it and start building our maze by venturing out into the first cell.

    var board = new Array();
 
    function maze() {
        init();            //initialize the maze
        explorePath(1,1);           //start exploring
    }
 
    function init() {
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
            context = canvas.getContext("2d");
            //paint the maze black
        }
        for(i=0; i< SIZE; i++) {
            board[i] = new Array();
            for(j=0; j<SIZE; j++) {
                board[i][j] = 0; //fill the board array with zeroes
            }
        }
    }

For the explorePath method, we use a recursive algorithm

Paint the cell white
Initialize options list {UP, DOWN, FORWARD, BACKWARD}
While options:
    Select option randomly
    If valid option - Cell is unoccupied, we don't create tunnels etc.
         explorePath(option)
     remove explore option from list
end loop.

In short, we are doing a back-tracking traversal (DFS) of the option tree.

The algorithm works fine until we try to put a delay between each explorePath call to get that nice effect.
You see, it is not really easy to sleep() in javascript. There is no equivalent of Java sleep.

What we could do is this:

  setTimeOut('explorePath()', 100);

This would call the explorePath after a delay of 100 milliseconds. But, the call to setTimeOut() is non-blocking and it would continue execution while scheduling explorePath() to be executed after 100 milliseconds.

We could maintain our own call stack and choose not to call the explorePath() recursively. But it is easier to just push the maze positions to be painted white into a stack and continue execution. Once the display stack is ready we could pop from it and render onto canvas in a delayed manner using setTimeOut().

Finally, we could add a nice touch to the maze by not changing its directions too often, but in a timely manner based on a seeded probability.

Here’s the complete source (right click and view source). And don’t forget to save your maze as a PNG (again, right click and save).

From → Web 2.0

4 Comments
  1. very nice and elaborate tutorial. Just one remark: I tried to do one of the mazes and it seems to me that it’s only possible to exit the maze the same way you got in… :) I’m trying a few more now…

  2. @Stefan,

    Nice point. It would be interesting to create some ‘tunnels’ which would interconnect the paths. Maybe the code to validate the move could be changed to allow few tunnels in a random manner.

Trackbacks & Pingbacks

  1. HTML5 Canvas Sample – Building a maze
  2. Tweets that mention HTML5 Canvas Sample – Building a maze | on the count of three -- Topsy.com

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS