glm94/javascript-search-tests
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added a maze solver object to handle the search algorithms that will be used to solve the maze. Updated the sketch code to use said object.

Browse Source
This commit is contained in:
glm94
2020-05-19 12:03:13 -05:00
parent eece3deffb
commit ff496ff63b
5 changed files with 159 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cell.js
+8 -32
View File
@@ -5,14 +5,14 @@ class Cell {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.walls = [true, true, true, true]; this.walls = [true, true, true, true];
this.selected = false;
this.visited = false; this.visited = false;
this.cellWidth = cellWidth; this.cellWidth = cellWidth;
this.searched = false;
this.finalPath = false;
this.parent = undefined; this.parent = undefined;
this.end = false; this.color = [255, 255, 255, 0];
this.start = false; }
get defaultColor(){
return [255, 255, 255, 0];
} }
get top(){ get top(){
@@ -58,32 +58,8 @@ class Cell {
if (this.bottom) line(x + this.cellWidth, y + this.cellWidth, x, y + this.cellWidth); if (this.bottom) line(x + this.cellWidth, y + this.cellWidth, x, y + this.cellWidth);
if (this.left) line(x, y, x, y + this.cellWidth); if (this.left) line(x, y, x, y + this.cellWidth);
if (this.visited) { fill(this.color);
fill(255, 0, 0); noStroke();
noStroke(); rect(x, y, this.cellWidth, this.cellWidth);
rect(x, y, this.cellWidth, this.cellWidth);
}
if(this.searched){
fill(210, 180, 140);
noStroke();
rect(x, y, this.cellWidth, this.cellWidth);
}
if (this.selected) {
fill(50, 125, 0);
noStroke();
rect(x, y, this.cellWidth, this.cellWidth);
}
if(this.finalPath){
fill(173, 216, 230);
noStroke();
rect(x, y, this.cellWidth, this.cellWidth);
}
if(this.start){
text("Start", x, y + cellWidth / 2);
}
} }
} }
gen-maze.js
+75 -15
View File
@@ -19,31 +19,47 @@ class Maze{
this.workingStack.push(this.grid[this.index(0,0)]); this.workingStack.push(this.grid[this.index(0,0)]);
} }
getStartingCell(){
return this.grid[0];
}
getEndingCell(){
return this.grid[this.index(9, 9)];
}
updateMazeDisplay(){ updateMazeDisplay(){
for (var i = 0; i < this.grid.length; i++) { for (let i = 0; i < this.grid.length; i++) {
this.grid[i].show(); this.grid[i].show();
} }
} }
buildNextCell(){ resetMazeState(){
for (let i = 0; i < this.grid.length; i++){
this.grid[i].visited = false;
this.grid[i].color = this.grid[i].defaultColor;
this.grid[i].parent = undefined;
}
}
buildNextCell(selectedColor = [50, 175, 50]){
//Build the maze //Build the maze
let currentCell = this.workingStack.pop(); let currentCell = this.workingStack.pop();
//currentCell.visited = true;
let nextCell = this.getNeighbors(currentCell); let nextCell = this.getNeighbors(currentCell);
if(nextCell){ if(nextCell){
this.workingStack.push(currentCell); this.workingStack.push(currentCell);
currentCell.Selected = false; currentCell.color = currentCell.defaultColor;
currentCell.visited = true; currentCell.visited = true;
nextCell.visited = true; nextCell.visited = true;
nextCell.selected = true; nextCell.color = selectedColor;
removeWalls(currentCell, nextCell); this.removeWalls(currentCell, nextCell);
this.workingStack.push(nextCell); this.workingStack.push(nextCell);
} }
else else
this.workingStack.pop(); this.workingStack.pop();
currentCell.selected = false; currentCell.color = currentCell.defaultColor;
} }
get mazeGenDone() { get mazeGenDone() {
@@ -51,12 +67,12 @@ class Maze{
} }
getNeighbors(cell){ getNeighbors(cell){
var visited = []; let visited = [];
var top = this.grid[this.index(cell.x, cell.y - 1)]; let top = this.grid[this.index(cell.x, cell.y - 1)];
var left = this.grid[this.index(cell.x - 1, cell.y)]; let left = this.grid[this.index(cell.x - 1, cell.y)];
var bottom = this.grid[this.index(cell.x, cell.y + 1)]; let bottom = this.grid[this.index(cell.x, cell.y + 1)];
var right = this.grid[this.index(cell.x + 1, cell.y)]; let right = this.grid[this.index(cell.x + 1, cell.y)];
if (top && !top.visited) { if (top && !top.visited) {
visited.push(top); visited.push(top);
@@ -79,9 +95,53 @@ class Maze{
return undefined; return undefined;
} }
index(x, y) { getLegalMoves(cell){
if (x < 0 || y < 0 || x > this.columns - 1 || y > this.rows - 1) return -1; let neighbors = [];
return x + y * this.columns;
let top = this.grid[this.index(cell.x, cell.y - 1)];
let left = this.grid[this.index(cell.x - 1, cell.y)];
let bottom = this.grid[this.index(cell.x, cell.y + 1)];
let right = this.grid[this.index(cell.x + 1, cell.y)];
if (top && !top.visited && !cell.top) {
neighbors.push(top);
}
if (left && !left.visited && !cell.left) {
neighbors.push(left);
}
if (right && !right.visited && !cell.right) {
neighbors.push(right);
}
if (bottom && !bottom.visited && !cell.bottom) {
neighbors.push(bottom);
}
return shuffle(neighbors);
} }
removeWalls(a, b) {
let x = a.x - b.x;
let y = a.y - b.y;
if (x === -1) {
a.setRight = false;
b.setLeft = false;
} else if (x === 1) {
a.setLeft = false;
b.setRight = false;
}
if (y === -1) {
a.setBottom = false;
b.setTop = false;
} else if (y === 1) {
a.setTop = false;
b.setBottom = false;
}
}
index(x, y) {
if (x < 0 || y < 0 || x > this.columns - 1 || y > this.rows - 1) return -1;
return x + y * this.columns;
}
} }
index.html
+2
View File
@@ -22,6 +22,7 @@
clear: both; clear: both;
} }
</style> </style>
<script src="maze-solver.js"></script>
<script src="cell.js"></script> <script src="cell.js"></script>
<script src="gen-maze.js"></script> <script src="gen-maze.js"></script>
<script src="../p5.js"></script> <script src="../p5.js"></script>
@@ -40,6 +41,7 @@
<select id="searchAlgo"> <select id="searchAlgo">
<option value="depthFirst">Depth First</option> <option value="depthFirst">Depth First</option>
<option value="breadthFirst">Breadth First</option> <option value="breadthFirst">Breadth First</option>
<option value="a">a*</option>
</select><br /> </select><br />
<label for="solvingFrameRate">Framerate During Maze Solving: </label><input type="number" id="solvingFrameRate" min="1" max="144" step="1" value="30"/><br /> <label for="solvingFrameRate">Framerate During Maze Solving: </label><input type="number" id="solvingFrameRate" min="1" max="144" step="1" value="30"/><br />
<input id="reuseMaze" type="checkbox" checked="true"/><label for="reuseMaze">Reuse current maze on next run</label> <input id="reuseMaze" type="checkbox" checked="true"/><label for="reuseMaze">Reuse current maze on next run</label>
maze-solver.js
+57
View File
@@ -0,0 +1,57 @@
class MazeSolver {
constructor(startingCell, targetCell, searchedColor = [210, 180, 140]){
this.frontier = [];
this.explored = [];
this.targetCell = targetCell;
this.searchedColor = searchedColor;
this.selectedColor = [50, 175, 50];
this.currentCell = startingCell;
this.frontier.push(startingCell);
}
clearState(){
this.frontier = [];
this.explored = [];
}
depthFirstNextCell(maze){
breadthFirstNextCell(maze, true);
}
breadthFirstNextCell(maze, depthFirst = false){
this.currentCell.color = this.searchedColor;
if(!depthFirst)
this.currentCell = this.frontier.shift();
else
this.currentCell = this.frontier.pop();
this.currentCell.color = this.selectedColor;
this.currentCell.visited = true;
let moves = maze.getLegalMoves(this.currentCell);
for (let i = 0; i < moves.length; i++){
this.frontier.push(moves[i]);
moves[i].parent = this.currentCell;
}
this.explored.push(this.currentCell);
if(this.currentCell.x == this.targetCell.x && this.currentCell.y == this.targetCell.y)
this.frontier = [];
this.currentCell.color = this.searchedColor;
}
highlightFinalPath(maze, finalPathColor = [173, 216, 230]){
let tmp = this.explored.pop();
while(tmp != undefined){
tmp.color = finalPathColor;
tmp = tmp.parent;
}
maze.updateMazeDisplay();
}
}
sketch.js
+14 -133
View File
@@ -1,19 +1,16 @@
var cellWidth = 50; var cellWidth = 50;
var columns = 0;
var rows = 0;
var grid = [];
//var currentCell;
var cellStack = [];
var frontier = []; var frontier = [];
var explored = []; var explored = [];
var currentNode = {}; var currentNode = {};
var maze = {}; var maze = {};
var algo = {};
function setup() { function setup() {
var canvas = createCanvas(500, 500); print("hell");
var canvas = createCanvas(400, 400);
canvas.parent('sketch-holder'); canvas.parent('sketch-holder');
maze = new Maze(width, height, cellWidth); maze = new Maze(width, height, cellWidth, "Depth");
frameRate(60); frameRate(30);
} }
function draw() { function draw() {
@@ -21,139 +18,23 @@ function draw() {
maze.updateMazeDisplay(); maze.updateMazeDisplay();
if(maze.workingStack.length > 0){ if(!maze.mazeGenDone){
maze.buildNextCell(); maze.buildNextCell();
} }
/*else if (cellStack.length == 0 && frontier.length == 0 && explored.length == 0){ else if (maze.mazeGenDone && algo.frontier == undefined){
for (var i = 0; i < grid.length; i++) { maze.resetMazeState();
grid[i].visited = false; algo = new MazeSolver(maze.grid[0], maze.grid[maze.index(7,7)]);
}
print("Maze generation done"); print("Maze generation done");
frameRate(10);
grid[index(0, 0)].selected = true; }
grid[index(0, 0)].visited = true; else if (maze.mazeGenDone && algo.frontier.length > 0){
grid[index(0, 0)].searched = true; algo.breadthFirstNextCell(maze);
grid[index(0, 0)].start = true;
currentNode = grid[index(0, 0)];
frontier.push(grid[index(0, 0)]);
frameRate(5);
} }
else if (cellStack.length == 0 && frontier.length > 0){
currentNode.selected = false;
currentNode = frontier.shift();
let neighbors = getAllNeighbors(currentNode);
currentNode.searched = true;
currentNode.selected = true;
for(let index = 0; index < neighbors.length; index++){
frontier.push(neighbors[index]);
neighbors[index].parent = currentNode;
}
explored.push(currentNode);
if(currentNode.x == 9 && currentNode.y == 9)
//currentNode.end = true;
frontier = [];
}*/
else{ else{
/*tmp = explored.pop(); algo.highlightFinalPath(maze);
while (tmp.parent != undefined) {
tmp.finalPath = true;
tmp = tmp.parent;
}
grid[index(0, 0)].finalPath = true;
for (var i = 0; i < grid.length; i++) {
grid[i].show();
}*/
print("Maze search done"); print("Maze search done");
noLoop(); noLoop();
} }
} }
function index(x, y) {
if (x < 0 || y < 0 || x > columns - 1 || y > rows - 1) return -1;
return x + y * columns;
}
function removeWalls(a, b) {
var x = a.x - b.x;
var y = a.y - b.y;
if (x === -1) {
a.setRight = false;
b.setLeft = false;
} else if (x === 1) {
a.setLeft = false;
b.setRight = false;
}
if (y === -1) {
a.setBottom = false;
b.setTop = false;
} else if (y === 1) {
a.setTop = false;
b.setBottom = false;
}
}
function getAllNeighbors(cell){
var Neighbors = [];
var top = grid[index(cell.x, cell.y - 1)];
var left = grid[index(cell.x - 1, cell.y)];
var bottom = grid[index(cell.x, cell.y + 1)];
var right = grid[index(cell.x + 1, cell.y)];
if (top && !top.searched && !cell.top) {
Neighbors.push(top);
}
if (left && !left.searched && !cell.left) {
Neighbors.push(left);
}
if (right && !right.searched && !cell.right) {
Neighbors.push(right);
}
if (bottom && !bottom.searched && !cell.bottom) {
Neighbors.push(bottom);
}
return shuffle(Neighbors);
}
function getNeighbors(cell){
var visited = [];
var top = grid[index(cell.x, cell.y - 1)];
var left = grid[index(cell.x - 1, cell.y)];
var bottom = grid[index(cell.x, cell.y + 1)];
var right = grid[index(cell.x + 1, cell.y)];
if (top && !top.visited) {
visited.push(top);
}
if (left && !left.visited) {
visited.push(left);
}
if (right && !right.visited) {
visited.push(right);
}
if (bottom && !bottom.visited) {
visited.push(bottom);
}
if(visited.length == 1)
return visited[0];
else if (visited.length > 1)
return visited[floor(random(0, visited.length))];
else
return undefined;
}