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.

Tagged with: