WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
फ्लैपी चिड़ियां
1197
agileserver586
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
12 August 2024
इलेक्ट्रॉनिक स्विच
28 December 2024
एक वैकल्पिक होम पेज निर्देशिका
10 September 2024
स्पलैश्ड टोस्ट अधिसूचनाएँ
HTML
Copy
Flappy Bird
0
CSS
Copy
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #70c5ce; } #game { position: relative; width: 400px; height: 600px; overflow: hidden; background-color: #70c5ce; } #bird { position: absolute; width: 40px; height: 40px; background-color: yellow; border-radius: 50%; bottom: 300px; left: 50px; } .pipe { position: absolute; width: 60px; background-color: green; bottom: 0; } #score { position: absolute; top: 10px; left: 10px; font-size: 24px; color: white; }
JS
Copy
const bird = document.getElementById('bird'); const game = document.getElementById('game'); const scoreDisplay = document.getElementById('score'); let birdY = 300; let gravity = 2; let score = 0; let gameInterval; let pipeInterval; document.addEventListener('keydown', jump); function jump() { birdY -= 50; bird.style.bottom = birdY + 'px'; } function startGame() { gameInterval = setInterval(updateGame, 20); pipeInterval = setInterval(createPipe, 2000); } function updateGame() { birdY += gravity; bird.style.bottom = birdY + 'px'; if (birdY < 0 || birdY > 600) { endGame(); } } function createPipe() { const pipe = document.createElement('div'); const pipeHeight = Math.random() * 300 + 100; // Height between 100 and 400 pipe.style.height = pipeHeight + 'px'; pipe.classList.add('pipe'); pipe.style.left = '400px'; game.appendChild(pipe); movePipe(pipe); } function movePipe(pipe) { let pipeInterval = setInterval(() => { let pipeLeft = parseInt(pipe.style.left); if (pipeLeft < -60) { clearInterval(pipeInterval); game.removeChild(pipe); score++; scoreDisplay.textContent = score; } else { pipe.style.left = pipeLeft - 5 + 'px'; } }, 20); } function endGame() { clearInterval(gameInterval); clearInterval(pipeInterval); alert('Game Over! Score: ' + score); document.location.reload(); } startGame();