https://github.com/joshbrew/js-maze-generator-with-a-star-solver
Pure JS Maze Generator and A* with game template for racing AI. Comes w/ hunt & kill and depth-first generator templates
https://github.com/joshbrew/js-maze-generator-with-a-star-solver
Last synced: about 1 year ago
JSON representation
Pure JS Maze Generator and A* with game template for racing AI. Comes w/ hunt & kill and depth-first generator templates
- Host: GitHub
- URL: https://github.com/joshbrew/js-maze-generator-with-a-star-solver
- Owner: joshbrew
- License: mit
- Created: 2023-10-31T22:55:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-16T23:18:36.000Z (about 2 years ago)
- Last Synced: 2025-01-29T12:15:12.171Z (over 1 year ago)
- Language: JavaScript
- Size: 10.1 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Maze generator and game template with A* solver
Interactive maze generator with start/end goals, multiple players, an A* solver for pathfinding. Includes octagonal coordinates with a simple boolean, works in all maze solvers and the A* solver too.
### [Live Demo](https://astarmazesolver.netlify.app/)
Maze examples:
- Depth First Search
- Hunt & Kill
- Depth First with random path joining (easy mode)
- Sidewinder
- Ellers
- Hunt & Kill with Braids (set to octagonal/diagonal mode), with octagonal solving.
- Remove random dead ends till no more 3 or 4 sided cells.
- Remove random dead ends in a spiral from the center (always solvable).
Also a simple BabylonJS render with instanced static meshes. Needs to be threaded with better culling for actual use.
Lots of comments in the code for explaining.
- A* does single and multiagent pathfinding, multiagent allows e.g. for setting avoidance/wait rules for each other on each pass.
- Also a funky IDA* implementation (see maze 3), it only keeps a self-trimming open set that helps keep memory overhead low.
- Includes a search visualization, note the canvas stuff is not efficient but it's plenty fast for demoing.
# Run Example
With latest NodeJS LTS installed. Open this folder in the command line (e.g. via VS Code).
Run: `npm i -g tinybuild` the `npm start` or `tinybuild`
https://github.com/joshbrew/JS-Maze-Generator-with-A-Star-Solver/assets/18196383/0b6cb3a5-4140-44a4-8340-25947b93904f
# Usage
Just pull the source and follow along with the example, there's no npm distribution.
```html
Click on a maze then use arrow keys to control.
Depth First Maze
Show Path
Race AI
AI Move Step (seconds):
Maze Dimensions:
x:
Y:
Generate Maze
Hunt and Kill Maze
Show Path
Race AI
AI Move Step (seconds):
Maze Dimensions:
x:
Y:
Generate Maze
```
Assuming the built script template in this repo, else you can add `type="module"` to serve the unbuilt script frp, `src="index.js"`.
```js
import { Maze } from "./src/maze";
import { AStarSolver } from "./src/astar";
import { MazeGame } from "./src/mazegame";
import { generateDepthFirstMaze, generateHuntAndKillMaze } from "./src/generators";
let nCellsPerRow = 20;
let nRows = 20;
const maze1 = new Maze(nCellsPerRow, nRows, generateDepthFirstMaze);
const maze2 = new Maze(nCellsPerRow, nRows, generateHuntAndKillMaze);
const aStarSolver1 = new AStarSolver(maze1);
const aStarSolver2 = new AStarSolver(maze2);
const mazeGame1 = new MazeGame(maze1, 'canvas1', aStarSolver1, 'darkred');
const mazeGame2 = new MazeGame(maze2, 'canvas2', aStarSolver2);
//setup UI
document.addEventListener('keydown', MazeGame.keyDownHandler);
mazeGame1.setAIInputEvents('depthfirstintv', 'depthfirstsolve', 'depthfirstrace');
mazeGame2.setAIInputEvents('huntkillintv', 'huntkillsolve', 'huntkillrace');
mazeGame1.setGeneratorInputEvents('gendepthfirst','depthfirstX','depthfirstY');
mazeGame2.setGeneratorInputEvents('genhuntkill','huntkillX','huntkillY');
```
Add CSS to your liking:
```css
body {
background-color: darkslategray;
color:white;
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
}
#game1,
#game2 {
max-width: 600px;
margin: 20px auto;
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#game1 div,
#game2 div {
margin-bottom: 15px;
}
button {
padding: 8px 15px;
font-size: 16px;
color:white;
cursor: pointer;
background-color: royalblue;
border: 0;
border-radius: 5px;
margin-right: 10px;
}
button:hover {
background-color: #4cae4c;
}
input[type="number"] {
padding: 8px;
width: 60px;
border: 1px solid #ddd;
border-radius: 5px;
margin-right: 10px;
}
canvas {
display: block;
margin: 0 auto;
border: 1px solid #ddd;
background-color: ghostwhite;
}
div {
font-size: 18px;
}
```