main.js

index.html

style.css

Run

function generateMaze(width, height) {
    // Ensure width and height are odd to create proper maze boundaries
    if (width % 2 == 0) {
        width ++;
    }
    if (height % 2 == 0) {
        height ++;
    }

// Initialize maze with walls (1s)
    const maze = [];
    for (let i = 0; i < height; i++) {
        const row = [];
        for (let j = 0; j < width; j++) {
            row.push(1);
        }
        maze.push(row);
    }

// Directions for moving: right, down, left, up
    const directions = [
        [0, 2],  // right
        [2, 0],  // down
        [0, -2], // left
        [-2, 0]  // up
    ];

function isValid(x, y) {
        return x > 0 && x < height - 1 && y > 0 && y < width - 1;
    }

function shuffle(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            const temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }

function carvePath(x, y) {
        maze[x][y] = 0;

// Shuffle directions for randomness
        const shuffledDirections = shuffle(directions.slice());
        for (const [dx, dy] of shuffledDirections) {
            const newX = x + dx;
            const newY = y + dy;

if (isValid(newX, newY) && maze[newX][newY] === 1) {
                // Carve path to the next cell
                maze[x + dx/2][y + dy/2] = 0;
                carvePath(newX, newY);
            }
        }
    }

// Start carving from (1,1)
    carvePath(1, 1);

return maze;
}

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const mazeSize = 15;
const maze = generateMaze(mazeSize, mazeSize);

const rectHeight = canvas.height / maze.length;
const rectWidth = canvas.width / maze[0].length;
const numCoins = 6;

function addCoins() {
    let coinsAdded = 0;
    while (coinsAdded < numCoins) {
        let row = Math.floor(Math.random() * mazeSize);
        let col = Math.floor(Math.random() * mazeSize);

if (maze[row][col] == 0 && !(row == player.row && col == player.col)) {
            maze[row][col] = 2;
            coinsAdded ++;
        }
    }
}

function drawRect(row, col, color) {
    let x = col * rectWidth;
    let y = row * rectHeight;
    ctx.fillStyle = color;
    ctx.fillRect(x, y, rectWidth, rectHeight);
}

function drawCircle(row, col, color) {
    let x = col * rectWidth + 0.5 * rectWidth;
    let y = row * rectHeight + 0.5 * rectHeight;
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, rectHeight * 0.4, 0, 2 * Math.PI);
    ctx.fill();
}

function checkWin() {
    if (player.row == mazeSize - 2 && player.col == mazeSize - 1) {
        document.removeEventListener("keydown", keyDown);
        ctx.fillStyle = "red";
        ctx.strokeStyle = "black";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.font = "italic 70px Times New Roman";
        ctx.fillText("You Won!", canvas.width / 2, canvas.height / 2);
        ctx.strokeText("You Won!", canvas.width / 2, canvas.height / 2);
    }
}

function keyDown(event) {
    player.move(event.key);
    checkCoin();
    drawMaze();
    drawRect(player.row, player.col, "red");
    checkWin();
}

document.addEventListener("keydown", keyDown);
addCoins();
drawMaze();
drawRect(player.row, player.col, "red");

Console

Click RUN to execute project