Feat : Added Maze Game

ChromeGaming · Jul 25, 2024 · 6b91d51 · 6b91d51
1 parent 0caf8c3
commit 6b91d51
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -258,9 +258,8 @@ ________________________________________________________________________________
 |  201   | [Cooking_Challenge Game](.SinglePlayer%20-%20Games/Cooking_Challenge Game) |
 |  202   | [Doodling_Game](.SinglePlayer%20-%20Games/Doodling_Game) |
 |  203   | [Duck_Hunt_Game](.SinglePlayer%20-%20Games/Duck_Hunt_Game) |
-|  203   | [Breakout_Game](.SinglePlayer%20-%20Games/BreakOut_Game) |
-
-
+|  204   | [Breakout_Game](.SinglePlayer%20-%20Games/BreakOut_Game) |
+|  205  | [Breakout_Game](.SinglePlayer%20-%20Games/Maze_Game) |
 
 
 

diff --git a/SinglePlayer - Games/Maze game/index.html b/SinglePlayer - Games/Maze game/index.html
@@ -0,0 +1,19 @@
+<!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="styles.css">
+</head>
+<body>
+    <div class="game-container">
+        <canvas id="mazeCanvas"></canvas>
+        <div class="controls">
+            <button id="resetButton">Reset Game</button>
+            <button id="hintButton">Hint</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Maze game/script.js b/SinglePlayer - Games/Maze game/script.js
@@ -0,0 +1,122 @@
+const canvas = document.getElementById('mazeCanvas');
+const ctx = canvas.getContext('2d');
+const resetButton = document.getElementById('resetButton');
+const hintButton = document.getElementById('hintButton');
+
+canvas.width = 500;
+canvas.height = 500;
+
+const rows = 10;
+const cols = 10;
+const cellSize = canvas.width / cols;
+
+let player = { x: 0, y: 0 };
+const goal = { x: cols - 1, y: rows - 1 };
+let walls;
+
+function generateMaze(rows, cols) {
+    const maze = new Array(rows).fill(0).map(() => new Array(cols).fill(false));
+    // Ensure solvability by creating a simple path
+    for (let i = 0; i < rows; i++) {
+        maze[i][0] = false;
+    }
+    for (let j = 0; j < cols; j++) {
+        maze[rows - 1][j] = false;
+    }
+    // Add random walls
+    for (let i = 0; i < rows; i++) {
+        for (let j = 0; j < cols; j++) {
+            if (Math.random() < 0.3 && !(i === 0 && j === 0) && !(i === rows - 1 && j === cols - 1)) {
+                maze[i][j] = true;
+            }
+        }
+    }
+    return maze;
+}
+
+function drawMaze() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    // Draw boundary
+    ctx.fillStyle = '#333';
+    ctx.fillRect(0, 0, canvas.width, cellSize);
+    ctx.fillRect(0, canvas.height - cellSize, canvas.width, cellSize);
+    ctx.fillRect(0, 0, cellSize, canvas.height);
+    ctx.fillRect(canvas.width - cellSize, 0, cellSize, canvas.height);
+
+    for (let i = 0; i < rows; i++) {
+        for (let j = 0; j < cols; j++) {
+            if (walls[i][j]) {
+                ctx.fillStyle = '#333';
+                ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);
+            }
+        }
+    }
+
+    // Draw goal
+    ctx.fillStyle = 'green';
+    ctx.fillRect(goal.x * cellSize, goal.y * cellSize, cellSize, cellSize);
+
+    // Draw player
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(player.x * cellSize, player.y * cellSize, cellSize, cellSize);
+}
+
+function movePlayer(dx, dy) {
+    const newX = player.x + dx;
+    const newY = player.y + dy;
+    if (newX >= 0 && newX < cols && newY >= 0 && newY < rows && !walls[newY][newX]) {
+        player.x = newX;
+        player.y = newY;
+        drawMaze();
+        checkGoal();
+    }
+}
+
+function checkGoal() {
+    if (player.x === goal.x && player.y === goal.y) {
+        alert('Congratulations! You reached the goal!');
+        resetGame();
+    }
+}
+
+function resetGame() {
+    player = { x: 0, y: 0 };
+    walls = generateMaze(rows, cols);
+    drawMaze();
+}
+
+function getHint() {
+    // Simple hint: Move towards the goal in steps
+    if (player.x < goal.x) {
+        movePlayer(1, 0);
+    } else if (player.x > goal.x) {
+        movePlayer(-1, 0);
+    } else if (player.y < goal.y) {
+        movePlayer(0, 1);
+    } else if (player.y > goal.y) {
+        movePlayer(0, -1);
+    }
+}
+
+document.addEventListener('keydown', (e) => {
+    switch (e.key) {
+        case 'ArrowUp':
+            movePlayer(0, -1);
+            break;
+        case 'ArrowDown':
+            movePlayer(0, 1);
+            break;
+        case 'ArrowLeft':
+            movePlayer(-1, 0);
+            break;
+        case 'ArrowRight':
+            movePlayer(1, 0);
+            break;
+    }
+});
+
+resetButton.addEventListener('click', resetGame);
+hintButton.addEventListener('click', getHint);
+
+// Initial drawing
+resetGame();
diff --git a/SinglePlayer - Games/Maze game/styles.css b/SinglePlayer - Games/Maze game/styles.css
@@ -0,0 +1,54 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    font-family: 'Arial', sans-serif;
+}
+
+.game-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #ffffff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+canvas {
+    border: 2px solid #333;
+    margin-bottom: 10px;
+}
+
+.controls {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    background: #333;
+    color: white;
+    transition: background 0.3s, transform 0.3s;
+}
+
+button:hover {
+    background: #555;
+    transform: scale(1.05);
+}
+
+@media (max-width: 600px) {
+    canvas {
+        width: 90vw;
+        height: 90vw;
+    }
+}