Build a Flappy Bird Clone with HTML, CSS, and JavaScript – Step‑by‑Step Guide

1. Analyze Page Structure and Clarify Requirements

The game consists of three screens: a start screen, the main game screen, and a game‑over screen.

1.1 Start Screen

Game background

Moving title and a bird with flapping wings

Start button that enters the game screen

Continuously moving ground

1.2 Game Screen

Score counter showing the number of passed obstacles

Moving obstacles (upper and lower pipes)

Clicking the screen makes the bird rise; gravity pulls it down

Collision between the bird and a pipe triggers the game‑over screen

1.3 End Screen

"Game Over" panel

OK button

2. Develop the Start Screen

2.1 HTML

2.2 CSS

2.3 JavaScript

The bird’s wing‑flapping effect uses frame‑by‑frame animation.

Frame‑by‑frame animation is a common technique where the motion is broken into a series of key frames; each frame is drawn sequentially to create smooth movement.

2.3.1 Title Swing

2.3.2 Moving Ground

2.3.3 Start Button

Result after completing the start screen (overflow:hidden in wrapBg is commented out):

3. Develop the Game Screen

3.1 Bird Object

Create bird.js to define the bird.

Load the bird when the Start button is clicked.

Result after adding the bird:

3.2 Obstacles (Upper and Lower Pipes)

Structure shown in the diagram allows random heights for the lower pipe and the gap.

block.js

creates the pipes; baseObj.js provides random numbers and collision detection for two rectangular divs.

When the Start button is clicked, a new block is pushed into blocksArr. The landTimer calls landRun to move all blocks in the array. New blocks are added when the last block moves far enough, and blocks are removed once they exit the screen.

3.3 Score Counter

Implement a three‑digit counter.

CSS styles:

JavaScript logic (detect when a pipe passes the bird): the bird’s left position is 50 px, pipe width is 62 px; when a pipe’s offsetLeft reaches –12 px, the score increments.

Score counter completed.

4. Develop the End Screen

When the bird collides with a pipe or the ground, hide the score and display the game‑over panel with an OK button.

Add a click event to the OK button.

Final effect:

Interested readers can download the source code from GitHub and add sound effects.

GitHub code download https://github.com/YangQiGitHub/FlyBird