Over a million developers have joined DZone.
Platinum Partner

HTML5 Canvas Sample – Building a maze

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix.  Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.

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

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.

(Please view the canvas in action here )

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.
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).

The Web Dev Zone is brought to you in partnership with Mendix.  Learn more about The Essentials of Digital Innovation and how it needs to be at the heart of every organization.


Published at DZone with permission of Alosh Bennett , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}