Glitched Maze

Glitched Maze

WARNING! SYSTEM ERROR

body { font-family: monospace; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #111; color: #eee; transition: background-color 0.1s ease; /* For flashing effect */ } .container { text-align: center; position: relative; /* For positioning virus warning */ } canvas { background-color: #333; border: 2px solid #eee; } #message { margin-top: 10px; } #restartButton { margin-top: 20px; padding: 10px 20px; background-color: #555; color: #eee; border: none; cursor: pointer; } #restartButton:hover { background-color: #777; } .virus-warning { position: absolute; top: 0; left: 0; width: 100%; padding: 20px; background-color: rgba(255, 0, 0, 0.8); /* Red background */ color: #eee; font-size: 2em; text-align: center; z-index: 10; /* Ensure it's on top */ display: none; /* Hidden by default */ animation: virusFlash 0.5s infinite alternate; /* Flashing animation */ } @keyframes virusFlash { from { opacity: 1; } to { opacity: 0.5; } } const canvas = document.getElementById('mazeCanvas'); const ctx = canvas.getContext('2d'); const messageDiv = document.getElementById('message'); const restartButton = document.getElementById('restartButton'); const virusWarningDiv = document.getElementById('virusWarning'); const glitchSound = document.getElementById('glitchSound'); const cellSize = 20; let gridSize = 20; let maze, player, level = 1; let glitchFactor = 0; let cubeRotation = 0; let endCell; let originalCode = document.getElementById('mazeCanvas').nextElementSibling.textContent; let codeCorruptionLevel = 0; let flashInterval; let soundInterval; let virusWarningInterval; restartButton.addEventListener('click', startGame); function startGame() { level = 1; glitchFactor = 0; gridSize = 20; codeCorruptionLevel = 0; resetCode(); generateMaze(); player = { x: 0, y: 0 }; messageDiv.textContent = `Level ${level}`; drawMaze(); cubeRotation = 0; stopFlash(); stopSound(); hideVirusWarning(); } function resetCode() { const scriptTag = document.getElementById('mazeCanvas').nextElementSibling; scriptTag.textContent = originalCode; } function generateMaze() { maze = []; for (let x = 0; x < gridSize; x++) { maze[x] = []; for (let y = 0; y < gridSize; y++) { maze[x][y] = { wall: true, visited: false }; } } generatePath(0, 0); findEndCell(); } function generatePath(x, y) { maze[x][y].wall = false; maze[x][y].visited = true; const directions = shuffle([[0, 1], [0, -1], [1, 0], [-1, 0]]); for (const [dx, dy] of directions) { const newX = x + dx * 2; const newY = y + dy * 2; if (isValid(newX, newY) && maze[newX][newY].wall) { maze[x + dx][y + dy].wall = false; generatePath(newX, newY); } else if (isValid(newX, newY) && Math.random() < 0.3) { maze[x + dx][y + dy].wall = false; } } } function findEndCell() { let furthestCell = { x: 0, y: 0, distance: 0 }; for (let x = 0; x < gridSize; x++) { for (let y = 0; y < gridSize; y++) { if (!maze[x][y].wall) { let distance = x + y; if (distance > furthestCell.distance) { furthestCell = { x: x, y: y, distance: distance }; } } } } endCell = { x: furthestCell.x, y: furthestCell.y }; } function isValid(x, y) { return x >= 0 && x < gridSize && y >= 0 && y < gridSize; } function shuffle(array) { let currentIndex = array.length, randomIndex; while (currentIndex > 0) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex--; [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]]; } return array; } function drawMaze() { ctx.clearRect(0, 0, canvas.width, canvas.height); canvas.width = gridSize * cellSize; canvas.height = gridSize * cellSize; ctx.fillStyle = '#eee'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (let x = 0; x < gridSize; x++) { for (let y = 0; y < gridSize; y++) { if (maze[x][y].wall) { ctx.fillStyle = '#111'; if (glitchFactor > 0) { ctx.fillStyle = getGlitchedColor('#111'); } ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize); } } } drawEndCube(); drawPlayer(); } function drawPlayer() { if (Math.random() > codeCorruptionLevel) { ctx.fillStyle = 'red'; if (glitchFactor > 1) { ctx.fillStyle = getGlitchedColor('red'); } ctx.fillRect(player.x * cellSize, player.y * cellSize, cellSize, cellSize); } } function getGlitchedColor(baseColor) { let color = baseColor; if (Math.random() < glitchFactor / 5) { const colors = ['red', 'green', 'blue', '#111', '#eee']; color = colors[Math.floor(Math.random() * colors.length)]; } return color; } document.addEventListener('keydown', (event) => { let newX = player.x; let newY = player.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; } if (isValid(newX, newY) && !maze[newX][newY].wall) { player.x = newX; player.y = newY; drawMaze(); if (player.x === endCell.x && player.y === endCell.y) { levelUp(); } } }); function levelUp() { level++; glitchFactor = Math.min(level / 10, 1); gridSize += 2; codeCorruptionLevel = Math.min(level / 15, 0.8); // Increase code ignore chance corruptCode(); generateMaze(); player = { x: 0, y: 0 }; messageDiv.textContent = `Level ${level}`; drawMaze(); startFlash(); startSound(); showVirusWarning(); } function corruptCode() { if (Math.random() > codeCorruptionLevel) return; // Only corrupt sometimes const scriptTag = document.getElementById('mazeCanvas').nextElementSibling; let code = scriptTag.textContent; let lines = code.split('\n'); let lineToCorrupt = Math.floor(Math.random() * lines.length); if (lines[lineToCorrupt].trim().startsWith('//')) return; // Dont corrupt comments let words = lines[lineToCorrupt].trim().split(/\s+/); if (words.length > 1) { let wordToCommentOut = Math.floor(Math.random() * words.length); words[wordToCommentOut] = '//' + words[wordToCommentOut]; lines[lineToCorrupt] = lines[lineToCorrupt].replace(lines[lineToCorrupt].trim(), words.join(' ')); scriptTag.textContent = lines.join('\n'); } } function drawEndCube() { if (Math.random() > codeCorruptionLevel) { const endX = endCell.x * cellSize; const endY = endCell.y * cellSize; const cubeSize = cellSize; ctx.save(); ctx.translate(endX + cubeSize / 2, endY + cubeSize / 2); ctx.rotate(cubeRotation); ctx.translate(-cubeSize / 2, -cubeSize / 2); ctx.fillStyle = 'green'; if (glitchFactor > 1) { ctx.fillStyle = getGlitchedColor('green'); } ctx.fillRect(0, 0, cubeSize, cubeSize); ctx.fillStyle = 'darkgreen'; if (glitchFactor > 1) { ctx.fillStyle = getGlitchedColor('darkgreen'); } ctx.fillRect(cubeSize / 2, cubeSize / 2, cubeSize / 2, cubeSize / 2); ctx.restore(); cubeRotation += 0.02; if (Math.random() > codeCorruptionLevel) { requestAnimationFrame(drawEndCube); } } } // Flashing effect function startFlash() { if (!flashInterval) { flashInterval = setInterval(() => { document.body.style.backgroundColor = document.body.style.backgroundColor === '#111' ? '#550000' : '#111'; // Flash red }, 200); // Quick flash } } function stopFlash() { clearInterval(flashInterval); flashInterval = null; document.body.style.backgroundColor = '#111'; // Reset background } // Sound effect function startSound() { if (!soundInterval) { soundInterval = setInterval(() => { glitchSound.play(); }, 2000); // Play sound every 2 seconds } } function stopSound() { clearInterval(soundInterval); soundInterval = null; glitchSound.pause(); glitchSound.currentTime = 0; // Reset sound } // Virus warning message function showVirusWarning() { virusWarningDiv.style.display = 'block'; if (!virusWarningInterval) { virusWarningInterval = setInterval(() => { virusWarningDiv.textContent = virusWarningDiv.textContent === 'WARNING! SYSTEM ERROR' ? 'SYSTEM CRITICAL!' : 'WARNING! SYSTEM ERROR'; }, 1000); } } function hideVirusWarning() { virusWarningDiv.style.display = 'none'; clearInterval(virusWarningInterval); virusWarningInterval = null; } startGame();