Hacker Maze Game

Maze Game

body { font-family: monospace; background-color: #000; color: #fbb034; /* Default text color - Fire like */ margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { text-align: center; } h1 { margin-bottom: 20px; color: #a335ee; /* Purple for Heading */ text-shadow: 2px 2px 5px #ff4500; /* Fire glow effect */ } #maze-container { border: 2px solid #fbb034; /* Fire border */ margin-bottom: 20px; box-shadow: 0 0 20px #ff4500; /* Glowing container */ } #mazeCanvas { background-color: #333; /* Darker background for canvas */ } #game-controls button { padding: 10px 20px; background-color: #fbb034; /* Fire button */ color: #000; border: none; cursor: pointer; font-family: monospace; transition: background-color 0.3s, color 0.3s; box-shadow: 0 0 10px #ff4500; /* Button glow */ } #game-controls button:hover { background-color: #a335ee; /* Purple on hover */ color: #fff; box-shadow: 0 0 15px #a335ee; /* Hover glow */ } const canvas = document.getElementById('mazeCanvas'); const ctx = canvas.getContext('2d'); const startButton = document.getElementById('start-button'); const gridSize = 20; const gridWidth = canvas.width / gridSize; const gridHeight = canvas.height / gridSize; let maze = []; let playerPos = {x: 0, y: 0}; let gameStarted = false; function generateMaze() { maze = []; for (let y = 0; y < gridHeight; y++) { maze[y] = []; for (let x = 0; x < gridWidth; x++) { maze[y][x] = { wall: Math.random() < 0.3, visited: false, distance: Infinity }; } } maze[0][0].wall = false; maze[gridHeight - 1][gridWidth - 1].wall = false; solveMaze(); } function solveMaze() { const startNode = {x: 0, y: 0}; const endNode = {x: gridWidth - 1, y: gridHeight - 1}; const queue = [startNode]; maze[0][0].distance = 0; while (queue.length > 0) { const current = queue.shift(); if (current.x === endNode.x && current.y === endNode.y) { return; } const neighbors = getNeighbors(current); for (const neighbor of neighbors) { if (!maze[neighbor.y][neighbor.x].wall && maze[neighbor.y][neighbor.x].distance === Infinity) { maze[neighbor.y][neighbor.x].distance = maze[current.y][current.x].distance + 1; queue.push(neighbor); } } } } function getNeighbors(node) { const neighbors = []; const directions = [{dx: 0, dy: -1}, {dx: 0, dy: 1}, {dx: -1, dy: 0}, {dx: 1, dy: 0}]; for (const dir of directions) { const newX = node.x + dir.dx; const newY = node.y + dir.dy; if (newX >= 0 && newX < gridWidth && newY >= 0 && newY < gridHeight) { neighbors.push({x: newX, y: newY}); } } return neighbors; } function drawMaze() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let y = 0; y < gridHeight; y++) { for (let x = 0; x < gridWidth; x++) { if (y === 0 && x === 0) { ctx.fillStyle = '#a335ee'; // Purple start ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize); } else if (y === gridHeight - 1 && x === gridWidth - 1) { ctx.fillStyle = '#007bff'; // Blue end ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize); } else if (maze[y][x].wall) { // Fire wall gradient let gradient = ctx.createLinearGradient(x * gridSize, y * gridSize, (x + 1) * gridSize, (y + 1) * gridSize); gradient.addColorStop(0, '#ff6600'); // Darker orange gradient.addColorStop(0.5, '#ffcc00'); // Bright yellow gradient.addColorStop(1, '#ff3300'); // Red ctx.fillStyle = gradient; ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize); // Flame details - simple lines ctx.strokeStyle = '#ff0000'; // Red flame color ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(x * gridSize + gridSize / 2, y * gridSize); // Top center ctx.lineTo(x * gridSize + gridSize / 4, y * gridSize + gridSize / 2); // Mid left ctx.lineTo(x * gridSize + 3 * gridSize / 4, y * gridSize + gridSize / 2); // Mid right ctx.lineTo(x * gridSize + gridSize / 2, (y + 1) * gridSize); // Bottom center ctx.closePath(); ctx.stroke(); } } } drawPlayer(); } function drawPlayer() { ctx.fillStyle = 'red'; ctx.fillRect(playerPos.x * gridSize, playerPos.y * gridSize, gridSize, gridSize); } function resetPlayerPosition() { playerPos = {x: 0, y: 0}; } function handleKeyDown(event) { if (!gameStarted) return; let newX = playerPos.x; let newY = playerPos.y; switch (event.key) { case 'ArrowUp': case 'w': newY--; break; case 'ArrowDown': case 's': newY++; break; case 'ArrowLeft': case 'a': newX--; break; case 'ArrowRight': case 'd': newX++; break; default: return; } if (newX >= 0 && newX < gridWidth && newY >= 0 && newY < gridHeight && !maze[newY][newX].wall) { playerPos.x = newX; playerPos.y = newY; drawMaze(); if (playerPos.x === gridWidth - 1 && playerPos.y === gridHeight - 1) { gameStarted = false; alert('Maze Solved!'); } } } startButton.addEventListener('click', () => { gameStarted = true; generateMaze(); resetPlayerPosition(); drawMaze(); document.addEventListener('keydown', handleKeyDown); });