|
|
<!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> |
