From 6b91d5109b4e832300f73ee4be23983d50c169f7 Mon Sep 17 00:00:00 2001 From: Meet Jain Date: Thu, 25 Jul 2024 15:30:24 +0530 Subject: [PATCH] Feat : Added Maze Game --- README.md | 5 +- SinglePlayer - Games/Maze game/index.html | 19 ++++ SinglePlayer - Games/Maze game/script.js | 122 ++++++++++++++++++++++ SinglePlayer - Games/Maze game/styles.css | 54 ++++++++++ 4 files changed, 197 insertions(+), 3 deletions(-) create mode 100644 SinglePlayer - Games/Maze game/index.html create mode 100644 SinglePlayer - Games/Maze game/script.js create mode 100644 SinglePlayer - Games/Maze game/styles.css diff --git a/README.md b/README.md index 6cfe5683..8902ec31 100644 --- 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 new file mode 100644 index 00000000..e54b4d9a --- /dev/null +++ b/SinglePlayer - Games/Maze game/index.html @@ -0,0 +1,19 @@ + + + + + + Maze Game + + + +
+ +
+ + +
+
+ + + diff --git a/SinglePlayer - Games/Maze game/script.js b/SinglePlayer - Games/Maze game/script.js new file mode 100644 index 00000000..a3bf1bae --- /dev/null +++ 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 new file mode 100644 index 00000000..bbd0036b --- /dev/null +++ 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; + } +}