I was implementing prim's algorithm to generate mazes using the buckblog article in JavaScript and encountered an error, the error is that one particular variable (frontier list) is not saving what i want it to save. JavaScript code is given below, here is the complete code with html maze generator and here is the deployment web
P.S: any help is appreciated, i'm kinda new at JavaScript :)
everything works as expected but "frontier" is not saving the "random_point" neighbors in generate method. i.e "listValues" a.k.a "frontier" is not saving the return value by "neighbors()" method but works fine and saves the return values by "neighbors()" method at "frontier_neighbors"
function createMatrix() {
// Get the dimensions from the input fields
var rows = parseInt(document.getElementById('rows').value);
var cols = parseInt(document.getElementById('cols').value);
let maze = new Maze(rows, cols);
maze.generate();
maze.display();
}
class pair {
constructor() {
this.col = 0;
this.row = 0;
}
}
class maze_element {
constructor() {
this.top = 1;
this.bottom = 1;
this.left = 1;
this.right = 1;
this.v = 0;
}
}
class Maze {
constructor(rows, cols) {
this.mat = [];
this.rows = rows;
this.cols = cols;
for (let i = 0; i < rows; i++) {
this.mat[i] = [];
}
let count = 0;
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
this.mat[i][j] = new maze_element();
}
}
}
neighbors(random_point) {
let neighbor = [];
let col = random_point.col;
let row = random_point.row;
if (row > 0) {
let temp = new pair();
temp.col = col;
temp.row = row - 1;
neighbor.push(temp);
}
// Corrected condition here
if (row < this.rows - 1) {
let temp = new pair();
temp.col = col;
temp.row = row + 1;
neighbor.push(temp);
}
if (col < this.cols - 1) {
let temp = new pair();
temp.col = col + 1;
temp.row = row;
neighbor.push(temp);
}
if (col > 0) {
let temp = new pair();
temp.col = col - 1;
temp.row = row;
neighbor.push(temp);
}
return neighbor;
}
getAdjacentIn(neighbors) {
let newPair = new pair();
for (let neighbor of neighbors) {
if (this.mat[neighbor.row][neighbor.col].v === 1) {
newPair.col = neighbor.col;
newPair.row = neighbor.row;
return newPair;
}
}
}
getWall(cell1, cell2) {
if (cell1.row < cell2.row) {
return 'bottom';
} else if (cell1.row > cell2.row) {
return 'top';
} else if (cell1.col < cell2.col) {
return 'right';
} else if (cell1.col > cell2.col) {
return 'left';
}
}
getOppositeWall(wall) {
if (wall === 'top') {
return 'bottom';
} else if (wall === 'right') {
return 'left';
} else if (wall === 'bottom') {
return 'top';
} else if (wall === 'left') {
return 'right';
}
}
breakWall(inside_maze, frontier_outside_maze) {
let wall = this.getWall(inside_maze, frontier_outside_maze);
let oppWall = this.getOppositeWall(wall);
if (wall === 'top' && oppWall === 'bottom') {
this.mat[inside_maze.row][inside_maze.col].top = 0;
this.mat[frontier_outside_maze.row][frontier_outside_maze.col].bottom = 0;
}
if (wall === 'bottom' && oppWall === 'top') {
this.mat[inside_maze.row][inside_maze.col].bottom = 0;
this.mat[frontier_outside_maze.row][frontier_outside_maze.col].top = 0;
}
if (wall === 'left' && oppWall === 'right') {
this.mat[inside_maze.row][inside_maze.col].left = 0;
this.mat[frontier_outside_maze.row][frontier_outside_maze.col].right = 0;
}
if (wall === 'right' && oppWall === 'left') {
this.mat[inside_maze.row][inside_maze.col].right = 0;
this.mat[frontier_outside_maze.row][frontier_outside_maze.col].left = 0;
}
return null;
}
addFrontier(frontier_neighbors, frontier) {
for (let neighbor of frontier_neighbors) {
if (this.mat[neighbor.row][neighbor.col].v === 0) {
frontier.push(neighbor);
}
}
}
shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
generate() {
let random_point = new pair(); //creates index of a random cell each time it is executed
random_point.col = Math.floor(Math.random() * this.cols);
random_point.row = Math.floor(Math.random() * this.rows);
this.mat[random_point.row][random_point.col].v = 1; //first cell in the maze
let listValues = this.neighbors(random_point);
console.log('List Values:', listValues);
console.log('Length:', listValues.length);
let frontier = listValues; //all the neighbors of current cell
while (frontier.length > 0) {
this.shuffle(frontier);
let random_frontier_index = new pair();
let index = Math.floor(Math.random() * frontier.length);
random_frontier_index = frontier[index];
let frontier_neighbors = this.neighbors(random_frontier_index);
//continue here 26 may 2023
console.log("random cell", random_point);
console.log("frontier list", frontier);
console.log("frontiner cell", random_frontier_index);
console.log("frontier neighbors", frontier_neighbors);
let adjacent_cell = this.getAdjacentIn(frontier_neighbors);
console.log("adjacent cell", adjacent_cell);
this.breakWall(random_point, random_frontier_index);
//mark the frontier cell as visited using .v;
this.mat[random_frontier_index.row][random_frontier_index.col].v = 1;
//add the neighbors of random frontier cell to frontier list.
this.addFrontier(frontier_neighbors, frontier);
// }
//remove the random frontier cell from the frontier list.
frontier.splice(frontier.indexOf(random_frontier_index), 1);
random_point = random_frontier_index;
}
}
display() {
const existingCanvas = document.querySelector('canvas');
if (existingCanvas) {
existingCanvas.parentNode.removeChild(existingCanvas);
}
let canvas = document.createElement("canvas");
canvas.style.marginLeft = "25em";
canvas.style.marginTop = "20px";
canvas.width = this.cols * 20;
canvas.height = this.rows * 20;
let context = canvas.getContext("2d");
context.beginPath();
for (let row = 0; row < this.rows; row++) {
for (let col = 0; col < this.cols; col++) {
let cell = this.mat[row][col];
if (cell.top) {
context.moveTo(col * 20, row * 20);
context.lineTo((col + 1) * 20, row * 20);
}
if (cell.right) {
context.moveTo((col + 1) * 20, row * 20);
context.lineTo((col + 1) * 20, (row + 1) * 20);
}
if (cell.bottom) {
context.moveTo((col + 1) * 20, (row + 1) * 20);
context.lineTo(col * 20, (row + 1) * 20);
}
if (cell.left) {
context.moveTo(col * 20, (row + 1) * 20);
context.lineTo(col * 20, row * 20);
}
}
}
context.stroke();
document.body.appendChild(canvas);
}
}
