I'll create a simple maze game using HTML, CSS, and JavaScript where the player navigates through a maze to reach the goal. Maze Game

Maze Game

Time: 0s

Moves: 0

* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { text-align: center; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 500px; width: 100%; } h1 { margin-bottom: 20px; color: #333; } .game-info { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 18px; font-weight: bold; } #maze-container { display: grid; margin: 0 auto 20px; border: 2px solid #333; } .cell { width: 30px; height: 30px; border: 1px solid #ccc; } .wall { background-color: #333; } .player { background-color: #4CAF50; border-radius: 50%; } .goal { background-color: #f44336; } .controls { margin: 20px 0; } .controls-row { display: flex; justify-content: center; margin: 5px 0; } button { padding: 10px 15px; margin: 0 5px; font-size: 16px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 5px; } button:hover { background-color: #45a049; } #restart { background-color: #2196F3; margin-top: 10px; } #restart:hover { background-color: #0b7dda; } class MazeGame { constructor(width, height) { this.width = width; this.height = height; this.mazeContainer = document.getElementById('maze-container'); this.timerElement = document.getElementById('timer'); this.movesElement = document.getElementById('moves'); this.restartButton = document.getElementById('restart'); this.controlButtons = { up: document.getElementById('up'), down: document.getElementById('down'), left: document.getElementById('left'), right: document.getElementById('right') }; this.maze = []; this.player = { x: 0, y: 0 }; this.goal = { x: 0, y: 0 }; this.moves = 0; this.timer = 0; this.timerInterval = null; this.gameActive = false; this.initEventListeners(); this.initGame(); } initEventListeners() { // Keyboard controls document.addEventListener('keydown', (e) => { if (!this.gameActive) return; switch (e.key) { case 'ArrowUp': this.movePlayer(0, -1); break; case 'ArrowDown': this.movePlayer(0, 1); break; case 'ArrowLeft': this.movePlayer(-1, 0); break; case 'ArrowRight': this.movePlayer(1, 0); break; } }); // Button controls this.controlButtons.up.addEventListener('click', () => this.movePlayer(0, -1)); this.controlButtons.down.addEventListener('click', () => this.movePlayer(0, 1)); this.controlButtons.left.addEventListener('click', () => this.movePlayer(-1, 0)); this.controlButtons.right.addEventListener('click', () => this.movePlayer(1, 0)); // Restart button this.restartButton.addEventListener('click', () => this.initGame()); } initGame() { this.stopTimer(); this.moves = 0; this.timer = 0; this.updateStats(); this.generateMaze(); this.renderMaze(); this.startTimer(); this.gameActive = true; } generateMaze() { // Initialize maze with walls this.maze = Array(this.height).fill().map(() => Array(this.width).fill(1)); // Create a path using a simple algorithm // Start at top-left corner this.player = { x: 1, y: 1 }; this.maze[this.player.y][this.player.x] = 0; // Set goal at bottom-right corner this.goal = { x: this.width - 2, y: this.height - 2 }; this.maze[this.goal.y][this.goal.x] = 0; // Create a simple path using recursive backtracking this.carvePassages(this.player.x, this.player.y); // Ensure there's a path to the goal this.ensurePathToGoal(); } carvePassages(x, y) { // Directions: [dx, dy] const directions = [ [0, -2], // Up [2, 0], // Right [0, 2], // Down [-2, 0] // Left ]; // Shuffle directions for randomness directions.sort(() => Math.random() - 0.5); for (const [dx, dy] of directions) { const nx = x + dx; const ny = y + dy; // Check if the new position is within bounds and is a wall if (nx > 0 && nx < this.width - 1 && ny > 0 && ny < this.height - 1 && this.maze[ny][nx] === 1) { // Carve a passage this.maze[y + dy/2][x + dx/2] = 0; this.maze[ny][nx] = 0; // Continue recursively this.carvePassages(nx, ny); } } } ensurePathToGoal() { // Simple method to ensure there's a path to the goal // Create a direct path if needed let x = this.player.x; let y = this.player.y; while (x < this.goal.x) { x++; this.maze[y][x] = 0; } while (y < this.goal.y) { y++; this.maze[y][x] = 0; } } renderMaze() { this.mazeContainer.innerHTML = ''; this.mazeContainer.style.gridTemplateColumns = `repeat(${this.width}, 30px)`; for (let y = 0; y < this.height; y++) { for (let x = 0; x < this.width; x++) { const cell = document.createElement('div'); cell.className = 'cell'; if (this.maze[y][x] === 1) { cell.classList.add('wall'); } if (x === this.player.x && y === this.player.y) { cell.classList.add('player'); } if (x === this.goal.x && y === this.goal.y) { cell.classList.add('goal'); } this.mazeContainer.appendChild(cell); } } } movePlayer(dx, dy) { if (!this.gameActive) return; const newX = this.player.x + dx; const newY = this.player.y + dy; // Check if the move is valid (within bounds and not a wall) if ( newX >= 0 && newX < this.width && newY >= 0 && newY < this.height && this.maze[newY][newX] === 0 ) { this.player.x = newX; this.player.y = newY; this.moves++; this.updateStats(); this.renderMaze(); // Check if player reached the goal if (this.player.x === this.goal.x && this.player.y === this.goal.y) { this.gameWon(); } } } startTimer() { this.timerInterval = setInterval(() => { this.timer++; this.updateStats(); }, 1000); } stopTimer() { if (this.timerInterval) { clearInterval(this.timerInterval); this.timerInterval = null; } } updateStats() { this.timerElement.textContent = `Time: ${this.timer}s`; this.movesElement.textContent = `Moves: ${this.moves}`; } gameWon() { this.gameActive = false; this.stopTimer(); setTimeout(() => { alert(`Congratulations! You completed the maze in ${this.timer} seconds with ${this.moves} moves.`); }, 100); } } // Start the game when the page loads window.addEventListener('DOMContentLoaded', () => { const game = new MazeGame(15, 15); }); The maze game is now ready to play! Use the arrow keys or the on-screen buttons to navigate through the maze. Your goal is to reach the red square (goal) from the green circle (player). The game tracks your time and number of moves, and you can restart anytime with the restart button.