Spaces:

vatsal-p-wa
/

flappybirdgame

Running

File size: 34,434 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy Bird Deluxe</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        
        :root {
            --sky-blue: #70c5ce;
            --grass-green: #5f9e5f;
            --dirt-brown: #8b4513;
            --ground-tan: #deb887;
            --bird-yellow: #ffcc00;
            --bird-orange: #ff6600;
            --pipe-green: #3a6b3a;
        }
        
        body {
            font-family: 'Press Start 2P', cursive;
            overflow: hidden;
            background-color: var(--sky-blue);
            touch-action: manipulation;
            margin: 0;
            padding: 0;
        }
        
        #game-container {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        
        .sun {
            position: absolute;
            width: 80px;
            height: 80px;
            background: radial-gradient(circle, #ffde00 0%, #ff8c00 100%);
            border-radius: 50%;
            top: 50px;
            right: 100px;
            box-shadow: 0 0 40px 15px rgba(255, 215, 0, 0.4);
            z-index: 1;
        }
        
        .pipe {
            position: absolute;
            width: 80px;
            background-color: var(--grass-green);
            border: 5px solid var(--pipe-green);
            box-sizing: border-box;
            z-index: 5;
        }
        
        .pipe-top {
            border-bottom: none;
            border-radius: 10px 10px 0 0;
        }
        
        .pipe-bottom {
            border-top: none;
            border-radius: 0 0 10px 10px;
        }
        
        .bird {
            position: absolute;
            width: 40px;
            height: 30px;
            background-color: var(--bird-yellow);
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            z-index: 10;
            transition: transform 0.1s ease-out;
        }
        
        .bird:before {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: var(--bird-orange);
            border-radius: 50%;
            top: 5px;
            right: 5px;
        }
        
        .bird:after {
            content: '';
            position: absolute;
            width: 8px;
            height: 3px;
            background-color: #000;
            border-radius: 50%;
            top: 12px;
            right: 10px;
        }
        
        .wing {
            position: absolute;
            width: 30px;
            height: 15px;
            background-color: var(--bird-yellow);
            border-radius: 50% 50% 0 0;
            top: 15px;
            left: -15px;
            transform-origin: right center;
            animation: flap 0.3s infinite alternate;
        }
        
        @keyframes flap {
            0% { transform: rotateY(0deg) rotateZ(0deg); }
            100% { transform: rotateY(60deg) rotateZ(20deg); }
        }
        
        .ground {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
            background-color: var(--ground-tan);
            border-top: 5px solid var(--dirt-brown);
            z-index: 10;
        }
        
        .ground-pattern {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 20px;
            background: repeating-linear-gradient(
                90deg,
                var(--dirt-brown),
                var(--dirt-brown) 10px,
                var(--ground-tan) 10px,
                var(--ground-tan) 20px
            );
            z-index: 11;
        }
        
        .cloud {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            opacity: 0.9;
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
            z-index: 2;
        }
        
        #score-display {
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            text-align: center;
            color: white;
            font-size: 28px;
            text-shadow: 3px 3px 0 #000;
            z-index: 100;
            background-color: rgba(0, 0, 0, 0.4);
            padding: 10px 20px;
            border-radius: 10px;
            width: fit-content;
            margin: 0 auto;
            border: 3px solid white;
        }
        
        #game-over {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            z-index: 200;
            display: none;
            backdrop-filter: blur(5px);
        }
        
        #start-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            z-index: 200;
            backdrop-filter: blur(5px);
        }
        
        .btn {
            background: linear-gradient(to bottom, #ffcc00, #ff9900);
            color: #333;
            border: none;
            padding: 15px 30px;
            font-size: 16px;
            margin-top: 20px;
            cursor: pointer;
            border-radius: 10px;
            font-family: 'Press Start 2P', cursive;
            box-shadow: 0 6px 0 #cc9900, 0 10px 20px rgba(0, 0, 0, 0.3);
            transition: all 0.1s;
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 0 #cc9900, 0 12px 20px rgba(0, 0, 0, 0.4);
        }
        
        .btn:active {
            transform: translateY(4px);
            box-shadow: 0 2px 0 #cc9900;
        }
        
        .btn:after {
            content: "";
            position: absolute;
            top: -50%;
            right: -50%;
            bottom: -50%;
            left: -50%;
            background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotateZ(60deg) translate(-5em, 7.5em);
        }
        
        .btn:hover:after {
            animation: shine 1.5s forwards;
        }
        
        @keyframes shine {
            100% {
                transform: rotateZ(60deg) translate(1em, -9em);
            }
        }
        
        .title {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
            color: #ffcc00;
            position: relative;
            animation: bounce 1s infinite alternate;
        }
        
        @keyframes bounce {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }
        
        .instructions {
            font-size: 1rem;
            margin-bottom: 2rem;
            text-align: center;
            line-height: 1.6;
            max-width: 80%;
        }
        
        .medal {
            font-size: 3rem;
            margin-bottom: 1rem;
            animation: spin 2s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .score-badge {
            background: linear-gradient(135deg, #ff8a00, #ff0058);
            padding: 10px 20px;
            border-radius: 20px;
            margin: 10px 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            border: 2px solid white;
        }
        
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .particle {
            position: absolute;
            background-color: gold;
            border-radius: 50%;
            pointer-events: none;
            z-index: 1000;
        }
        
        .controls {
            position: absolute;
            bottom: 120px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 20px;
            z-index: 150;
            display: none;
        }
        
        .control-btn {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(5px);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: white;
            border: 2px solid white;
            cursor: pointer;
            user-select: none;
        }
        
        @media (max-width: 768px) {
            .controls {
                display: flex;
            }
            
            .title {
                font-size: 2.5rem;
            }
            
            .instructions {
                font-size: 0.8rem;
            }
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen">
    <div id="game-container" class="relative overflow-hidden">
        <div class="sun"></div>
        <div id="score-display">0</div>
        
        <div id="start-screen">
            <div class="medal">
                <i class="fas fa-medal"></i>
            </div>
            <h1 class="title floating">FLAPPY BIRD DELUXE</h1>
            <div class="instructions">
                <p>Press SPACE or tap screen to jump</p>
                <p>Avoid the pipes and try to fly as far as you can!</p>
            </div>
            <button id="start-btn" class="btn">
                <i class="fas fa-play" style="margin-right: 10px;"></i>START GAME
            </button>
            <div class="mt-8 text-sm opacity-70">
                <p>High Score: <span id="menu-high-score">0</span></p>
            </div>
        </div>
        
        <div id="game-over">
            <div class="medal">
                <i class="fas fa-trophy"></i>
            </div>
            <h1 class="title">GAME OVER</h1>
            <div class="score-badge">
                <p id="final-score">Score: 0</p>
            </div>
            <div class="score-badge">
                <p id="high-score">High Score: 0</p>
            </div>
            <button id="restart-btn" class="btn">
                <i class="fas fa-redo" style="margin-right: 10px;"></i>PLAY AGAIN
            </button>
        </div>
        
        <div id="bird" class="bird">
            <div class="wing"></div>
        </div>
        
        <div class="ground"></div>
        <div class="ground-pattern"></div>
        
        <div class="controls">
            <div class="control-btn" id="jump-btn">
                <i class="fas fa-arrow-up"></i>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Game elements
            const gameContainer = document.getElementById('game-container');
            const bird = document.getElementById('bird');
            const ground = document.querySelector('.ground');
            const scoreDisplay = document.getElementById('score-display');
            const gameOverScreen = document.getElementById('game-over');
            const finalScoreDisplay = document.getElementById('final-score');
            const highScoreDisplay = document.getElementById('high-score');
            const menuHighScore = document.getElementById('menu-high-score');
            const startScreen = document.getElementById('start-screen');
            const startBtn = document.getElementById('start-btn');
            const restartBtn = document.getElementById('restart-btn');
            const jumpBtn = document.getElementById('jump-btn');
            const sun = document.querySelector('.sun');
            
            // Game variables
            let gameRunning = false;
            let score = 0;
            let highScore = localStorage.getItem('flappyHighScore') || 0;
            let gravity = 0.5;
            let velocity = 0;
            let birdPosition = 250;
            let pipes = [];
            let pipeGap = 150;
            let pipeWidth = 80;
            let pipeFrequency = 1500; // ms
            let lastPipeTime = 0;
            let gameSpeed = 2;
            let clouds = [];
            let lastCloudTime = 0;
            let cloudFrequency = 3000;
            
            // Initialize game
            function initGame() {
                // Set initial positions
                birdPosition = gameContainer.clientHeight / 2 - 50;
                bird.style.top = `${birdPosition}px`;
                bird.style.left = '100px';
                
                // Clear existing pipes
                pipes.forEach(pipe => {
                    if (pipe.element && pipe.element.parentNode) {
                        pipe.element.parentNode.removeChild(pipe.element);
                    }
                });
                pipes = [];
                
                // Clear clouds
                clouds.forEach(cloud => {
                    if (cloud.element && cloud.element.parentNode) {
                        cloud.element.parentNode.removeChild(cloud.element);
                    }
                });
                clouds = [];
                
                // Reset game variables
                score = 0;
                velocity = 0;
                scoreDisplay.textContent = '0';
                gameOverScreen.style.display = 'none';
                highScoreDisplay.textContent = `High Score: ${highScore}`;
                menuHighScore.textContent = highScore;
                
                // Start game loop
                gameRunning = true;
                lastPipeTime = Date.now();
                lastCloudTime = Date.now();
                requestAnimationFrame(gameLoop);
            }
            
            // Game loop
            function gameLoop() {
                if (!gameRunning) return;
                
                const now = Date.now();
                const deltaTime = 16; // Approximate for 60fps
                
                // Apply gravity
                velocity += gravity;
                birdPosition += velocity;
                bird.style.top = `${birdPosition}px`;
                
                // Rotate bird based on velocity
                const rotation = Math.min(Math.max(velocity * 3, -30), 90);
                bird.style.transform = `rotate(${rotation}deg)`;
                
                // Generate pipes
                if (now - lastPipeTime > pipeFrequency) {
                    createPipe();
                    lastPipeTime = now;
                }
                
                // Generate clouds
                if (now - lastCloudTime > cloudFrequency) {
                    createCloud();
                    lastCloudTime = now;
                }
                
                // Move pipes
                movePipes(deltaTime);
                
                // Move clouds
                moveClouds(deltaTime);
                
                // Animate sun
                animateSun();
                
                // Check collisions
                if (checkCollisions()) {
                    gameOver();
                    return;
                }
                
                // Continue game loop
                requestAnimationFrame(gameLoop);
            }
            
            // Create a new pipe
            function createPipe() {
                const containerHeight = gameContainer.clientHeight;
                const minHeight = 50;
                const maxHeight = containerHeight - ground.clientHeight - pipeGap - minHeight;
                const topHeight = Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;
                
                // Create top pipe
                const topPipe = document.createElement('div');
                topPipe.className = 'pipe pipe-top';
                topPipe.style.height = `${topHeight}px`;
                topPipe.style.top = '0';
                topPipe.style.left = `${gameContainer.clientWidth}px`;
                gameContainer.appendChild(topPipe);
                
                // Create bottom pipe
                const bottomPipe = document.createElement('div');
                bottomPipe.className = 'pipe pipe-bottom';
                bottomPipe.style.height = `${containerHeight - ground.clientHeight - topHeight - pipeGap}px`;
                bottomPipe.style.bottom = `${ground.clientHeight}px`;
                bottomPipe.style.left = `${gameContainer.clientWidth}px`;
                gameContainer.appendChild(bottomPipe);
                
                // Add pipe decorations
                addPipeDecorations(topPipe, bottomPipe);
                
                pipes.push({
                    element: topPipe,
                    x: gameContainer.clientWidth,
                    height: topHeight,
                    passed: false
                });
                
                pipes.push({
                    element: bottomPipe,
                    x: gameContainer.clientWidth,
                    height: containerHeight - ground.clientHeight - topHeight - pipeGap,
                    passed: false
                });
            }
            
            // Add decorations to pipes
            function addPipeDecorations(topPipe, bottomPipe) {
                // Top pipe decoration
                const topDecor = document.createElement('div');
                topDecor.style.position = 'absolute';
                topDecor.style.bottom = '0';
                topDecor.style.left = '0';
                topDecor.style.width = '100%';
                topDecor.style.height = '20px';
                topDecor.style.backgroundColor = '#3a6b3a';
                topDecor.style.borderRadius = '5px 5px 0 0';
                topPipe.appendChild(topDecor);
                
                // Bottom pipe decoration
                const bottomDecor = document.createElement('div');
                bottomDecor.style.position = 'absolute';
                bottomDecor.style.top = '0';
                bottomDecor.style.left = '0';
                bottomDecor.style.width = '100%';
                bottomDecor.style.height = '20px';
                bottomDecor.style.backgroundColor = '#3a6b3a';
                bottomDecor.style.borderRadius = '0 0 5px 5px';
                bottomPipe.appendChild(bottomDecor);
            }
            
            // Create a cloud
            function createCloud() {
                const size = Math.floor(Math.random() * 50) + 30;
                const cloud = document.createElement('div');
                cloud.className = 'cloud';
                cloud.style.width = `${size}px`;
                cloud.style.height = `${size}px`;
                cloud.style.top = `${Math.floor(Math.random() * (gameContainer.clientHeight / 2))}px`;
                cloud.style.left = `${gameContainer.clientWidth}px`;
                
                // Create cloud fluff
                for (let i = 0; i < 3; i++) {
                    const fluff = document.createElement('div');
                    fluff.style.position = 'absolute';
                    fluff.style.backgroundColor = 'white';
                    fluff.style.borderRadius = '50%';
                    fluff.style.width = `${size * 0.7}px`;
                    fluff.style.height = `${size * 0.7}px`;
                    fluff.style.top = `${Math.random() * 20 - 10}px`;
                    fluff.style.left = `${Math.random() * 20 - 10}px`;
                    cloud.appendChild(fluff);
                }
                
                gameContainer.appendChild(cloud);
                
                clouds.push({
                    element: cloud,
                    x: gameContainer.clientWidth,
                    y: parseInt(cloud.style.top),
                    speed: Math.random() * 0.5 + 0.5
                });
            }
            
            // Animate sun
            function animateSun() {
                const time = Date.now() * 0.001;
                sun.style.transform = `rotate(${time * 5}deg)`;
            }
            
            // Move all pipes
            function movePipes(deltaTime) {
                for (let i = 0; i < pipes.length; i++) {
                    const pipe = pipes[i];
                    pipe.x -= gameSpeed;
                    pipe.element.style.left = `${pipe.x}px`;
                    
                    // Check if pipe is passed by bird
                    if (!pipe.passed && pipe.x + pipeWidth < 100) {
                        pipe.passed = true;
                        if (i % 2 === 0) { // Only count for top pipe to avoid double counting
                            score++;
                            scoreDisplay.textContent = score;
                            createParticles(pipe.element);
                            
                            // Increase difficulty
                            if (score % 5 === 0) {
                                gameSpeed += 0.2;
                                pipeFrequency = Math.max(1000, pipeFrequency - 100);
                            }
                        }
                    }
                    
                    // Remove pipe if off screen
                    if (pipe.x + pipeWidth < 0) {
                        pipe.element.parentNode.removeChild(pipe.element);
                        pipes.splice(i, 1);
                        i--;
                    }
                }
            }
            
            // Move all clouds
            function moveClouds(deltaTime) {
                for (let i = 0; i < clouds.length; i++) {
                    const cloud = clouds[i];
                    cloud.x -= cloud.speed;
                    cloud.element.style.left = `${cloud.x}px`;
                    
                    // Remove cloud if off screen
                    if (cloud.x + parseInt(cloud.element.style.width) < 0) {
                        cloud.element.parentNode.removeChild(cloud.element);
                        clouds.splice(i, 1);
                        i--;
                    }
                }
            }
            
            // Create score particles
            function createParticles(element) {
                const rect = element.getBoundingClientRect();
                const colors = ['#ffcc00', '#ff9900', '#ff6600', '#ffffff'];
                
                for (let i = 0; i < 10; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';
                    particle.style.width = `${Math.random() * 10 + 5}px`;
                    particle.style.height = particle.style.width;
                    particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                    particle.style.left = `${rect.left + rect.width / 2}px`;
                    particle.style.top = `${rect.top + rect.height / 2}px`;
                    document.body.appendChild(particle);
                    
                    const angle = Math.random() * Math.PI * 2;
                    const velocity = Math.random() * 5 + 2;
                    const x = Math.cos(angle) * velocity;
                    const y = Math.sin(angle) * velocity;
                    
                    let opacity = 1;
                    let posX = rect.left + rect.width / 2;
                    let posY = rect.top + rect.height / 2;
                    let size = parseFloat(particle.style.width);
                    
                    const animate = () => {
                        opacity -= 0.02;
                        posX += x;
                        posY += y;
                        size *= 0.95;
                        
                        particle.style.opacity = opacity;
                        particle.style.left = `${posX}px`;
                        particle.style.top = `${posY}px`;
                        particle.style.width = `${size}px`;
                        particle.style.height = `${size}px`;
                        
                        if (opacity > 0) {
                            requestAnimationFrame(animate);
                        } else {
                            particle.parentNode.removeChild(particle);
                        }
                    };
                    
                    animate();
                }
            }
            
            // Check for collisions
            function checkCollisions() {
                const birdRect = bird.getBoundingClientRect();
                const containerRect = gameContainer.getBoundingClientRect();
                
                // Check ground collision
                if (birdRect.bottom >= containerRect.bottom - ground.clientHeight) {
                    return true;
                }
                
                // Check ceiling collision
                if (birdRect.top <= containerRect.top) {
                    return true;
                }
                
                // Check pipe collisions
                for (const pipe of pipes) {
                    const pipeRect = pipe.element.getBoundingClientRect();
                    
                    if (
                        birdRect.right > pipeRect.left &&
                        birdRect.left < pipeRect.right &&
                        birdRect.bottom > pipeRect.top &&
                        birdRect.top < pipeRect.bottom
                    ) {
                        return true;
                    }
                }
                
                return false;
            }
            
            // Game over
            function gameOver() {
                gameRunning = false;
                
                // Update high score
                if (score > highScore) {
                    highScore = score;
                    localStorage.setItem('flappyHighScore', highScore);
                }
                
                // Show game over screen
                finalScoreDisplay.textContent = `Score: ${score}`;
                highScoreDisplay.textContent = `High Score: ${highScore}`;
                gameOverScreen.style.display = 'flex';
                
                // Create celebration particles
                createCelebrationParticles();
            }
            
            // Create celebration particles
            function createCelebrationParticles() {
                const colors = ['#ffcc00', '#ff9900', '#ff6600', '#ffffff', '#00ff00', '#00ffff'];
                
                for (let i = 0; i < 50; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';
                    particle.style.width = `${Math.random() * 15 + 5}px`;
                    particle.style.height = particle.style.width;
                    particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                    particle.style.left = `${Math.random() * window.innerWidth}px`;
                    particle.style.top = `${Math.random() * window.innerHeight}px`;
                    document.body.appendChild(particle);
                    
                    const angle = Math.random() * Math.PI * 2;
                    const velocity = Math.random() * 3 + 1;
                    const x = Math.cos(angle) * velocity;
                    const y = Math.sin(angle) * velocity;
                    
                    let opacity = 1;
                    let posX = parseFloat(particle.style.left);
                    let posY = parseFloat(particle.style.top);
                    let size = parseFloat(particle.style.width);
                    
                    const animate = () => {
                        opacity -= 0.01;
                        posX += x;
                        posY += y;
                        size *= 0.98;
                        
                        particle.style.opacity = opacity;
                        particle.style.left = `${posX}px`;
                        particle.style.top = `${posY}px`;
                        particle.style.width = `${size}px`;
                        particle.style.height = `${size}px`;
                        
                        if (opacity > 0) {
                            requestAnimationFrame(animate);
                        } else {
                            particle.parentNode.removeChild(particle);
                        }
                    };
                    
                    animate();
                }
            }
            
            // Jump function
            function jump() {
                if (!gameRunning) return;
                velocity = -10;
                
                // Add jump animation
                bird.style.transform = 'rotate(-30deg)';
                
                // Create small particles
                createJumpParticles();
            }
            
            // Create jump particles
            function createJumpParticles() {
                const birdRect = bird.getBoundingClientRect();
                const colors = ['#ffcc00', '#ff9900'];
                
                for (let i = 0; i < 5; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';
                    particle.style.width = `${Math.random() * 5 + 2}px`;
                    particle.style.height = particle.style.width;
                    particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                    particle.style.left = `${birdRect.left + birdRect.width / 2}px`;
                    particle.style.top = `${birdRect.bottom}px`;
                    document.body.appendChild(particle);
                    
                    const angle = Math.random() * Math.PI - Math.PI/2; // -90 to 90 degrees
                    const velocity = Math.random() * 3 + 1;
                    const x = Math.cos(angle) * velocity;
                    const y = Math.sin(angle) * velocity;
                    
                    let opacity = 1;
                    let posX = birdRect.left + birdRect.width / 2;
                    let posY = birdRect.bottom;
                    let size = parseFloat(particle.style.width);
                    
                    const animate = () => {
                        opacity -= 0.05;
                        posX += x;
                        posY += y;
                        size *= 0.9;
                        
                        particle.style.opacity = opacity;
                        particle.style.left = `${posX}px`;
                        particle.style.top = `${posY}px`;
                        particle.style.width = `${size}px`;
                        particle.style.height = `${size}px`;
                        
                        if (opacity > 0) {
                            requestAnimationFrame(animate);
                        } else {
                            particle.parentNode.removeChild(particle);
                        }
                    };
                    
                    animate();
                }
            }
            
            // Event listeners
            document.addEventListener('keydown', (e) => {
                if (e.code === 'Space') {
                    e.preventDefault();
                    jump();
                }
            });
            
            gameContainer.addEventListener('click', () => {
                jump();
            });
            
            gameContainer.addEventListener('touchstart', (e) => {
                e.preventDefault();
                jump();
            });
            
            jumpBtn.addEventListener('click', () => {
                jump();
            });
            
            startBtn.addEventListener('click', () => {
                startScreen.style.display = 'none';
                initGame();
            });
            
            restartBtn.addEventListener('click', () => {
                gameOverScreen.style.display = 'none';
                initGame();
            });
            
            // Initial setup
            highScoreDisplay.textContent = `High Score: ${highScore}`;
            menuHighScore.textContent = highScore;
            
            // Create initial clouds
            for (let i = 0; i < 5; i++) {
                setTimeout(() => {
                    createCloud();
                }, i * 600);
            }
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vatsal-p-wa/flappybirdgame" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>