Flappy bird

2,287 agileserver586

Open In Editor Publish Your Code

Flappy bird

Recommended

12 July 2025

4 December 2024

YouMusic-U-personal-Music

22 June 2025

Tailwind CSS Blog Template: Dark Mode, Responsive

HTML

CSS

JS

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();