Spaces:

vatsal-p-wa
/

flappybirdgame

Running

App Files Files Community

vatsal-p-wa commited on 8 days ago

Commit

af7ece3

verified ·

1 Parent(s): 2d309eb

Add 1 files

Browse files

Files changed (1) hide show

index.html +470 -34

index.html CHANGED Viewed

@@ -3,47 +3,77 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Flappy Bird</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
         body {
             font-family: 'Press Start 2P', cursive;
             overflow: hidden;
-            background-color: #70c5ce;
             touch-action: manipulation;
         }
         #game-container {
             position: relative;
             width: 100vw;
             height: 100vh;
         }
-        #game-canvas {
             position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
         }
         .pipe {
             position: absolute;
             width: 80px;
-            background-color: #5f9e5f;
-            border: 5px solid #3a6b3a;
             box-sizing: border-box;
         }
         .bird {
             position: absolute;
             width: 40px;
             height: 30px;
-            background-color: #ffcc00;
             border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
             z-index: 10;
         }
         .bird:before {
@@ -51,7 +81,7 @@
             position: absolute;
             width: 12px;
             height: 12px;
-            background-color: #ff6600;
             border-radius: 50%;
             top: 5px;
             right: 5px;
@@ -72,7 +102,7 @@
             position: absolute;
             width: 30px;
             height: 15px;
-            background-color: #ffcc00;
             border-radius: 50% 50% 0 0;
             top: 15px;
             left: -15px;
@@ -90,15 +120,33 @@
             bottom: 0;
             width: 100%;
             height: 100px;
-            background-color: #deb887;
-            border-top: 5px solid #8b4513;
         }
         .cloud {
             position: absolute;
             background-color: white;
             border-radius: 50%;
-            opacity: 0.8;
         }
         #score-display {
@@ -108,9 +156,15 @@
             right: 0;
             text-align: center;
             color: white;
-            font-size: 24px;
-            text-shadow: 2px 2px 0 #000;
             z-index: 100;
         }
         #game-over {
@@ -119,7 +173,7 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background-color: rgba(0, 0, 0, 0.7);
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -127,6 +181,7 @@
             color: white;
             z-index: 200;
             display: none;
         }
         #start-screen {
@@ -135,57 +190,218 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             color: white;
             z-index: 200;
         }
         .btn {
-            background-color: #ffcc00;
             color: #333;
             border: none;
             padding: 15px 30px;
             font-size: 16px;
             margin-top: 20px;
             cursor: pointer;
-            border-radius: 5px;
             font-family: 'Press Start 2P', cursive;
-            box-shadow: 0 4px 0 #cc9900;
             transition: all 0.1s;
         }
         .btn:active {
             transform: translateY(4px);
-            box-shadow: 0 0 0 #cc9900;
         }
     </style>
 </head>
 <body class="flex items-center justify-center min-h-screen">
     <div id="game-container" class="relative overflow-hidden">
         <div id="score-display">0</div>
         <div id="start-screen">
-            <h1 class="text-4xl mb-8 text-center">FLAPPY BIRD</h1>
-            <p class="mb-4 text-center">Press SPACE or tap screen to jump</p>
-            <button id="start-btn" class="btn">START GAME</button>
         </div>
         <div id="game-over">
-            <h1 class="text-4xl mb-8">GAME OVER</h1>
-            <p id="final-score" class="text-2xl mb-4">Score: 0</p>
-            <p id="high-score" class="text-xl mb-8">High Score: 0</p>
-            <button id="restart-btn" class="btn">PLAY AGAIN</button>
         </div>
         <div id="bird" class="bird">
             <div class="wing"></div>
         </div>
-        <div id="ground" class="ground"></div>
     </div>
     <script>
@@ -193,14 +409,17 @@
             // Game elements
             const gameContainer = document.getElementById('game-container');
             const bird = document.getElementById('bird');
-            const ground = document.getElementById('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 startScreen = document.getElementById('start-screen');
             const startBtn = document.getElementById('start-btn');
             const restartBtn = document.getElementById('restart-btn');
             // Game variables
             let gameRunning = false;
@@ -248,6 +467,7 @@
                 scoreDisplay.textContent = '0';
                 gameOverScreen.style.display = 'none';
                 highScoreDisplay.textContent = `High Score: ${highScore}`;
                 // Start game loop
                 gameRunning = true;
@@ -290,6 +510,9 @@
                 // Move clouds
                 moveClouds(deltaTime);
                 // Check collisions
                 if (checkCollisions()) {
                     gameOver();
@@ -309,7 +532,7 @@
                 // Create top pipe
                 const topPipe = document.createElement('div');
-                topPipe.className = 'pipe';
                 topPipe.style.height = `${topHeight}px`;
                 topPipe.style.top = '0';
                 topPipe.style.left = `${gameContainer.clientWidth}px`;
@@ -317,12 +540,15 @@
                 // Create bottom pipe
                 const bottomPipe = document.createElement('div');
-                bottomPipe.className = 'pipe';
                 bottomPipe.style.height = `${containerHeight - ground.clientHeight - topHeight - pipeGap}px`;
                 bottomPipe.style.bottom = `${ground.clientHeight}px`;
                 bottomPipe.style.left = `${gameContainer.clientWidth}px`;
                 gameContainer.appendChild(bottomPipe);
                 pipes.push({
                     element: topPipe,
                     x: gameContainer.clientWidth,
@@ -338,6 +564,31 @@
                 });
             }
             // Create a cloud
             function createCloud() {
                 const size = Math.floor(Math.random() * 50) + 30;
@@ -347,6 +598,20 @@
                 cloud.style.height = `${size}px`;
                 cloud.style.top = `${Math.floor(Math.random() * (gameContainer.clientHeight / 2))}px`;
                 cloud.style.left = `${gameContainer.clientWidth}px`;
                 gameContainer.appendChild(cloud);
                 clouds.push({
@@ -357,6 +622,12 @@
                 });
             }
             // Move all pipes
             function movePipes(deltaTime) {
                 for (let i = 0; i < pipes.length; i++) {
@@ -370,6 +641,7 @@
                         if (i % 2 === 0) { // Only count for top pipe to avoid double counting
                             score++;
                             scoreDisplay.textContent = score;
                             // Increase difficulty
                             if (score % 5 === 0) {
@@ -404,6 +676,54 @@
                 }
             }
             // Check for collisions
             function checkCollisions() {
                 const birdRect = bird.getBoundingClientRect();
@@ -450,12 +770,116 @@
                 finalScoreDisplay.textContent = `Score: ${score}`;
                 highScoreDisplay.textContent = `High Score: ${highScore}`;
                 gameOverScreen.style.display = 'flex';
             }
             // Jump function
             function jump() {
                 if (!gameRunning) return;
                 velocity = -10;
             }
             // Event listeners
@@ -475,6 +899,10 @@
                 jump();
             });
             startBtn.addEventListener('click', () => {
                 startScreen.style.display = 'none';
                 initGame();
@@ -487,6 +915,14 @@
             // Initial setup
             highScoreDisplay.textContent = `High Score: ${highScore}`;
         });
     </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>

 <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 {
             position: absolute;
             width: 12px;
             height: 12px;
+            background-color: var(--bird-orange);
             border-radius: 50%;
             top: 5px;
             right: 5px;
             position: absolute;
             width: 30px;
             height: 15px;
+            background-color: var(--bird-yellow);
             border-radius: 50% 50% 0 0;
             top: 15px;
             left: -15px;
             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 {
             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 {
             left: 0;
             width: 100%;
             height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
             display: flex;
             flex-direction: column;
             justify-content: center;
             color: white;
             z-index: 200;
             display: none;
+            backdrop-filter: blur(5px);
         }
         #start-screen {
             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>
             // 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;
                 scoreDisplay.textContent = '0';
                 gameOverScreen.style.display = 'none';
                 highScoreDisplay.textContent = `High Score: ${highScore}`;
+                menuHighScore.textContent = highScore;
                 // Start game loop
                 gameRunning = true;
                 // Move clouds
                 moveClouds(deltaTime);
+                // Animate sun
+                animateSun();
                 // Check collisions
                 if (checkCollisions()) {
                     gameOver();
                 // 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`;
                 // 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,
                 });
             }
+            // 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;
                 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({
                 });
             }
+            // 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++) {
                         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) {
                 }
             }
+            // 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();
                 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
                 jump();
             });
+            jumpBtn.addEventListener('click', () => {
+                jump();
+            });
             startBtn.addEventListener('click', () => {
                 startScreen.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>