Spaces:
Running
Running
| <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> |