| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Guaranteed Path Maze</title> |
| <style> |
| body { |
| margin: 0; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 100vh; |
| background: #1a1a2e; |
| font-family: Arial, sans-serif; |
| color: #fff; |
| } |
| |
| #game-container { |
| position: relative; |
| padding: 20px; |
| background: rgba(0, 0, 0, 0.8); |
| border-radius: 15px; |
| box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); |
| } |
| |
| #maze-container { |
| position: relative; |
| border: 3px solid #444; |
| } |
| |
| #maze { |
| display: grid; |
| gap: 1px; |
| } |
| |
| .cell { |
| width: 40px; |
| height: 40px; |
| box-sizing: border-box; |
| border: 1px solid #333; |
| } |
| |
| .wall { |
| background: #2c3e50; |
| box-shadow: inset 0 0 10px rgba(0,0,0,0.5); |
| } |
| |
| .path { |
| background: #34495e; |
| } |
| |
| #player { |
| width: 30px; |
| height: 30px; |
| background: #2ecc71; |
| border-radius: 50%; |
| position: absolute; |
| transition: all 0.2s ease; |
| box-shadow: 0 0 15px #2ecc71; |
| z-index: 2; |
| } |
| |
| .goal { |
| background: #e74c3c !important; |
| animation: pulse 1.5s infinite; |
| } |
| |
| #hud { |
| display: flex; |
| justify-content: space-between; |
| padding: 10px; |
| background: rgba(0, 0, 0, 0.5); |
| border-radius: 10px; |
| margin-bottom: 20px; |
| } |
| |
| #timer { |
| font-size: 24px; |
| color: #e74c3c; |
| } |
| |
| #level-display { |
| font-size: 24px; |
| color: #3498db; |
| } |
| |
| .modal { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| padding: 20px; |
| border-radius: 10px; |
| text-align: center; |
| display: none; |
| z-index: 100; |
| } |
| |
| #success-modal { |
| background: rgba(46, 204, 113, 0.9); |
| } |
| |
| #fail-modal { |
| background: rgba(231, 76, 60, 0.9); |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(0.95); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(0.95); } |
| } |
| |
| button { |
| padding: 10px 20px; |
| margin: 5px; |
| border: none; |
| border-radius: 5px; |
| background: #3498db; |
| color: white; |
| cursor: pointer; |
| transition: background 0.3s; |
| } |
| |
| button:hover { |
| background: #2980b9; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="game-container"> |
| <div id="hud"> |
| <div id="level-display">Level: 1</div> |
| <div id="timer">Time: 30</div> |
| </div> |
| <div id="maze-container"> |
| <div id="maze"></div> |
| <div id="player"></div> |
| </div> |
| <div id="success-modal" class="modal"> |
| <h2>Level Complete!</h2> |
| <button onclick="nextLevel()">Next Level</button> |
| </div> |
| <div id="fail-modal" class="modal"> |
| <h2>Time's Up!</h2> |
| <button onclick="restartLevel()">Try Again</button> |
| </div> |
| <div style="text-align: center; margin-top: 10px;"> |
| <button onclick="restartLevel()">Restart Level</button> |
| </div> |
| </div> |
|
|
| <script> |
| const mazes = [ |
| |
| [ |
| [1,1,1,1,1,1,1,1,1,1], |
| [1,0,0,0,0,0,1,0,0,1], |
| [1,1,1,1,1,0,1,0,1,1], |
| [1,0,0,0,0,0,0,0,0,1], |
| [1,0,1,1,1,1,1,1,0,1], |
| [1,0,0,0,0,0,0,0,0,1], |
| [1,1,1,1,1,1,1,1,0,1], |
| [1,0,0,0,0,0,0,0,0,1], |
| [1,0,1,1,1,1,1,1,2,1], |
| [1,1,1,1,1,1,1,1,1,1] |
| ], |
| |
| [ |
| [1,1,1,1,1,1,1,1,1,1,1,1], |
| [1,0,0,0,0,0,0,0,0,0,0,1], |
| [1,0,1,1,1,1,1,1,1,1,0,1], |
| [1,0,1,0,0,0,0,0,0,0,0,1], |
| [1,0,1,0,1,1,1,1,1,1,1,1], |
| [1,0,1,0,0,0,0,0,0,0,0,1], |
| [1,0,1,1,1,1,1,1,1,1,0,1], |
| [1,0,0,0,0,0,0,0,0,1,0,1], |
| [1,1,1,1,1,1,1,1,0,1,0,1], |
| [1,0,0,0,0,0,0,0,0,1,0,1], |
| [1,0,1,1,1,1,1,1,1,1,2,1], |
| [1,1,1,1,1,1,1,1,1,1,1,1] |
| ], |
| |
| [ |
| [1,1,1,1,1,1,1,1,1,1,1,1,1,1], |
| [1,0,0,0,0,0,0,0,0,0,0,0,0,1], |
| [1,1,1,1,1,1,1,1,1,1,1,1,0,1], |
| [1,0,0,0,0,0,0,0,0,0,0,0,0,1], |
| [1,0,1,1,1,1,1,1,1,1,1,1,1,1], |
| [1,0,0,0,0,0,0,0,0,0,0,0,0,1], |
| [1,1,1,1,1,1,1,1,1,1,1,1,0,1], |
| [1,0,0,0,0,0,0,0,0,0,0,0,0,1], |
| [1,0,1,1,1,1,1,1,1,1,1,1,1,1], |
| [1,0,0,0,0,0,0,0,0,0,0,0,0,1], |
| [1,1,1,1,1,1,1,1,1,1,1,1,0,1], |
| [1,0,0,0,0,0,0,0,0,0,0,0,0,1], |
| [1,0,1,1,1,1,1,1,1,1,1,1,2,1], |
| [1,1,1,1,1,1,1,1,1,1,1,1,1,1] |
| ] |
| ]; |
| |
| let currentLevel = 0; |
| let timeLeft = 30; |
| let timerInterval; |
| let playerPos = { x: 1, y: 1 }; |
| const player = document.getElementById('player'); |
| |
| function createMaze() { |
| const maze = document.getElementById('maze'); |
| const currentMaze = mazes[currentLevel]; |
| maze.style.gridTemplateColumns = `repeat(${currentMaze[0].length}, 40px)`; |
| |
| maze.innerHTML = ''; |
| for(let y = 0; y < currentMaze.length; y++) { |
| for(let x = 0; x < currentMaze[y].length; x++) { |
| const cell = document.createElement('div'); |
| cell.className = 'cell'; |
| if(currentMaze[y][x] === 1) cell.classList.add('wall'); |
| if(currentMaze[y][x] === 0) cell.classList.add('path'); |
| if(currentMaze[y][x] === 2) cell.classList.add('goal'); |
| maze.appendChild(cell); |
| } |
| } |
| } |
| |
| function updatePlayerPosition() { |
| player.style.left = `${playerPos.x * 40 + 5}px`; |
| player.style.top = `${playerPos.y * 40 + 5}px`; |
| } |
| |
| function startTimer() { |
| clearInterval(timerInterval); |
| timeLeft = 30; |
| updateTimer(); |
| timerInterval = setInterval(() => { |
| timeLeft--; |
| updateTimer(); |
| if(timeLeft <= 0) { |
| clearInterval(timerInterval); |
| document.getElementById('fail-modal').style.display = 'block'; |
| } |
| }, 1000); |
| } |
| |
| function updateTimer() { |
| document.getElementById('timer').textContent = `Time: ${timeLeft}`; |
| } |
| |
| function handleMovement(e) { |
| if(timeLeft <= 0) return; |
| |
| const oldPos = {...playerPos}; |
| const currentMaze = mazes[currentLevel]; |
| |
| switch(e.key) { |
| case 'ArrowUp': playerPos.y--; break; |
| case 'ArrowDown': playerPos.y++; break; |
| case 'ArrowLeft': playerPos.x--; break; |
| case 'ArrowRight': playerPos.x++; break; |
| } |
| |
| if(currentMaze[playerPos.y][playerPos.x] === 1) { |
| playerPos = oldPos; |
| } |
| |
| updatePlayerPosition(); |
| checkWin(); |
| } |
| |
| function checkWin() { |
| const currentMaze = mazes[currentLevel]; |
| if(currentMaze[playerPos.y][playerPos.x] === 2) { |
| clearInterval(timerInterval); |
| document.getElementById('success-modal').style.display = 'block'; |
| } |
| } |
| |
| function nextLevel() { |
| currentLevel++; |
| if(currentLevel >= mazes.length) { |
| alert('Congratulations! You completed all levels!'); |
| currentLevel = 0; |
| } |
| document.getElementById('success-modal').style.display = 'none'; |
| document.getElementById('level-display').textContent = `Level: ${currentLevel + 1}`; |
| resetLevel(); |
| } |
| |
| function restartLevel() { |
| document.getElementById('fail-modal').style.display = 'none'; |
| resetLevel(); |
| } |
| |
| function resetLevel() { |
| playerPos = { x: 1, y: 1 }; |
| createMaze(); |
| updatePlayerPosition(); |
| startTimer(); |
| } |
| |
| document.addEventListener('keydown', handleMovement); |
| createMaze(); |
| updatePlayerPosition(); |
| startTimer(); |
| </script> |
| </body> |
| </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script> |
