Build an Engaging Maze Game with HTML, CSS, and JavaScript

Loading…

Build an Engaging Maze Game with HTML, CSS, and JavaScript · devs3

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Maze Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <h1>Navigate the Maze!</h1>
        <div class="maze" id="maze"></div>
        <div id="message" class="message"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

css

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 0;
    color: white;
}

.game-container {
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

h1 {
    margin-bottom: 1.5rem;
}

.maze {
    display: inline-grid;
    grid-template-columns: repeat(10, 30px);
    grid-template-rows: repeat(10, 30px);
    gap: 2px;
    background-color: #333;
    border: 3px solid #222;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.cell {
    width: 30px;
    height: 30px;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.wall {
    background-color: #444;
    border: 1px solid #222;
}

.start {
    background-color: #4CAF50; /* Green */
    color: white;
}

.end {
    background-color: #f44336; /* Red */
    color: white;
}

.player {
    width: 20px;
    height: 20px;
    background-color: #2196F3; /* Blue */
    border-radius: 50%;
    transition: all 0.1s ease-in-out;
}

.message {
    font-size: 1.5rem;
    font-weight: bold;
    height: 2rem;
    color: #4CAF50;
}

javascript

document.addEventListener('DOMContentLoaded', () => {
    const mazeElement = document.getElementById('maze');
    const messageElement = document.getElementById('message');
    
    // 0 = Path, 1 = Wall, S = Start, E = End
    const mazeLayout = [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 'S', 0, 0, 0, 1, 0, 0, 0, 1],
        [1, 1, 1, 1, 0, 1, 0, 1, 0, 1],
        [1, 0, 0, 0, 0, 1, 0, 1, 0, 1],
        [1, 0, 1, 1, 1, 1, 0, 1, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 'E', 1, 1, 1, 1, 1, 1, 1, 1]
    ];

    let playerPosition = { row: 1, col: 1 }; // Start position

    // Function to create the maze grid
    function createMaze() {
        mazeElement.innerHTML = ''; // Clear any existing maze
        for (let row = 0; row < mazeLayout.length; row++) {
            for (let col = 0; col < mazeLayout[row].length; col++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.dataset.row = row;
                cell.dataset.col = col;

                const cellValue = mazeLayout[row][col];

                if (cellValue === 1) {
                    cell.classList.add('wall');
                } else if (cellValue === 'S') {
                    cell.classList.add('start');
                    cell.textContent = 'S';
                } else if (cellValue === 'E') {
                    cell.classList.add('end');
                    cell.textContent = 'E';
                }

                mazeElement.appendChild(cell);
            }
        }
        placePlayer();
    }

    // Function to place the player on the grid
    function placePlayer() {
        // Remove player from all cells first
        document.querySelectorAll('.player').forEach(player => player.remove());
        
        const playerCell = document.querySelector(`.cell[data-row="${playerPosition.row}"][data-col="${playerPosition.col}"]`);
        const playerDiv = document.createElement('div');
        playerDiv.classList.add('player');
        playerCell.appendChild(playerDiv);
    }

    // Function to check if a move is valid (not a wall)
    function isValidMove(row, col) {
        // Check if the new position is within the grid boundaries
        if (row < 0 || row >= mazeLayout.length || col < 0 || col >= mazeLayout[0].length) {
            return false;
        }
        // Check if the new position is not a wall
        return mazeLayout[row][col] !== 1;
    }

    // Function to check for win condition
    function checkWin() {
        if (mazeLayout[playerPosition.row][playerPosition.col] === 'E') {
            messageElement.textContent = "Congratulations! You Escaped the Maze!";
            document.removeEventListener('keydown', handleKeyPress);
        }
    }

    // Function to handle keyboard input
    function handleKeyPress(event) {
        let newRow = playerPosition.row;
        let newCol = playerPosition.col;

        switch(event.key) {
            case 'ArrowUp':
                newRow--;
                break;
            case 'ArrowDown':
                newRow++;
                break;
            case 'ArrowLeft':
                newCol--;
                break;
            case 'ArrowRight':
                newCol++;
                break;
            default:
                return; // Exit if it's not an arrow key
        }

        // Check if the move is valid before updating position
        if (isValidMove(newRow, newCol)) {
            playerPosition.row = newRow;
            playerPosition.col = newCol;
            placePlayer();
            checkWin();
        }
    }

    // Initialize the game
    createMaze();
    document.addEventListener('keydown', handleKeyPress);
});

Build an Engaging Maze Game with HTML, CSS, and JavaScript

Join the conversation

Comments

Get the domain name from given URL in JavaScript

Calculate the estimated reading time of an article using JavaScript

Join the conversation

Comments

Keep reading

Get the domain name from given URL in JavaScript

Calculate the estimated reading time of an article using JavaScript