CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hand-Drawn Maze Game</title>
<style>
body { font-family: 'Comic Sans MS', cursive; background: #f2f2f2; display: flex; flex-direction: row; align-items: flex-start; justify-content: center; height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; }
.hand-drawn-8641-container { display: flex; flex-direction: column; align-items: flex-start; margin-right: 20px; }
.hand-drawn-8641-title { font-size: 24px; margin-bottom: 10px; }
.hand-drawn-8641-description { margin-bottom: 20px; }
.hand-drawn-8641-button { margin: 5px 0; padding: 10px 20px; border: 2px solid #000; background-color: #FFF; color: #000; cursor: pointer; font-family: inherit; font-size: 16px; }
.hand-drawn-8641-button:focus { outline: none; }
.hand-drawn-8641-instructions { margin-top: 20px; font-size: 14px; }
.hand-drawn-8641-maze { border: 4px solid #000; width: 600px; height: 600px; display: grid; grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(20, 1fr); background: #FFF; position: relative; }
.hand-drawn-8641-character { width: 80%; height: 80%; background: #FF6F61; border-radius: 50%; position: relative; top: 10%; left: 10%; }
.hand-drawn-8641-wall { background: #000; }
.hand-drawn-8641-cell { border: 1px solid #DDD; }
.hand-drawn-8641-end { background: #4CAF50; }
/* Responsive Design */
@media(max-width: 800px) {
body { flex-direction: column; align-items: center; }
.hand-drawn-8641-container { margin-right: 0; margin-bottom: 20px; }
.hand-drawn-8641-maze { width: 300px; height: 300px; }
}
</style>
</head>
<body>
<div class="hand-drawn-8641-container">
<div class="hand-drawn-8641-title">Hand-Drawn Maze Game</div>
<div class="hand-drawn-8641-description">Navigate through the randomly generated maze and reach the green endpoint!</div>
<button class="hand-drawn-8641-button" id="startBtn">Start</button>
<button class="hand-drawn-8641-button" id="newGameBtn">New Game</button>
<button class="hand-drawn-8641-button" id="pauseBtn">Pause</button>
<div class="hand-drawn-8641-instructions">Instructions:
<ul>
<li>Use arrow keys to move through the maze.</li>
<li>Reach the green cell to win.</li>
</ul>
</div>
</div>
<div class="hand-drawn-8641-maze" id="maze"></div>
<script>
const maze = document.getElementById('maze');
let character;
let isPaused = false;
let isGameStarted = false;
let characterPosition = { x: 0, y: 0 };
const GRID_SIZE = 20;
let mazeGrid;
let endPosition;
function createMaze() {
maze.innerHTML = '';
mazeGrid = Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill(1));
function carve(x, y) {
mazeGrid[y][x] = 0;
const directions = [[0, -1], [1, 0], [0, 1], [-1, 0]];
shuffleArray(directions);
for (let [dx, dy] of directions) {
const nx = x + dx * 2, ny = y + dy * 2;
if (nx >= 0 && nx < GRID_SIZE && ny >= 0 && ny < GRID_SIZE && mazeGrid[ny][nx] === 1) {
mazeGrid[y + dy][x + dx] = 0;
carve(nx, ny);
}
}
}
carve(0, 0);
// Find a suitable end position
let potentialEnds = [];
for (let y = GRID_SIZE - 3; y < GRID_SIZE; y++) {
for (let x = GRID_SIZE - 3; x < GRID_SIZE; x++) {
if (mazeGrid[y][x] === 0) {
potentialEnds.push({x, y});
}
}
}
endPosition = potentialEnds[Math.floor(Math.random() * potentialEnds.length)];
mazeGrid[endPosition.y][endPosition.x] = 2; // Set end point
for (let y = 0; y < GRID_SIZE; y++) {
for (let x = 0; x < GRID_SIZE; x++) {
const cell = document.createElement('div');
cell.classList.add('hand-drawn-8641-cell');
if (mazeGrid[y][x] === 1) {
cell.classList.add('hand-drawn-8641-wall');
} else if (mazeGrid[y][x] === 2) {
cell.classList.add('hand-drawn-8641-end');
}
maze.appendChild(cell);
}
}
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function createCharacter() {
character = document.createElement('div');
character.classList.add('hand-drawn-8641-character');
maze.children[0].appendChild(character);
characterPosition = { x: 0, y: 0 };
}
function moveCharacter(dx, dy) {
if (isPaused || !isGameStarted) return;
const newX = characterPosition.x + dx;
const newY = characterPosition.y + dy;
if (newX >= 0 && newX < GRID_SIZE && newY >= 0 && newY < GRID_SIZE && mazeGrid[newY][newX] !== 1) {
characterPosition.x = newX;
characterPosition.y = newY;
maze.children[newY * GRID_SIZE + newX].appendChild(character);
if (newX === endPosition.x && newY === endPosition.y) {
alert('Congratulations! You won!');
isGameStarted = false;
document.getElementById('startBtn').disabled = false;
}
}
}
document.getElementById('startBtn').addEventListener('click', () => {
if (!isGameStarted) {
createMaze();
createCharacter();
isGameStarted = true;
document.getElementById('startBtn').disabled = true;
}
});
document.getElementById('newGameBtn').addEventListener('click', () => {
createMaze();
createCharacter();
isGameStarted = true;
isPaused = false;
document.getElementById('startBtn').disabled = true;
document.getElementById('pauseBtn').textContent = 'Pause';
});
document.getElementById('pauseBtn').addEventListener('click', () => {
if (isGameStarted) {
isPaused = !isPaused;
document.getElementById('pauseBtn').textContent = isPaused ? 'Resume' : 'Pause';
}
});
document.addEventListener('keydown', (event) => {
if (isPaused || !isGameStarted) return;
switch (event.key) {
case 'ArrowUp': moveCharacter(0, -1); break;
case 'ArrowDown': moveCharacter(0, 1); break;
case 'ArrowLeft': moveCharacter(-1, 0); break;
case 'ArrowRight': moveCharacter(1, 0); break;
}
});
</script>
</body>
</html>