To create a puzzle maze, type your story into the box below and hit the CREATE button.
NOTE: Click the save button below or right click on the story maze to save the image and print.
OPTIONS:
This page was created by Andy, and if you have any problems or issues with it feel free to post a comment in the discussion forums or shoot a message via the contact form.
If you are interested in how this was made, well it is all Javascript. First I used regular expressions to remove all spaces and non-alphanumeric characters. The next step was making the 'maze' path. I read about maze implementation, but that wasn't what was needed for this project, and I was at a loss until I stumbled upon the self-avoiding walk. This was all pretty interesting, but I was at a loss of how to implement code that would create something like that, and I am not a strong enough programmer to figure out the implementation on my own. Fortunately, some further reading introduced me to Hamiltonian paths. This helped me out because it led me to an actual JavaScript implementation of a Hamiltonian path generator. From there I was able to repurpose the code to fit my needs. Once I had the path generator, I used a canvas to print the completed maze. There are two reasons I chose a canvas. First, it is an easier implementation. If I had used a table or something like that, I would have had to shuffle the text into the mixed up order and I honestly didn't want to think that hard about it. With a canvas, I could print the story in order, just using the different Hamiltonian path coordinates for each letter. The second reason that I think using a canvas is a better implementation is that it allows direct control over the spacing and look of the story maze, whereas if it were in plain text it would get mixed up if it were copy and pasted.