WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Uccello svolazzante
1927
agileserver586
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
28 May 2025
Un codice di Metehan
4 December 2025
Artigianato infinito
21 July 2025
Nesso di dati cyberpunk
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();