escutcheon

Maze Generator

My son has been interested in mazes recently. This seemed like the perfect opportunity to show that I could actually do something useful on the computer (in his eyes), so I decided to put together a maze generator. Maze generation is actually relatively trivial and it is often one of the first examples of a recursive algorithm given to computer science students.

Generator: here. Main source code: here.

I’ve always found the idea of recursion magical in some way—its one of the things that really hooked me into programming.

Maze

A 30 by 70 maze on a 6 by 6 pixel grid

I wanted something that would be rendered at the client using only standard HTML and CSS. This requires no server-side resources, demands no plug-ins and allows for the mazes to be printed out easily and with good quality.

This implementation uses a standard depth-first search algorithm. It’s one of the simplest, but has the benefit of generally creating the most difficult mazes.

I was able to put together the recursive function pretty quickly, but soon realized that the standard browsers all limit the depth of recursion they allow. Since tail-recursive algorithms can be reworked using iteration, I was forced to change things around to use that technique instead. An examination of the source code shows that this basically means the stack must be managed by hand instead of automatically.

Update: I recently added code to solve the maze also.

Update: Support for for very large mazes was added. While large mazes could be made previously, the browser would be unresponsive, and in some cases warning dialogs appeared stating that the script was taking too long. The code has been reworked to give time back to the processor, so this should not happen. Mazes are now limited only by available memory and the particular browser. In practice the limit is on the order of 200,000 to 500,000 total cells, say 1000 rows by 200 columns, etc.

» Posted: Monday, July 2, 2007 | Comments (21) | Permanent Link
fleuron

Comments

I love it. A friend of mine wrote a Perl maze system, and a base class that allows others to train their own maze-solving mice.

What nerds we are.

» Posted by Rich on July 5, 2007 11:08 AM

very nice. i wish i were more nerd like.

» Posted by jason on July 5, 2007 07:09 PM

Great. I never seen this before.

» Posted by Jon on July 8, 2007 08:39 AM

Great job. I’ve made maze generators before but I’m usually lazy and make binary tree mazes - just flip a coin for each cell and give it either a top of a left wall but never both and never neither. Great job again!

» Posted by David Millar on July 8, 2007 05:57 PM

Neat!

You state that the maze is “rendered at the client using only standard HTML and CSS.” This is not technically correct, since it is actually JavaScript that renders the maze.

» Posted by Ray on July 11, 2007 05:30 PM

err, i just tried 10000 x 10000 and it didn’t work!

» Posted by Anonymous on July 18, 2007 06:49 AM

genial

» Posted by abe on August 6, 2007 10:24 PM

Wow! Great job!

» Posted by Anonymous on August 20, 2007 01:02 PM

Incroyable ! Une grande idée couplée à un beau travail de programmation !!!
(in french in the text ;) !)

» Posted by smwarlock on September 16, 2007 08:06 AM

Very nice. Is there a way to get an embeddable version of the generated maze?

» Posted by n8nyc on September 20, 2007 09:04 AM

Sweet! Do I have your permission to try to rewrite this in a server side language (ColdFusion) and blog it? With attribution of course.

» Posted by Raymond Camden on September 20, 2007 10:34 AM

The one additional bit of functionality I’d like to add is the creation of a permalink to a particular generated maze. This would still require the generation to be redone each time at the client, but a randomly generated seed value for the random number generator itself, could become part of the URL. This would allow a particularly “good” maze to be referenced again.

n8nyc, if by “embeddable” you mean an HTML widget, that would be pretty straight-forward to do. At some point I can put something like that together.

Raymond (or anyone), please feel free to adapt the code.

» Posted by winter on September 23, 2007 08:39 AM

How do you print it? I am using Safari for windows.

» Posted by Yukob on November 30, 2007 09:46 PM

I am VERY excited about this and will use it in my website!

» Posted by Anonymous on December 23, 2007 10:55 PM

how do you copy and paste it into a program? I don’t like to waste ink, so I usually do that, but it doesn’t say “copy” when I right click it…

» Posted by fantasyfreak on January 5, 2008 02:06 PM

how do you copy and paste it into a program? I don’t like to waste ink, so I usually do that, but it doesn’t say “copy” when I right click it…

» Posted by fantasyfreak on January 5, 2008 02:06 PM

Oh WOW! I teach children and was looking for a great maze generator. I just found this through a Yahoo search! I love it!!! (^_^) Thanks so much!

» Posted by Jeremy on March 1, 2008 01:19 PM

Am I the only one that cannot figure out how to run this file - maze.js?
And how do I add solve.js to it as well?
How does it run when both of these have been “disabled” in the website demo?
I am obviously missing something here.
A clear explanation would be helpful. Thanks.

» Posted by Confused on May 16, 2008 12:58 PM

I think perhaps you are looking at the javascript files directly. They need to be included as part of the main HTML file to actually do anything. Do a “view source” of the main file here:

http://www.xefer.com/maze-generator

and look at the <script> tags in the <head> element.

» Posted by winter on May 16, 2008 04:35 PM

ummmm… i have the scripts for this… but how do i activate thwm?… i mean like what program do i load the scripts with? is it java?

» Posted by Iain'ttelling! on June 9, 2008 07:11 PM

This is neat! May I have your permission to use as part of my website redesign?

Originally, I was going to just have a static image of a random maze, but I couldn’t find any that would generate mazes past a certain width. Yours does that….and then some.

Being able to see a different maze every time they visit and then click a small button that does the generating and solving would be an added novelty for my visitors.

Obviously, I would place a visible credit blurb for you (or URL if you wish).

When time and work priorities permit, I do plan to actually study your Javascript, HTML, and CSS so I can see how it works.

Thanks so much! :)

~Eddie

» Posted by Eddie on June 26, 2008 02:40 PM
fleuron

Post a comment