Typescript Maze Generator

Demo

Change the values and then click the "Generate New Maze" button to update the visualization. Since this is rendered in an HTML canvas, you can right-click on the maze and save it!
Your browser does not support HTML canvas.

About

This is a set of two TypeScript libraries I built back in March 2019 that can be used to randomly generate a maze. maze-renderer-js is the “view” that accepts the data generated by maze-generator-js. You can use the form at the end of this page to alter the values that the generator uses to make different variations of mazes.

I’ve always been interested in procedurally generated art and games, and this seemed like a fun way to dip into that world.

A major part of this task was learning how to use recursive backtracking. This algorithm is what makes this automation possible. My implementation of this algorithm is here: https://github.com/miketmoore/maze-generator-js/blob/master/src/carve-maze.ts.

After I implemented recursive backtracking, I refactored the maze generator code to use an iterative algorithm instead. The carveMaze function accepts a “strategy” option which allows you to specify the algorithm you want to use.

Since the recursive backtracking algorithm is not performant, the following demo is rendered using the iterative strategy only.

I’d love to find the time one day to learn how to implement path finding algorithms, or to use this data to generate an interactive game where the user can navigate the maze manually.

Source Code

comments powered by Disqus