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:

• Vanilla JS based, full screen, random obstacles

• React based, full screen, random obstacles

• BlockLike based, full screen, random obstacles

Loaded:

• Vanilla JS based, loaded from file

• React based, loaded from file

• BlockLike based, loaded from file

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 start

To build:

npm run build

To watch for changes:

npm run watch

A 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:

1. Create a maze json file. Examples are at the dist/mazes folder.

2. Create an ASCII maze. Use the + -- | notation. Examples are at the drafts folder. Use the converter script to generate a maze json. From project root: node scripts/convert.js drafts/3.txt > dist/mazes/3.json

Ron Ilan

MIT