Maze Game using HTML CSS JavaScript With Source Code

Introduction :

The Maze Game is a fun Maze Game using HTML CSS JavaScript, interactive browser-based game developed using HTML, CSS, and JavaScript. The objective of the game is to navigate a player through a maze from the starting point to the finish line. This project demonstrates the use of front-end technologies to create a dynamic and engaging game that runs directly in the browser without the need for any plugins or additional software.

Tech Stack

HTML5: Provides the basic structure of the game.
CSS3: Used to style the maze, player, and other game elements.
JavaScript: Implements the game logic, including player movement, collision detection, and win conditions.

Features of the Maze Game

Interactive Gameplay:
The player can navigate through the maze using keyboard controls, providing an engaging and interactive experience.
Responsive Design:
The game is designed to be responsive, adapting to different screen sizes and devices, including desktops, laptops, and tablets.
Simple and Clean Interface:
The interface is minimalistic and user-friendly, with clear paths and intuitive controls.
Collision Detection:
JavaScript is used to detect collisions between the player and the maze walls, preventing movement through walls.
Win Condition:
A winning message is displayed when the player successfully reaches the finish line.

How to Run Below Source Code:

To run the provided code, you can follow these steps:

Create an HTML file: Open a text editor (like Notepad, Visual Studio Code, or Sublime Text) and copy the entire code into a new file. Save the file with a .html extension, for example, maze_game.html.
Open the HTML file in a web browser: Double-click on the HTML file you created, and it should open in your default web browser. Alternatively, you can right-click on the file and choose “Open with” to select a specific browser.
Play the game: Once the HTML file is opened in the browser, you should see the maze grid displayed on the screen. You can use the arrow keys on your keyboard to navigate the blue cell (representing the player) through the maze. The goal is to reach the red cell (the end of the maze). If you reach the end, an alert will pop up declaring victory.

How the Maze Game Works

1. HTML Structure

The HTML file sets up the basic structure of the game, including the game board (maze), player, and goal. The main components include:

Game Board: A container element (<div>) representing the maze.
Player: A movable element within the maze.
Goal: The target area the player needs to reach.

Here is a simplified example of the HTML structure:

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

2. CSS Styling

CSS is used to style the maze, the player, and other elements to create a visually appealing game environment. Key styles include:

Flexbox and Positioning: CSS Flexbox is used for layout, and absolute positioning is used to place elements within the maze.
Background Colors and Borders: Different colors and borders are used to define walls, paths, the player, and the goal.

An example of the CSS styling:

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333;
}

#maze {
    width: 300px;
    height: 300px;
    position: relative;
    border: 2px solid #fff;
}

#player {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
    top: 10px;
    left: 10px;
}

#goal {
    width: 20px;
    height: 20px;
    background-color: green;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

3. JavaScript Logic

JavaScript is used to handle game logic, including player movement, collision detection, and the win condition.

Player Movement:

The player can move using keyboard arrow keys. Event listeners are added to listen for key presses and update the player’s position accordingly.

document.addEventListener('keydown', movePlayer);

function movePlayer(event) {
    const player = document.getElementById('player');
    let top = parseInt(player.style.top);
    let left = parseInt(player.style.left);

    switch (event.key) {
        case 'ArrowUp':
            top -= 10;
            break;
        case 'ArrowDown':
            top += 10;
            break;
        case 'ArrowLeft':
            left -= 10;
            break;
        case 'ArrowRight':
            left += 10;
            break;
    }

    if (canMoveTo(left, top)) {
        player.style.left = `${left}px`;
        player.style.top = `${top}px`;
    }
}

function canMoveTo(left, top) {
    // Collision detection logic to ensure the player doesn't move through walls
    return true; // Placeholder for actual collision detection
}

Collision Detection:

A basic function is used to check if the player’s new position will collide with a wall. If there is a collision, the player’s position is not updated.