Creating a Flappy Bird Game With HTML, CSS , Javascript

In this post, we will create a simple Flappy Bird game using HTML, CSS, and JavaScript. The game features a bird that moves up when the spacebar is pressed and obstacles of varying heights that appear from the right side of the screen. The objective is to navigate the bird through the gaps in the obstacles without colliding with them.

HTML Structure

        <div id="gameContainer">
    <div id="bird"></div>
    <div id="obstacle"></div>
    <div id="obstacleTop"></div>
    <div id="score">Score: 0</div>
    <div id="gameOver">Game Over!</div>
</div>
    

CSS Styling

        #gameContainer {
    position: relative;
    width: 400px;
    height: 600px;
    background: url('background.png') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}
#bird {
    position: absolute;
    width: 40px;
    height: 40px;
    background: url('bird.png') no-repeat center center;
    background-size: cover;
    top: 200px;
    left: 50px;
}
#obstacle, #obstacleTop {
    position: absolute;
    width: 50px;
    background-color: green;
    animation: moveObstacle 4s linear infinite;
}
#obstacleTop {
    background-color: darkgreen;
}
#score, #gameOver {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    font-size: 24px;
    font-family: Arial, sans-serif;
}
#gameOver {
    display: none;
    font-size: 32px;
}
    

JavaScript Logic

        const bird = document.getElementById('bird');
const gameContainer = document.getElementById('gameContainer');
const obstacle = document.getElementById('obstacle');
const obstacleTop = document.getElementById('obstacleTop');
const scoreDisplay = document.getElementById('score');
const gameOverDisplay = document.getElementById('gameOver');

let birdY = 200;
let birdGravity = 2;
let birdLift = -30;
let isGameOver = false;
let score = 0;
let obstaclePassed = false;
let lastObstacleHeight = 0;

function gameLoop() {
    if (isGameOver) return;

    birdY += birdGravity;
    bird.style.top = birdY + 'px';

    const obstacleRect = obstacle.getBoundingClientRect();
    const birdRect = bird.getBoundingClientRect();

    if (obstacleRect.right < 0) {
        resetObstacles();
        obstaclePassed = true;
    }

    if (obstacleRect.right < birdRect.left && !obstaclePassed) {
        obstaclePassed = true;
        incrementScore();
    }

    if (checkCollision()) {
        gameOver();
    }

    requestAnimationFrame(gameLoop);
}

function jump() {
    birdY += birdLift;
}

function checkCollision() {
    const birdRect = bird.getBoundingClientRect();
    const obstacleRect = obstacle.getBoundingClientRect();
    const obstacleTopRect = obstacleTop.getBoundingClientRect();

    return (
        birdRect.top <= 0 ||
        birdRect.bottom >= gameContainer.clientHeight ||
        (birdRect.right >= obstacleRect.left &&
        birdRect.left <= obstacleRect.right &&
        birdRect.bottom >= obstacleRect.top) ||
        (birdRect.right >= obstacleTopRect.left &&
        birdRect.left <= obstacleTopRect.right &&
        birdRect.top <= obstacleTopRect.bottom)
    );
}

function resetObstacles() {
    let obstacleHeight;
    do {
        obstacleHeight = Math.floor(Math.random() * 150) + 100;
    } while (Math.abs(obstacleHeight - lastObstacleHeight) < 50);

    lastObstacleHeight = obstacleHeight;
    let gapHeight = 150;

    obstacle.style.height = obstacleHeight + 'px';
    obstacle.style.bottom = '0';
    obstacle.style.right = '-50px';

    obstacleTop.style.height = (600 - obstacleHeight - gapHeight) + 'px';
    obstacleTop.style.top = '0';
    obstacleTop.style.right = '-50px';

    obstacle.style.animation = 'moveObstacle 4s linear infinite';
    obstacleTop.style.animation = 'moveObstacle 4s linear infinite';
}

function gameOver() {
    isGameOver = true;
    gameOverDisplay.style.display = 'block';
    obstacle.style.animation = '';
    obstacleTop.style.animation = '';
}

function resetGame() {
    birdY = 200;
    score = 0;
    scoreDisplay.textContent = 'Score: ' + score;
    gameOverDisplay.style.display = 'none';
    isGameOver = false;
    obstaclePassed = false;
    resetObstacles();
    gameLoop();
}

document.addEventListener('keydown', event => {
    if (event.code === 'Space') {
        if (isGameOver) {
            resetGame();
        } else {
            jump();
        }
    }
});

function incrementScore() {
    if (!isGameOver) {
        score++;
        scoreDisplay.textContent = 'Score: ' + score;
    }
}

resetObstacles();
gameLoop();
    

This code sets up the HTML structure, CSS styling, and JavaScript logic to create a simple Flappy Bird game. The obstacles are randomly generated with different heights each time the bird passes through them, and the score increments accordingly. You can customize the game further by adjusting the styles and adding new features.