<canvas id="maze"></canvas>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

const maze = document.querySelector(".maze");
const rows = 25;
const cells = 25;
const size = 10;

const matrix = [];
const colors = ["white", "black", "#256ad9"];

let unvisited = 0;

// Draw a matrix filled with walls
for (let row = 0; row < rows; row++) {
  const rowArray = [];
  for (let cell = 0; cell < cells; cell++) {
    if (cell % 2 !== 0 && row % 2 !== 0) {
      ++unvisited;
      rowArray.push(0);
    } else {
      rowArray.push(1);
    }
  }
  matrix.push(rowArray);
}

function randomInt(min, max) {
  return Math.round(min + Math.random() * (max - min));
}

let cordY = 1;
let cordX = 1;

matrix[cordY][cordX] = 2;
unvisited--;

const stack = [];

const canvas = document.getElementById("maze");
ctx = canvas.getContext("2d");
canvas.width = (cells + 0) * size;
canvas.height = (rows + 0) * size;

const start = new Date().getTime();

function isFree(matrix, y, x) {
  return y < rows && y > -1 && x < cells && x > -1 && matrix[y][x] === 0;
}

function getFreeSide(matrix, cordY, cordX) {
  const sides = [];
  isFree(matrix, cordY, cordX + 2) && sides.push(1);
  isFree(matrix, cordY, cordX - 2) && sides.push(2);
  isFree(matrix, cordY + 2, cordX) && sides.push(3);
  isFree(matrix, cordY - 2, cordX) && sides.push(4);

  if (sides.length === 0) return 0;

  const side = sides[Math.floor(Math.random() * sides.length)];
  return side;
}

// Maze Generator

const interval = setInterval(() => {
  const side = getFreeSide(matrix, cordY, cordX);
  if (side !== 0) {
    stack.push([cordY, cordX]);
    unvisited--;

    if (side == 1) {
      matrix[cordY][cordX + 1] = 2;
      matrix[cordY][cordX + 2] = 2;
      cordX += 2;
    } else if (side == 2) {
      matrix[cordY][cordX - 1] = 2;
      matrix[cordY][cordX - 2] = 2;
      cordX -= 2;
    } else if (side == 3) {
      matrix[cordY + 1][cordX] = 2;
      matrix[cordY + 2][cordX] = 2;
      cordY += 2;
    } else if (side == 4) {
      matrix[cordY - 1][cordX] = 2;
      matrix[cordY - 2][cordX] = 2;
      cordY -= 2;
    }
  } else if (stack.length > 0) {
    [cordY, cordX] = stack.pop();
  }

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0, row; i < matrix.length; i++) {
    row = matrix[i];
    for (let j = 0, cell; j < row.length; j++) {
      cell = row[j];
      ctx.fillStyle = colors[cell];
      ctx.fillRect(size * j, size * i, size, size);
    }
  }

  if (unvisited === 0) {
    clearInterval(interval);
    const end = new Date().getTime();
    console.log(`Generation Time: ${end - start} ms`);
  }
}, 20);