Maze Game
Sure! Below are **10 unique, attention-catching, and interesting game ideas** that you can build using HTML, CSS, and JavaScript. Each game is designed to be simple yet engaging, and they can all be run in a browser like Chrome.
---
### **1. Maze Escape**
- **Description**: The player navigates a ball through a maze to reach the exit using arrow keys.
- **Unique Twist**: Add moving obstacles or time limits for each level.
- **Tech**: HTML5 Canvas for the maze, JavaScript for movement logic.
### **Implementation Example: Maze Escape**
Here’s a quick implementation of the **Maze Escape** game:
#### **HTML (index.html)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maze Escape</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Maze Escape</h1>
<canvas id="mazeCanvas" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>
```
#### **CSS (styles.css)**
```css
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
canvas {
border: 2px solid #000;
}
```
#### **JavaScript (script.js)**
```javascript
const canvas = document.getElementById('mazeCanvas');
const ctx = canvas.getContext('2d');
const maze = [
[1, 1, 1, 1, 1],
[1, 0, 0, 0, 1],
[1, 0, 1, 0, 1],
[1, 0, 0, 0, 1],
[1, 1, 1, 1, 1]
];
const cellSize = 80;
let player = { x: 1, y: 1 };
function drawMaze() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let y = 0; y < maze.length; y++) {
for (let x = 0; x < maze[y].length; x++) {
ctx.fillStyle = maze[y][x] === 1 ? '#000' : '#fff';
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
}
}
// Draw player
ctx.fillStyle = 'red';
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 (maze[newY][newX] !== 1) {
player.x = newX;
player.y = newY;
}
drawMaze();
checkWin();
}
function checkWin() {
if (player.x === 3 && player.y === 3) {
alert('You escaped the maze!');
resetGame();
}
}
function resetGame() {
player = { x: 1, y: 1 };
drawMaze();
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') movePlayer(0, -1);
if (e.key === 'ArrowDown') movePlayer(0, 1);
if (e.key === 'ArrowLeft') movePlayer(-1, 0);
if (e.key === 'ArrowRight') movePlayer(1, 0);
});
drawMaze();
```
---
### **How to Run**
1. Save the code into three files: `index.html`, `styles.css`, and `script.js`.
2. Open `index.html` in Chrome.
3. Use the arrow keys to navigate the maze and reach the exit!
---
Let me know if you’d like the implementation for any of the other games! 🎮
Comments
Post a Comment