Flappy Bird using Scratch

This step by step tutorial will demonstrate how to re-create the game “Flappy Bird” using the online version of Scratch.

Step 1Step 2Step 3Step 4Step 5Extension

Setting up the stage


Start a new project in Scratch and change the stage backdrop to the backdrop called “Blue Sky”
scratch-add-backdrop
scratch-blue-sky-backdrop

The Parrot Sprite


Next, we will delete the Cat sprite and create a new Parrot sprite:
scratch-remove-sprite-cat
scratch-parrot-sprite
We will also resize our Parrot sprite to 25% of its original size:
scracth-parrot-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:
scratch-switch-background

The let’s animate the parrot to make it flap its wings:
scratch-switch-costumes

Controlling the Parrot using the space bar


Every time the user presses the space bar, the parrot should fly upwards.
scratch-control-flappy-bird

Adding Gravity


The idea is that the parrot should constantly be pulled down by gravity.
scratch-gravity-algorithm

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:
scratch-game-over-screen

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):
scratch-sprite-touching-colour
scratch-color-picker

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:
scratch-variables-section
Then you will click on the “Make a Variable button”.
scratch-make-variable
Give a name to your variable: score and tick the option “For all sprites”
scratch-ball-bouncing-code-complete
Make sure your variable is visible (Tick the checkbox next to the variable itself):
scratch-make-variable-visible

Let’s add the pipes


We will need to “paint” a new sprite for the pipe:
scratch-paint-new-sprite
scratch-paint-pipes

For our Parrot sprite we will edit our code as follows to reset the score to 0 when the game starts:
scratch-set-score-to-0

Now let’s add some code to our pipes sprite:
scratch-pipes-algorithm

Finally, we will duplicate our pipes sprite:
scratch-duplicate-sprite
And delay the second set of pipes by a few seconds:
scratch-delay-pipes
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.

Share Button
Tagged with: