This repo a demo of an A* pathfinding algorithm encapsulated as an ES6 JavaScript Class.
There are three interactive demos included, one is implemented using Vanilla JavaScript, one implemented using React (https://reactjs.org/) and one is implemented using the BlocklLike.js (https://www.blocklike.org) educational library.
Mazes can either be generated at random or loaded from a predefined file.
Generated:
Loaded:
Accessing those pages will generate a maze.
First click sets the starting point, second click sets the end point. The maze is then solved using the A* algorithm.
The animation is for illustration only and it happens only after computation has completed. When animation is done the maze will reset itself and await new start and end points.
All obstacles are emoji. They may differ in look between devices.
Make sure to have Node.js installed.
Clone the repo.
In a terminal:
npm install
npm startTo build:
npm run buildTo watch for changes:
npm run watchA maze is defined as a json object with (at least) one key "maze", which has as value a two-dimensional array of numbers. Any cell in the array that contains a 0 (or null, or empty string) is considered passable. Any other value is an obstacle.
This is a maze:
{"maze":[
[1,0,1,1,1,1,1],
[1,0,0,0,0,0,1],
[1,1,1,1,1,0,1],
[1,0,0,0,0,0,1],
[1,0,1,1,1,1,1]
]}
There are two ways you can design your own mazes:
-
Create a maze json file. Examples are at the
dist/mazes folder. -
Create an ASCII maze. Use the + -- | notation. Examples are at the
draftsfolder. Use the converter script to generate a maze json. From project root:node scripts/convert.js drafts/3.txt > dist/mazes/3.json