Maze Game using HTML CSS and JavaScript
Project Description: Maze Game
The Maze Game is a simple web-based game implemented using HTML, CSS, and JavaScript. The objective of the game is for the player to navigate through a maze grid from the starting point to the end point. Here’s an overview of the project:
HTML Structure:
- The HTML structure consists of a standard HTML5 document with a
<div>element namedmazewhere the maze grid will be rendered. - Within the
<head>section, meta tags define the character set and viewport settings, and a title tag specifies the title of the page. - The
<style>section contains CSS rules for styling various elements of the game. - JavaScript code for game logic is embedded within a
<script>tag at the end of the document.
CSS Styling:
- CSS rules are used to style the appearance of the maze grid and its elements.
- The styling includes setting the font-family, centering the maze vertically and horizontally, defining the grid layout for the maze, and applying different colors to represent various elements such as walls, start point, end point, and the player’s position.
JavaScript Logic:
- The JavaScript code defines the structure of the maze as a 2D array.
- Functions are implemented to dynamically generate the maze grid, handle player movement, and check for valid moves.
- The
createMaze()function generates the maze grid based on the predefined 2D array, applying appropriate CSS classes to represent different types of cells. - The
movePlayer(event)function handles player movement in response to arrow key presses. It updates the player’s position and checks for collision with walls or reaching the end point. - Additional helper functions such as
getPlayerPosition()andisValidMove()are used to manage player movement and validate moves within the maze.
Game Functionality:
- Upon loading the page, the maze grid is generated, and the player (represented by a blue cell) is positioned at the starting point.
- Players can navigate through the maze grid using arrow keys on the keyboard.
- The goal is to reach the end point of the maze (represented by a red cell) while avoiding collision with walls.
- If the player successfully reaches the end point, an alert message appears declaring victory, and further movement is disabled.
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
.htmlextension, 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.
Source Code:
<!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>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#maze {
display: grid;
grid-template-columns: repeat(10, 50px);
grid-template-rows: repeat(10, 50px);
gap: 1px;
background-color: #eee;
}
.cell {
background-color: #fff;
border: 1px solid #ccc;
}
.cell.start {
background-color: green;
}
.cell.end {
background-color: red;
}
.cell.wall {
background-color: #000;
}
.cell.player {
background-color: blue;
}
</style>
</head>
<body>
<div id="maze"></div>
<script>
const maze = [
[1, 1, 1, 0, 1, 0, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 0, 0, 1, 0, 1],
[1, 0, 0, 0, 1, 1, 1, 1, 1, 0],
[1, 0, 1, 1, 1, 0, 0, 0, 0, 0],
[1, 1, 1, 0, 1, 1, 1, 1, 0, ],
[1, 0, 1, 0, 1, 0, 0, 1, 1, 1],
[1, 1, 1, 0, 1, 1, 1, 1, 0, 1],
[1, 1, 1, 0, 1, 1, 1, 0, 1, 1]
];
const mazeElement = document.getElementById('maze');
function createMaze() {
for (let i = 0; i < maze.length; i++) {
for (let j = 0; j < maze[i].length; j++) {
const cell = document.createElement('div');
cell.classList.add('cell');
if (maze[i][j] === 0) {
cell.classList.add('wall');
} else if (i === 0 && j === 0) {
cell.classList.add('start');
} else if (i === maze.length - 1 && j === maze[i].length - 1) {
cell.classList.add('end');
}
mazeElement.appendChild(cell);
}
}
}
function movePlayer(event) {
const key = event.key;
let playerPosition = document.querySelector('.player');
let [row, col] = getPlayerPosition(playerPosition);
let newRow = row;
let newCol = col;
switch (key) {
case 'ArrowUp':
newRow = row - 1;
break;
case 'ArrowDown':
newRow = row + 1;
break;
case 'ArrowLeft':
newCol = col - 1;
break;
case 'ArrowRight':
newCol = col + 1;
break;
default:
return;
}
if (isValidMove(newRow, newCol)) {
playerPosition.classList.remove('player');
mazeElement.children[newRow * maze.length + newCol].classList.add('player');
}
if (newRow === maze.length - 1 && newCol === maze[newRow].length - 1) {
alert('You won!');
window.removeEventListener('keydown', movePlayer);
}
}
function getPlayerPosition(playerPosition) {
const index = Array.from(mazeElement.children).indexOf(playerPosition);
const row = Math.floor(index / maze.length);
const col = index % maze.length;
return [row, col];
}
function isValidMove(row, col) {
return row >= 0 && row < maze.length && col >= 0 && col < maze[row].length && maze[row][col] !== 0;
}
createMaze();
mazeElement.children[0].classList.add('player');
window.addEventListener('keydown', movePlayer);
</script>
</body>
</html>
Output:
More HTML CSS JS Projects
Get Huge Discounts
Get Discount on Top EdTech Compnies
Find More Projects
Billing Management System using Python introduction: The Billing software using python is a simple yet effective Python application designed to facilitate the …
Medical Management System using Python with Complete Source code [By using Flask Framework] Introduction Hospital Management System The Hospital Management System is …
Chat Application Using HTML , CSS And Javascript Introduction Hello developers friends, all of you are welcome to this new and wonderful …
Travel Planner Website Using HTML , CSS And Javascript Introduction Hello friends, welcome to all of you developer friends, in this new …
Dictionary App using HTML, CSS, JavaScript & ReactJs Introduction : The React dictionary app is a web application designed to provide users …
Weather App using HTML, CSS, JavaScript & ReactJs Introduction : The React Weather App is a web application designed to provide users …
