WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Flappy bird
1925
agileserver586
Open In Editor
Publish Your Code
Recommended
20 June 2025
Social Media Link Cards HTML
11 August 2025
HTML Message Animation Container
7 July 2023
Login/Register Form V2
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();