Spaces:

Centrix
/

cyber-flight

Running

File size: 33,648 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CYBER FLIGHT | Neural Net Challenge</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Quantico:wght@400;700&display=swap');

        :root {
            --primary: #00ff9d;
            --secondary: #00a1ff;
            --danger: #ff2a6d;
            --bg-dark: #0e0e2c;
            --bg-darker: #070716;
            --glow-intensity: 0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--bg-darker);
            font-family: 'Quantico', sans-serif;
            color: white;
            overflow: hidden;
            height: 100vh;
            display: flex;
            flex-direction: column;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(0, 255, 157, 0.05) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, rgba(0, 161, 255, 0.05) 0%, transparent 20%),
                linear-gradient(var(--bg-darker), var(--bg-dark));
        }

        header {
            padding: 1.5rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(7, 7, 22, 0.8);
            border-bottom: 1px solid rgba(0, 255, 157, 0.2);
            box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);
            z-index: 10;
        }

        .logo {
            font-family: 'Orbitron', sans-serif;
            font-weight: 900;
            font-size: 2rem;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px rgba(0, 255, 157, 0.3);
            letter-spacing: 2px;
        }

        .stats {
            display: flex;
            gap: 2rem;
        }

        .stat-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.5rem 1.5rem;
            background: rgba(14, 14, 44, 0.7);
            border: 1px solid rgba(0, 161, 255, 0.2);
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0, 161, 255, 0.1);
        }

        .stat-label {
            font-size: 0.7rem;
            color: var(--secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .stat-value {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            color: var(--primary);
            font-weight: 700;
        }

        .game-container {
            flex: 1;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #gameCanvas {
            border: 2px solid rgba(0, 255, 157, 0.3);
            box-shadow: 
                0 0 30px rgba(0, 255, 157, 0.2),
                inset 0 0 20px rgba(0, 255, 157, 0.1);
            background-color: var(--bg-dark);
            border-radius: 4px;
            position: relative;
            overflow: hidden;
        }

        .scanline {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                rgba(0, 255, 157, 0.05) 50%,
                transparent 100%
            );
            background-size: 100% 8px;
            pointer-events: none;
            animation: scanline 8s linear infinite;
        }

        @keyframes scanline {
            0% { transform: translateY(0); }
            100% { transform: translateY(100vh); }
        }

        .noise {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAQElEQVR42u3OMQEAAAQAoNuVzV4GJ3xHkCSZ2JIkSZK0M7ElSZIkSZIkSZIkSZKk/zAx3ABFwz1QNNwDSZIkSZKW7QEmZgxYI0i3NgAAAABJRU5ErkJggg==");
            opacity: 0.03;
            pointer-events: none;
        }

        .menu {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(7, 7, 22, 0.9);
            border: 2px solid var(--primary);
            border-radius: 6px;
            padding: 2rem 3rem;
            text-align: center;
            box-shadow: 
                0 0 30px rgba(0, 255, 157, 0.3),
                inset 0 0 20px rgba(0, 255, 157, 0.2);
            z-index: 100;
        }

        .menu.hidden {
            display: none;
        }

        .menu h2 {
            font-family: 'Orbitron', sans-serif;
            color: var(--primary);
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        .menu p {
            color: var(--secondary);
            margin-bottom: 2rem;
            max-width: 300px;
            line-height: 1.6;
        }

        .btn {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            border: none;
            color: var(--bg-darker);
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
            padding: 0.8rem 2rem;
            border-radius: 4px;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(0, 255, 157, 0.5);
            position: relative;
            overflow: hidden;
        }

        .btn:hover {
            box-shadow: 0 0 25px rgba(0, 255, 157, 0.8);
            transform: translateY(-2px);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
            );
            transition: none;
        }

        .btn:hover::before {
            left: 100%;
            transition: all 0.5s ease-in-out;
        }

        .glow {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: radial-gradient(circle at center, rgba(0, 255, 157, 0.1) 0%, transparent 70%);
            opacity: var(--glow-intensity);
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        .game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 0, 77, 0.1);
            padding: 2rem;
            border: 2px solid var(--danger);
            border-radius: 6px;
            text-align: center;
            box-shadow: 0 0 30px rgba(255, 42, 109, 0.4);
            z-index: 100;
            display: none;
        }

        .game-over h2 {
            color: var(--danger);
            margin-bottom: 1rem;
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
        }

        .terminal {
            font-family: monospace;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 1rem;
            border-radius: 4px;
            margin: 1rem 0;
            text-align: left;
            max-height: 150px;
            overflow-y: auto;
            border-left: 3px solid var(--primary);
        }

        .terminal-line {
            margin-bottom: 0.3rem;
            color: var(--primary);
        }

        .terminal-line.system {
            color: var(--secondary);
        }

        .terminal-line.warning {
            color: var(--danger);
        }

        .pipes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .cyber-circle {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 2px solid var(--primary);
            box-shadow: 
                0 0 20px var(--primary),
                inset 0 0 20px var(--primary);
            opacity: 0.1;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">CYBER FLIGHT</div>
        <div class="stats">
            <div class="stat-box">
                <span class="stat-label">Neural Score</span>
                <span class="stat-value" id="score">0</span>
            </div>
            <div class="stat-box">
                <span class="stat-label">High Score</span>
                <span class="stat-value" id="high-score">0</span>
            </div>
            <div class="stat-box">
                <span class="stat-label">Energy</span>
                <span class="stat-value" id="energy">100%</span>
            </div>
        </div>
    </header>

    <div class="game-container">
        <canvas id="gameCanvas" width="350" height="600"></canvas>
        <div class="scanline"></div>
        <div class="noise"></div>
        <div class="glow"></div>

        <div class="menu">
            <h2>Neural Net Challenge</h2>
            <div class="terminal">
                <div class="terminal-line system">> System initializing...</div>
                <div class="terminal-line">> Cybernetic augmentation complete</div>
                <div class="terminal-line system">> Neural interface active</div>
                <div class="terminal-line">> Flight systems: ONLINE</div>
                <div class="terminal-line system">> Ready for simulation</div>
            </div>
            <p>Execute neural synchronization to commence cybernetic flight simulation.</p>
            <button class="btn" id="startBtn">ENGAGE SYSTEMS</button>
        </div>

        <div class="game-over">
            <h2>SYSTEM FAILURE</h2>
            <div class="terminal">
                <div class="terminal-line warning">> Critical impact detected</div>
                <div class="terminal-line">> Neural score: <span id="final-score">0</span></div>
                <div class="terminal-line system">> Rebooting flight systems...</div>
            </div>
            <button class="btn" id="restartBtn">REINITIALIZE</button>
        </div>

        <div id="cyber-circles"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('gameCanvas');
            const ctx = canvas.getContext('2d');
            const startBtn = document.getElementById('startBtn');
            const restartBtn = document.getElementById('restartBtn');
            const menu = document.querySelector('.menu');
            const gameOver = document.querySelector('.game-over');
            const scoreDisplay = document.getElementById('score');
            const highScoreDisplay = document.getElementById('highScore');
            const finalScoreDisplay = document.getElementById('final-score');
            const energyDisplay = document.getElementById('energy');
            const glow = document.querySelector('.glow');
            
            // Game variables
            let score = 0;
            let highScore = localStorage.getItem('cyberFlightHighScore') || 0;
            let gameRunning = false;
            let animationId;
            let gameSpeed = 2;
            let gravity = 0.5;
            let energy = 100;
            let energyDrainInterval;
            let glowIntensity = 0;
            
            // Bird properties
            const bird = {
                x: 100,
                y: canvas.height / 2,
                width: 30,
                height: 24,
                velocity: 0,
                flapPower: -8,
                color: '#00ff9d'
            };
            
            // Pipes
            const pipes = [];
            const pipeWidth = 60;
            const pipeGap = 150;
            let pipeFrequency = 120; // frames
            
            function createPipe() {
                // Only create pipes if game is running
                if (!gameRunning) return;
                
                const minHeight = 50;
                const maxHeight = canvas.height - pipeGap - minHeight;
                const height = Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;
                
                pipes.push({
                    x: canvas.width,
                    height: height,
                    passed: false,
                    color: `hsl(${Math.floor(Math.random() * 60) + 180}, 80%, 50%)`
                });
            }
            
            function drawBird() {
                // Cybernetic bird with glow effect
                ctx.save();
                
                // Glow effect
                const gradient = ctx.createRadialGradient(
                    bird.x + bird.width / 2,
                    bird.y + bird.height / 2,
                    0,
                    bird.x + bird.width / 2,
                    bird.y + bird.height / 2,
                    bird.width * 2
                );
                gradient.addColorStop(0, bird.color);
                gradient.addColorStop(1, 'rgba(0, 255, 157, 0)');
                
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(
                    bird.x + bird.width / 2,
                    bird.y + bird.height / 2,
                    bird.width * 1.5,
                    0,
                    Math.PI * 2
                );
                ctx.fill();
                
                // Bird body (cybernetic shape)
                ctx.fillStyle = bird.color;
                ctx.beginPath();
                ctx.moveTo(bird.x + bird.width * 0.3, bird.y);
                ctx.lineTo(bird.x + bird.width, bird.y + bird.height / 2);
                ctx.lineTo(bird.x + bird.width * 0.3, bird.y + bird.height);
                ctx.lineTo(bird.x, bird.y + bird.height / 2);
                ctx.closePath();
                ctx.fill();
                
                // Bird eye (glowing)
                ctx.fillStyle = '#00a1ff';
                ctx.beginPath();
                ctx.arc(
                    bird.x + bird.width * 0.6,
                    bird.y + bird.height * 0.4,
                    bird.width * 0.15,
                    0,
                    Math.PI * 2
                );
                ctx.fill();
                
                // Hexagonal pattern on wings
                ctx.strokeStyle = '#00a1ff';
                ctx.lineWidth = 1;
                drawHexPattern(bird.x + bird.width * 0.3, bird.y + bird.height / 2, 5, 10);
                
                ctx.restore();
            }
            
            function drawHexPattern(x, y, hexSize, count) {
                ctx.save();
                ctx.translate(x, y);
                
                for (let i = 0; i < count; i++) {
                    const hexX = i % 2 === 0 ? 
                        (Math.floor(i / 2) * hexSize * 1.5) : 
                        (Math.floor(i / 2) * hexSize * 1.5 + hexSize * 0.75);
                    const hexY = i % 2 === 0 ? 
                        -hexSize * 0.5 : 
                        hexSize * 0.5;
                    
                    drawHexagon(hexX, hexY, hexSize);
                }
                
                ctx.restore();
            }
            
            function drawHexagon(x, y, size) {
                ctx.beginPath();
                for (let i = 0; i < 6; i++) {
                    const angle = (i * 2 * Math.PI / 6) + (Math.PI / 6);
                    const xx = x + size * Math.cos(angle);
                    const yy = y + size * Math.sin(angle);
                    if (i === 0) {
                        ctx.moveTo(xx, yy);
                    } else {
                        ctx.lineTo(xx, yy);
                    }
                }
                ctx.closePath();
                ctx.stroke();
            }
            
            function drawPipes() {
                pipes.forEach((pipe, index) => {
                    // Top pipe
                    ctx.save();
                    
                    // Pipe gradient
                    const pipeGradient = ctx.createLinearGradient(
                        pipe.x, 0,
                        pipe.x + pipeWidth, 0
                    );
                    pipeGradient.addColorStop(0, 'rgba(0, 255, 157, 0)');
                    pipeGradient.addColorStop(0.1, pipe.color);
                    pipeGradient.addColorStop(0.9, pipe.color);
                    pipeGradient.addColorStop(1, 'rgba(0, 255, 157, 0)');
                    
                    ctx.fillStyle = pipeGradient;
                    
                    // Hexagon pattern on pipes
                    ctx.beginPath();
                    ctx.moveTo(pipe.x, pipe.height);
                    ctx.lineTo(pipe.x + pipeWidth, pipe.height);
                    ctx.lineTo(pipe.x + pipeWidth, 0);
                    ctx.lineTo(pipe.x, 0);
                    ctx.closePath();
                    ctx.fill();
                    
                    // Pipe border (glowing)
                    ctx.strokeStyle = pipe.color;
                    ctx.lineWidth = 2;
                    ctx.stroke();
                    
                    // Bottom pipe
                    const bottomY = pipe.height + pipeGap;
                    ctx.beginPath();
                    ctx.moveTo(pipe.x, bottomY);
                    ctx.lineTo(pipe.x + pipeWidth, bottomY);
                    ctx.lineTo(pipe.x + pipeWidth, canvas.height);
                    ctx.lineTo(pipe.x, canvas.height);
                    ctx.closePath();
                    ctx.fill();
                    
                    // Pipe border
                    ctx.stroke();
                    
                    // Circuit pattern
                    drawPipeCircuit(pipe, index);
                    
                    ctx.restore();
                });
            }
            
            function drawPipeCircuit(pipe, index) {
                ctx.save();
                ctx.strokeStyle = '#00a1ff';
                ctx.fillStyle = '#00a1ff';
                ctx.lineWidth = 1;
                
                // Draw circuit lines on top pipe
                const segments = Math.floor(pipe.height / 15);
                for (let i = 0; i < segments; i++) {
                    const y = i * 15;
                    if (i % 2 === index % 2) {
                        ctx.beginPath();
                        ctx.moveTo(pipe.x, y);
                        ctx.lineTo(pipe.x + pipeWidth, y);
                        ctx.stroke();
                    } else {
                        ctx.beginPath();
                        ctx.rect(pipe.x + pipeWidth * 0.3, y, pipeWidth * 0.4, 2);
                        ctx.fill();
                    }
                    
                    // Circuit nodes
                    if (i % 3 === 0) {
                        ctx.beginPath();
                        ctx.arc(
                            pipe.x + pipeWidth * 0.1,
                            y + 7,
                            2,
                            0,
                            Math.PI * 2
                        );
                        ctx.fill();
                        
                        ctx.beginPath();
                        ctx.arc(
                            pipe.x + pipeWidth * 0.9,
                            y + 7,
                            2,
                            0,
                            Math.PI * 2
                        );
                        ctx.fill();
                    }
                }
                
                // Draw circuit lines on bottom pipe
                const bottomY = pipe.height + pipeGap;
                const bottomHeight = canvas.height - bottomY;
                const bottomSegments = Math.floor(bottomHeight / 15);
                for (let i = 0; i < bottomSegments; i++) {
                    const y = bottomY + i * 15;
                    if (i % 2 === index % 2) {
                        ctx.beginPath();
                        ctx.moveTo(pipe.x, y);
                        ctx.lineTo(pipe.x + pipeWidth, y);
                        ctx.stroke();
                    } else {
                        ctx.beginPath();
                        ctx.rect(pipe.x + pipeWidth * 0.3, y, pipeWidth * 0.4, 2);
                        ctx.fill();
                    }
                    
                    // Circuit nodes
                    if (i % 3 === 0) {
                        ctx.beginPath();
                        ctx.arc(
                            pipe.x + pipeWidth * 0.1,
                            y + 7,
                            2,
                            0,
                            Math.PI * 2
                        );
                        ctx.fill();
                        
                        ctx.beginPath();
                        ctx.arc(
                            pipe.x + pipeWidth * 0.9,
                            y + 7,
                            2,
                            0,
                            Math.PI * 2
                        );
                        ctx.fill();
                    }
                }
                
                ctx.restore();
            }
            
            function updateBird() {
                bird.velocity += gravity;
                bird.y += bird.velocity;
                
                // Keep bird within canvas bounds
                if (bird.y < 0) {
                    bird.y = 0;
                    bird.velocity = 0;
                }
                
                if (bird.y + bird.height > canvas.height) {
                    bird.y = canvas.height - bird.height;
                    bird.velocity = 0;
                }
            }
            
            function updatePipes() {
                // Move pipes
                pipes.forEach((pipe) => {
                    pipe.x -= gameSpeed;
                    
                    // Check if bird passed the pipe
                    if (!pipe.passed && pipe.x + pipeWidth < bird.x) {
                        pipe.passed = true;
                        score++;
                        scoreDisplay.textContent = score;
                        energy = Math.min(100, energy + 5); // Energy boost for passing obstacles
                        energyDisplay.textContent = `${Math.floor(energy)}%`;
                        
                        // Trigger glow effect
                        glowIntensity = 0.5;
                        document.documentElement.style.setProperty('--glow-intensity', glowIntensity);
                        setTimeout(() => {
                            glowIntensity = 0;
                            document.documentElement.style.setProperty('--glow-intensity', glowIntensity);
                        }, 200);
                    }
                });
                
                // Remove off-screen pipes
                while (pipes.length > 0 && pipes[0].x + pipeWidth < 0) {
                    pipes.shift();
                }
                
                // Create new pipes
                if (frameCount % pipeFrequency === 0) {
                    createPipe();
                    
                    // Increase difficulty
                    if (score > 0 && score % 3 === 0) {
                        gameSpeed = Math.min(5, gameSpeed + 0.2);
                        pipeGap = Math.max(120, pipeGap - 5);
                        pipeFrequency = Math.max(80, pipeFrequency - 5);
                    }
                }
            }
            
            function checkCollisions() {
                // Check if bird hit top or bottom
                if (bird.y <= 0 || bird.y + bird.height >= canvas.height) {
                    endGame();
                    return;
                }
                
                // Check if bird hit any pipes
                for (const pipe of pipes) {
                    if (bird.x + bird.width > pipe.x && 
                        bird.x < pipe.x + pipeWidth && 
                        (bird.y < pipe.height || bird.y + bird.height > pipe.height + pipeGap)) {
                        endGame();
                        return;
                    }
                }
            }
            
            function drainEnergy() {
                energy = Math.max(0, energy - 0.5);
                energyDisplay.textContent = `${Math.floor(energy)}%`;
                
                // Change bird color based on energy level
                if (energy > 50) {
                    bird.color = '#00ff9d';
                } else if (energy > 20) {
                    bird.color = '#ffcc00';
                } else {
                    bird.color = '#ff2a6d';
                }
                
                // End game if energy depleted
                if (energy <= 0) {
                    endGame();
                }
            }
            
            function drawBackground() {
                // Dark gradient background
                ctx.fillStyle = '#070716';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // Grid pattern
                ctx.strokeStyle = 'rgba(0, 161, 255, 0.05)';
                ctx.lineWidth = 1;
                
                // Vertical lines
                for (let x = 0; x < canvas.width; x += 40) {
                    ctx.beginPath();
                    ctx.moveTo(x, 0);
                    ctx.lineTo(x, canvas.height);
                    ctx.stroke();
                }
                
                // Horizontal lines
                for (let y = 0; y < canvas.height; y += 40) {
                    ctx.beginPath();
                    ctx.moveTo(0, y);
                    ctx.lineTo(canvas.width, y);
                    ctx.stroke();
                }
                
                // Center line (cybernetic pulse)
                ctx.strokeStyle = 'rgba(0, 255, 157, 0.1)';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(canvas.width / 2, 0);
                ctx.lineTo(canvas.width / 2, canvas.height);
                ctx.stroke();
                
                // Moving scan lines
                ctx.fillStyle = 'rgba(0, 255, 157, 0.03)';
                for (let y = frameCount % 40; y < canvas.height; y += 40) {
                    ctx.fillRect(0, y, canvas.width, 2);
                }
            }
            
            function createCyberCircles() {
                const container = document.getElementById('cyber-circles');
                container.innerHTML = '';
                
                const circleCount = 15;
                
                for (let i = 0; i < circleCount; i++) {
                    const circle = document.createElement('div');
                    circle.className = 'cyber-circle';
                    
                    // Random position
                    const left = Math.random() * 100;
                    const top = Math.random() * 100;
                    
                    // Random size
                    const size = 50 + Math.random() * 150;
                    
                    // Random animation
                    const duration = 5 + Math.random() * 10;
                    const delay = Math.random() * 5;
                    
                    circle.style.left = `${left}%`;
                    circle.style.top = `${top}%`;
                    circle.style.width = `${size}px`;
                    circle.style.height = `${size}px`;
                    circle.style.animation = `pulse ${duration}s ${delay}s infinite alternate`;
                    
                    container.appendChild(circle);
                }
            }
            
            function startGame() {
                // Reset game state
                score = 0;
                energy = 100;
                gameSpeed = 2;
                bird.y = canvas.height / 2;
                bird.velocity = 0;
                pipes.length = 0;
                frameCount = 0;
                scoreDisplay.textContent = '0';
                energyDisplay.textContent = '100%';
                
                // Hide menu and show game
                menu.classList.add('hidden');
                gameOver.style.display = 'none';
                gameRunning = true;
                
                // Start energy drain
                clearInterval(energyDrainInterval);
                energyDrainInterval = setInterval(drainEnergy, 100);
                
                // Start game loop
                gameLoop();
            }
            
            function endGame() {
                gameRunning = false;
                clearInterval(energyDrainInterval);
                
                // Update high score
                if (score > highScore) {
                    highScore = score;
                    localStorage.setItem('cyberFlightHighScore', highScore);
                    document.getElementById('high-score').textContent = highScore;
                }
                
                // Show game over screen
                finalScoreDisplay.textContent = score;
                gameOver.style.display = 'block';
                
                cancelAnimationFrame(animationId);
            }
            
            function gameLoop() {
                if (!gameRunning) return;
                
                frameCount++;
                
                // Clear canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // Draw game elements
                drawBackground();
                drawPipes();
                drawBird();
                
                // Update game state
                updateBird();
                updatePipes();
                checkCollisions();
                
                animationId = requestAnimationFrame(gameLoop);
            }
            
            // Event listeners
            startBtn.addEventListener('click', startGame);
            restartBtn.addEventListener('click', startGame);
            
            document.addEventListener('keydown', (e) => {
                if (e.code === 'Space' || e.key === ' ' || e.key === 'ArrowUp') {
                    e.preventDefault();
                    
                    if (!gameRunning && menu.classList.contains('hidden')) {
                        startGame();
                    } else if (gameRunning) {
                        bird.velocity = bird.flapPower;
                        energy = Math.max(0, energy - 1); // Energy cost for flapping
                        energyDisplay.textContent = `${Math.floor(energy)}%`;
                    }
                }
            });
            
            canvas.addEventListener('click', (e) => {
                if (!gameRunning && menu.classList.contains('hidden')) {
                    startGame();
                } else if (gameRunning) {
                    bird.velocity = bird.flapPower;
                    energy = Math.max(0, energy - 1);
                    energyDisplay.textContent = `${Math.floor(energy)}%`;
                }
            });
            
            // Initialize UI
            createCyberCircles();
            document.getElementById('high-score').textContent = highScore;
            
            // Game loop variables
            let frameCount = 0;
            
            // Insert new terminal line every 3 seconds while in menu
            const terminal = document.querySelector('.terminal');
            const terminalMessages = [
                { text: "> Neural pathways engaged", class: "" },
                { text: "> Cybernetic core at 98%", class: "system" },
                { text: "> Awaiting user command", class: "" },
                { text: "> Warning: Energy levels critical", class: "warning" },
                { text: "> Activating neural boosters", class: "system" }
            ];
            
            let messageIndex = 2; // Start after initial messages
            
            setInterval(() => {
                if (!gameRunning && !menu.classList.contains('hidden')) {
                    const message = terminalMessages[messageIndex % terminalMessages.length];
                    const newLine = document.createElement('div');
                    newLine.classList.add('terminal-line', message.class);
                    newLine.textContent = message.text;
                    terminal.appendChild(newLine);
                    terminal.scrollTop = terminal.scrollHeight;
                    messageIndex++;
                }
            }, 3000);
        });
    </script>
</body>
</html>