This step by step tutorial will demonstrate how to re-create the game “Flappy Bird” using the online version of Scratch.
Setting up the stage
Start a new project in Scratch and change the stage backdrop to the backdrop called “Blue Sky”


The Parrot Sprite
Next, we will delete the Cat sprite and create a new Parrot sprite:


We will also resize our Parrot sprite to 25% of its original size:

Let’s start coding
Using the Parrot sprite, let’s add some code.
First we will make sure the “Blue Sky” backdrop is always displayed when the game starts:
The let’s animate the parrot to make it flap its wings:
Controlling the Parrot using the space bar
Every time the user presses the space bar, the parrot should fly upwards.

Adding Gravity
The idea is that the parrot should constantly be pulled down by gravity.

Adding a Game Over Screen
The games ends when the parrot hits the ground. To implement this we will first need design a Game Over screen/backdrop:

Then we will add some code to our Parrot sprite to detect when the parrot is hitting the ground. (On our “blue sky” backdrop, the ground has a brown color, you will need to use the color picker to retrieve this color):
Step 4: Adding a score variable
Let’s make a new variable called score. We will use this variable to score 1 point when the bird flies through as set of pipes. To do so we will need to go to the variable section:

Then you will click on the “Make a Variable button”.

Give a name to your variable: score and tick the option “For all sprites”

Make sure your variable is visible (Tick the checkbox next to the variable itself):

Let’s add the pipes
We will need to “paint” a new sprite for the pipe:


For our Parrot sprite we will edit our code as follows to reset the score to 0 when the game starts:
Now let’s add some code to our pipes sprite:
Finally, we will duplicate our pipes sprite:
And delay the second set of pipes by a few seconds:
You can also edit the costume for the second set of pipes to have a different “gap”.
Extension Task
Add a “splash screen” with basic instructions on how to play the game. The splash screen should include a start button to start the game.
The “Game Over” screen should only be displayed for a few seconds and then switch back to the start screen to let the player play again. In this case the score should automatically be reset to 0.