WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Oiseau Flappy
1199
agileserver586
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
29 August 2024
Interface utilisateur de la calculatrice - Neumorphisme - blanc
30 March 2025
Un code par ytr3d3
17 May 2025
site web moderne
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();