HTML5 Zone is brought to you in partnership with:

Alosh Bennett is a passionate programmer and has been working on various java technologies since 2002. He is an ardent believer and promoter of the FOSS cause and is interested in RESTful architectures, web development and scripting languages. He is currently employed with Oracle Corporation. Alosh is a DZone MVB and is not an employee of DZone and has posted 6 posts at DZone. You can read more from them at their website. View Full User Profile

HTML5 Canvas Sample – Building a maze

02.15.2011
| 10967 views |
  • submit to reddit

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

References
Published at DZone with permission of Alosh Bennett, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Jose Jeria replied on Mon, 2011/02/21 - 5:43am

Note that you don't need to put quotes around the function to be used in the setTimeout:

setTimeOut(explorePath, 100);

 

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.