Awesome

maze_generator

maze_generator is a Javascript module for easily generating mazes.

⚠️ This module is work-in-progress, so much of it is unstable.

Feedback is welcome. The best way to provide feedback is to open an issue.

This module is heavily influenced by Jamis Buck's Coffeescript mazes. It is structured a little differently though and is written entirely in Javascript rather than Coffeescript. It also functions as a module, rather than a library. I aim to eventually add all the functionality that Jamis's CS maze library has.

Importing the module

In the browser and in Deno

If you are inside a Javascript module file or a type="module" script tag, then add the following to the top of your code:

import {Maze} from "https://x.nest.land/maze_generator@0.4.0/mod.js";

If not, you can use the dynamic import() function. For example:

let Maze;
import("https://x.nest.land/maze_generator@0.4.0/mod.js")
  .then(module => {
    Maze = module.Maze;
  })
  .catch(error => {
    console.log(`Error loading maze_generator module: ${error}`)
  })

You can also import the module from deno.land/x if you prefer: https://deno.land/x/maze_generator@v0.4.0/mod.js. (Note the v here, which is not present when importing from nest.land.)

In Node

Run:

npm install @thewizardbear/maze_generator

And then import the maze_generator module in your code by adding the following to the top of every file that uses it:

import {Maze} from "@thewizardbear/maze_generator";

Alternately, you can use require:

const {Maze} = require("@thewizardbear/maze_generator")

Please note that Node version 14+ is required as maze_generator makes use of some ES2020 features such as the nullish coalescing operator (??).

Example Usage

import {Maze} from "https://x.nest.land/maze_generator@0.4.0/mod.js"

const mazeSettings = {
  width: 12,
  height: 12,
  algorithm: "recursive backtracker"
}

//initialize the maze
const m = new Maze(mazeSettings);

//generate it
m.generate();

//print the maze to the console
m.printString();

Other examples

See the examples folder for more examples.

Also see this OpenProcessing sketch.

new Maze()

To create a new maze, use new Maze(). You can optionally pass in an object with the settings (see below).

Maze settings object

These are all the properties of the object you can pass in when you write new Maze(mazeSettings)

You can also use the size property instead of width and height to set both dimentions.

.step()

Call .step() to advance the maze one step.

Returns true if the maze hasn't finished generating yet and false if there are no more steps left to take. You can also check if a maze has finished generating with .finishedGenerating, which is a boolean value.

.generate()

This method calls .step() repeatedly until the maze has finished generating (or it has given up). Returns the finished maze

.display()

This is the function which displays the maze.

Note that this function (currently) only works in a html document with a canvas element.

It optionally takes in an object with the properties listed below.

.display() example usage

const kruskalMaze = new Maze({
  width: 20,
  height: 20,
  seed: 100,
  algorithm: "Kruskal's"
}).generate();

kruskalMaze.display({
  canvas: document.getElementById("maze-canvas"), //Replace this with your canvas element you want to display the maze on.
  lineThickness: 0.5 //this sets the walls to be the same size as the paths
})

This will display a maze that looks like this:

.printString()

Prints out the maze as a string to the console.

.printString() example usage

Basic code

new Maze({
  width: 10,
  height: 10
}).generate().printString()

Example output

 ___________________
|__  _____|   |  __ |
|   | ______|___| __|
| |_|__ |   |_  |__ |
|  _____| |__ | | __|
| |  _____|  _| |_  |
|_  |___  __| |  _| |
| | |   |____ | |  _|
|  _| | |_   ___| | |
| | |_|_  |_|  ____ |
|_______|_____|_____|

Maze.createWidget()

Maze.createWidget() is work-in-progress and particuarly unstable.

Call Maze.createWidget() somewhere with access to the document API (the browser) and it should add a little interactive animated HTML widget to your page that looks something like this:

It takes in three properties, all optional.

1. Maze settings object (see new Maze())
2. Display settings object (see .display())
3. Maze widget settings object (see below)

Maze widget settings object

Example code

<div id="prims-demo"></div>
<script>
  import("https://x.nest.land/maze_generator@0.4.0/mod.js")
    .then(({Maze}) => {
      const mazeSettings = {
        algorithm: "true prims"
      }

      const widgetSettings = {
        paused: true,
        containerElement: document.getElementById("prims-demo")
      }

      Maze.createWidget(mazeSettings, {}, widgetSettings)
    })
    .catch(error => {
      document.getElementById("prims-demo").innerHTML = `Error loading maze_generator module: ${error}`
    })
</script>

.braid()

This method braids the maze, removing all dead ends. It returns the maze object so it can be chained.

Try:

import {Maze} from "https://x.nest.land/maze_generator@0.4.0/mod.js";

const mz = new Maze({algorithm: "modified prims", size: "10"}).generate();

//outputs a modified prims maze
mz.printString();

mz.braid();

//outputs the same maze but with all the dead ends removed
mz.printString();

.getSolution()

This is a method that returns the solution to the maze in the form of an array of cell positions.

You can optionally pass in a start and end point, but it will default to the top left and bottom right of the maze.

Try console.log(new Maze().generate().getSolution()).