From 6e8c700b9bdeef65e07df7fa961df321124c080b Mon Sep 17 00:00:00 2001 From: Garritt McCune Date: Tue, 19 May 2020 13:28:54 -0500 Subject: [PATCH] Started updating the main form to have control over how the maze's properties. Search algorithm can now be changed on the fly. --- index.html | 60 +++++++++++++++++++++++++++++++++++++++---------- maze-solver.js | 61 +++++++++++++++++++++++++++++++++----------------- sketch.js | 18 ++++++++++----- 3 files changed, 102 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index 9bc9e85..85e2fca 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,31 @@ clear: both; } + @@ -33,19 +58,30 @@
+
- -
-
- -
-
- -
+
+ Canvas Properties + +
+
+
+ +
+
+ Search Algorithms + + +
+
+ Misc. + +
+
diff --git a/maze-solver.js b/maze-solver.js index 61f2d7d..e6c7254 100644 --- a/maze-solver.js +++ b/maze-solver.js @@ -1,32 +1,39 @@ class MazeSolver { - constructor(startingCell, targetCell, searchedColor = [210, 180, 140]){ + constructor(startingCell, targetCell, searchedColor = [210, 180, 140], finalPathColor = [173, 216, 230]){ this.frontier = []; this.explored = []; + this.finalPathColor = finalPathColor; this.targetCell = targetCell; + this.startingCell = startingCell; this.searchedColor = searchedColor; - this.selectedColor = [50, 175, 50]; this.currentCell = startingCell; this.frontier.push(startingCell); + this.statesExplored = 0; } clearState(){ this.frontier = []; this.explored = []; + this.statesExplored = 0; } - depthFirstNextCell(maze){ - breadthFirstNextCell(maze, true); + highlightFinalPath(maze){ + let tmp = this.explored.pop(); + + while(tmp != undefined){ + tmp.color = this.finalPathColor; + tmp = tmp.parent; + } + + maze.updateMazeDisplay(); } - - breadthFirstNextCell(maze, depthFirst = false){ +} + +class DepthFirstSolver extends MazeSolver { + solve(maze) { 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 = this.frontier.pop(); this.currentCell.visited = true; @@ -38,20 +45,34 @@ class MazeSolver { } this.explored.push(this.currentCell); + this.statesExplored++; 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(); +} + +class BreadthFirstSolver extends MazeSolver { + solve(maze) { + this.currentCell.color = this.searchedColor; - while(tmp != undefined){ - tmp.color = finalPathColor; - tmp = tmp.parent; + this.currentCell = this.frontier.shift(); + + 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; } - maze.updateMazeDisplay(); - } + this.explored.push(this.currentCell); + this.statesExplored++; + + if(this.currentCell.x == this.targetCell.x && this.currentCell.y == this.targetCell.y) + this.frontier = []; + this.currentCell.color = this.searchedColor; + } } diff --git a/sketch.js b/sketch.js index 3b7056d..d60c75b 100644 --- a/sketch.js +++ b/sketch.js @@ -6,8 +6,7 @@ var maze = {}; var algo = {}; function setup() { - print("hell"); - var canvas = createCanvas(400, 400); + var canvas = createCanvas(500, 500); canvas.parent('sketch-holder'); maze = new Maze(width, height, cellWidth, "Depth"); frameRate(30); @@ -23,18 +22,27 @@ function draw() { } else if (maze.mazeGenDone && algo.frontier == undefined){ maze.resetMazeState(); - algo = new MazeSolver(maze.grid[0], maze.grid[maze.index(7,7)]); + //maze.updateMazeDisplay(); + let selectedAlgo = document.getElementById("searchAlgo").value; + if(selectedAlgo == "depthFirst") + algo = new DepthFirstSolver(maze.grid[0], maze.grid[maze.index(7, 7)]); + else if(selectedAlgo == "breadthFirst") + algo = new BreadthFirstSolver(maze.grid[0], maze.grid[maze.index(7,7)]); + //else if(selectedAlgo == "a*") + print("Maze generation done"); frameRate(10); } else if (maze.mazeGenDone && algo.frontier.length > 0){ - algo.breadthFirstNextCell(maze); + //algo.breadthFirstNextCell(maze); + algo.solve(maze); } else{ algo.highlightFinalPath(maze); - + let label = document.getElementById('information').innerHTML = `Maze Finished. Explored ${algo.statesExplored} states to find the answer.`; print("Maze search done"); noLoop(); + toggleForm(true); } }