Started updating the main form to have control over how the maze's properties. Search algorithm can now be changed on the fly.

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;
+	}	
 }