Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[New game]: Maze explorer game #4950

Merged
merged 4 commits into from
Jul 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions Games/Maze_Explorer/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
## Maze Explorer
<br>

## Description 📃

In Maze Explorer, you navigate through a randomly generated maze to reach the exit while avoiding obstacles and collecting items. The game is set in an ocean-themed environment, enhancing the visual experience. Your objective is to find the quickest path to the exit while accumulating points by collecting items.
<br>

## Functionalities 🎮

Start Game: Click the "Start Game" button to begin.
Player Movement: Use the arrow keys to navigate through the maze.
Maze Layout: The maze is randomly generated each game, ensuring a unique challenge every time.
Obstacles and Collectibles: Avoid obstacles that decrease your score and collect items to increase your score.
Timer: The game lasts for 60 seconds.
Score: Collectibles and power-ups increase your score, while hitting obstacles decreases it.
Game Over: When time runs out, your final score is displayed with an option to restart the game.

<br>
Controls ⌨️

Arrow Keys: Use the arrow keys (↑, ↓, ←, →) to navigate the maze.

<br>
Scoring System 📈

Collectibles: Increase your score by 10 points each.
Power-Ups: Increase your score by 50 points each.
Obstacles: Decrease your score by 20 points each.
Exit: Reaching the exit increases your score by 100 points.

<br>
Difficulty 🚀

Random Maze Generation: Ensures a unique and challenging layout each time you play.
Obstacles: Strategically placed obstacles add to the challenge.

<br>
Game Over 🏁

Timer: The game lasts for 60 seconds. When the timer reaches zero, the game ends.
Final Score: Your final score is displayed, with an option to play again.

<br>

## **Screenshots 📸**

![alt text](image.png)
Binary file added Games/Maze_Explorer/image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions Games/Maze_Explorer/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maze Runner</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<h1>Maze Runner</h1>
<button id="start-button">Start Game</button>
<div id="maze"></div>
<div class="scoreboard">
<span>Time: <span id="time">60</span> seconds</span>
<span>Score: <span id="score">0</span></span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
184 changes: 184 additions & 0 deletions Games/Maze_Explorer/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
document.getElementById('start-button').addEventListener('click', startGame);

let maze, playerPosition, exitPosition, timer, score;

function startGame() {
maze = generateMaze(20, 15);
playerPosition = { x: 0, y: 0 };
exitPosition = { x: 19, y: 14 };
timer = 60;
score = 0;

updateMaze();
startTimer();
}

function generateMaze(width, height) {
let maze = Array.from({ length: height }, () => Array(width).fill(0));
const stack = [];
const directions = [
{ x: 1, y: 0 },
{ x: -1, y: 0 },
{ x: 0, y: 1 },
{ x: 0, y: -1 }
];

function isInsideMaze(x, y) {
return x >= 0 && y >= 0 && x < width && y < height;
}

function carve(x, y) {
maze[y][x] = 1;
stack.push({ x, y });

while (stack.length > 0) {
const { x, y } = stack.pop();
const shuffledDirections = directions.sort(() => Math.random() - 0.5);

for (const { x: dx, y: dy } of shuffledDirections) {
const nx = x + dx * 2;
const ny = y + dy * 2;

if (isInsideMaze(nx, ny) && maze[ny][nx] === 0) {
maze[ny - dy][nx - dx] = 1;
maze[ny][nx] = 1;
stack.push({ x: nx, y: ny });
}
}
}
}

carve(0, 0);

// Add obstacles, collectibles, and power-ups
addSpecialItems(maze, width, height);

return maze;
}

function addSpecialItems(maze, width, height) {
for (let i = 0; i < 10; i++) {
let x, y;
do {
x = Math.floor(Math.random() * width);
y = Math.floor(Math.random() * height);
} while (maze[y][x] !== 1 || (x === 0 && y === 0) || (x === 19 && y === 14));

maze[y][x] = 2; // 2 represents an obstacle
}

for (let i = 0; i < 5; i++) {
let x, y;
do {
x = Math.floor(Math.random() * width);
y = Math.floor(Math.random() * height);
} while (maze[y][x] !== 1);

maze[y][x] = 3; // 3 represents a collectible
}

for (let i = 0; i < 3; i++) {
let x, y;
do {
x = Math.floor(Math.random() * width);
y = Math.floor(Math.random() * height);
} while (maze[y][x] !== 1);

maze[y][x] = 4; // 4 represents a power-up
}
}

function updateMaze() {
const mazeContainer = document.getElementById('maze');
mazeContainer.innerHTML = '';

for (let y = 0; y < maze.length; y++) {
for (let x = 0; x < maze[y].length; x++) {
const cell = document.createElement('div');
cell.classList.add('cell');

if (x === playerPosition.x && y === playerPosition.y) {
cell.classList.add('player');
} else if (x === exitPosition.x && y === exitPosition.y) {
cell.classList.add('exit');
} else {
switch (maze[y][x]) {
case 0:
cell.classList.add('wall');
break;
case 1:
cell.classList.add('path');
break;
case 2:
cell.classList.add('obstacle');
break;
case 3:
cell.classList.add('collectible');
break;
case 4:
cell.classList.add('power-up');
break;
}
}

mazeContainer.appendChild(cell);
}
}
}

function startTimer() {
const timerElement = document.getElementById('time');
const scoreElement = document.getElementById('score');
timerElement.textContent = timer;
scoreElement.textContent = score;

const interval = setInterval(() => {
if (timer > 0) {
timer--;
timerElement.textContent = timer;
} else {
clearInterval(interval);
alert('Game Over! Your score: ' + score);
}
}, 1000);
}

document.addEventListener('keydown', (e) => {
const { x, y } = playerPosition;
let newX = x, newY = y;

if (e.key === 'ArrowUp') newY--;
else if (e.key === 'ArrowDown') newY++;
else if (e.key === 'ArrowLeft') newX--;
else if (e.key === 'ArrowRight') newX++;

if (newX >= 0 && newX < maze[0].length && newY >= 0 && newY < maze.length) {
switch (maze[newY][newX]) {
case 1: // Path
case 3: // Collectible
case 4: // Power-up
playerPosition = { x: newX, y: newY };
break;
case 2: // Obstacle
score -= 20;
document.getElementById('score').textContent = score;
break;
}

updateMaze();

if (newX === exitPosition.x && newY === exitPosition.y) {
score += 100;
document.getElementById('score').textContent = score;
alert('You win! Your score: ' + score);
} else if (maze[newY][newX] === 3) {
score += 10;
document.getElementById('score').textContent = score;
maze[newY][newX] = 1; // Remove collectible
} else if (maze[newY][newX] === 4) {
score += 50;
document.getElementById('score').textContent = score;
maze[newY][newX] = 1; // Remove power-up
}
}
});
80 changes: 80 additions & 0 deletions Games/Maze_Explorer/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to bottom, #00c6ff, #0072ff);
}

.game-container {
text-align: center;
}

h1 {
color: #fff;
margin-bottom: 20px;
}

#start-button {
padding: 10px 20px;
font-size: 20px;
cursor: pointer;
background-color: #00aaff;
border: none;
color: white;
border-radius: 5px;
}

#maze {
width: 80vw;
height: 60vh;
position: relative;
background-color: #e0f7fa;
margin-top: 20px;
display: grid;
grid-template-columns: repeat(20, 1fr);
grid-template-rows: repeat(15, 1fr);
gap: 2px;
}

.cell {
background-color: #80deea;
border: 1px solid #4dd0e1;
}

.wall {
background-color: #004d40;
}

.path {
background-color: #80deea;
}

.player {
background-color: #01579b;
}

.exit {
background-color: #00796b;
}

.collectible {
background-color: #ffeb3b;
}

.obstacle {
background-color: #e64a19;
}

.power-up {
background-color: #d32f2f;
}

.scoreboard {
margin-top: 20px;
color: white;
font-size: 20px;
}
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1302,6 +1302,7 @@ This repository also provides one such platforms where contributers come over an
|[Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys)|
|[Snake_Gun_Water](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Gun_Water)|
|[Tether](https://github.com/kunjgit/GameZone/tree/main/Games/Tether)|
|[Maze_Explorer](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Explorer)|
|[Rock Paper Scissors Lizard Spock Game](./Games/Rock_Paper_Scissors_Lizard_Spock_Game)|

</center>
Expand Down
Binary file added assets/images/Maze_Explorer.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading