Generate and Solve 2D Maze Puzzles with Algernon-js Library

Category: Javascript | July 18, 2023
Author:We-Gold
Views Total:54 views
Official Page:Go to website
Last Update:July 18, 2023
License:MIT

Preview:

Generate and Solve 2D Maze Puzzles with Algernon-js Library

Description:

Algernon-js is a fast and performant library to generate, solve, and render 2D mazes in JavaScript.

It uses a 2D array of integers for storing maze layouts under the hood. This approach provides an excellent balance between space efficiency and usability. Each cell in the maze can have walls on the North, South, East, or West sides. These walls are internally represented using bits for optimal performance and space efficiency. For instance, a cell with a North and West wall would be represented internally as 0b1001 (binary) or 9 (decimal).

How to use it:

1. Install and import the Algernon-js.

# NPM
$ npm i algernon-js
import {
  generateMazeBacktracking,
  generateMazeKruskal,
  generateMazeGrowingTree,
  solveAStar,
  solveACO,
  solveDFS,
  solveBFS,
  solveDStarLite,
  renderMazeToCanvas,
} from "algernon-js"

2. Three core maze generation algorithms are integrated within Algernon-js, offering a range of possibilities based on your requirements:

  • Backtracking: A fast, general-purpose algorithm excellent for creating mazes with some long corridors. Use the generateMazeBacktracking method to leverage this algorithm.
  • Kruskal’s: A slower algorithm that’s fantastic for generating simpler and relatively easy-to-navigate mazes. You can generate mazes using Kruskal’s algorithm with the generateMazeKruskal method.
  • Growing Tree: This algorithm performs like Prim’s by default, but it’s highly configurable. Generate mazes using the Growing Tree algorithm with the generateMazeGrowingTree method.
const [rows, cols] = [50, 50]
const rawMaze = generateMazeBacktracking(rows, cols)

3. Solve the maze: solveAStar, solveACO, solveDFS, solveBFS, or solveDStarLite.

const solution = solveAStar(rawMaze, [0, 0], [rows - 1, cols - 1])

4. Render the maze on an HTML canvas element.

<canvas id="result" width="600" height="600"></canvas>
const canvas = document.getElementById("result")
const ctx = canvas.getContext("2d")
renderMazeToCanvas(ctx, 20, rawMaze, solution)

5. Convert the maze.

//  Node Matrix
const nodeMatrix = convertRawToNodeMatrix(rawMaze)
const updatedRaw = convertNodeMatrixToRaw(nodeMatrix)
// Node Graph
const nodeGraph = convertRawToNodeGraph(rawMaze, [0, 0], [row - 1, col - 1])
const updatedRaw = convertNodeGraphToRaw(nodeGraph, [0, 0])
// Binary
const buffer = serializeRawToBinary(rawMaze)
const deserialized = deserializeBinaryToRaw(buffer)
// Base64 String
const base64 = serializeRawToString(rawMaze)
const deserialized = deserializeStringToRaw(base64)
// Supersampled
const supersampled = supersampleMaze(rawMaze, 2)
// Grid Maze Format
const gridMaze = convertRawToGridFormat(rawMaze, 2)
const rawMaze2 = convertGridToRawFormat(gridMaze, 2)
const rawPoint = [2, 2]
const gridPoint = convertRawToGridPoint(rawPoint)
const originalPoint = convertGridToRawPoint(gridPoint)
// Braided
braidMaze(rawMaze, 0.5)
// Degrade/Fill
degradeGrid(gridMaze, 0.1)
fillGrid(gridMaze, 0.05)

Changelog:

v0.3.1 (07/18/2023)

  • Add sparse supersample for occupancy grid.

v0.3.0 (07/17/2023)

  • Add general support for occupancy grids.

v0.2.7 (07/16/2023)

  • Make internal data structures public.

v0.2.6 (07/15/2023)

  • Add support for converting grid format to raw format.

v0.2.5 (07/15/2023)

  • Add braiding for mazes.

v0.2.4 (07/13/2023)

  • Added more features

v0.2.2 (07/13/2023)

  • Update

v0.2.1 (07/13/2023)

  • Add the ability to replace wall booleans with actual cells.

v0.2.0 (07/12/2023)

  • Added more solvers.

You Might Be Interested In:


Leave a Reply