Raspberry Pi project: Flappy Witch

in this project I explain step by step how to make a Flappy Bird game in Scratch.

About Flappy Bird:

The inspiration for this project comes from the game Flappy Bird. The game was released in 2013 for the mobile phone.

The game is about a bird that falls constantly, you can make it fly by tapping the screen. You have to tap the bird through the obstacles. He must not touch the obstacles. meanwhile the score is kept. The aim of the game is to achieve the highest possible score.

This game became all the rage. Since the game was removed from Playstore, many replicas have been recreated. This is one of them!

What is Scratch?

Scratch is a programming program for you Raspberry Pi. In this program you work with function blocks. This means that you do not write the programming text yourself. The blocks with the functions are already made for you. You put these blocks in a schedule yourself. If you have the Raspbian software on your Raspberry Pi Once downloaded, Scratch should be automatically installed on your Pi. If not, you need to download it.

I program in Scratch on the Raspberry Pi 4 with 4GB. You can also program on the Raspberry Pi 3B+. You can also use the 4 GB or 1 GB with the Pi 2.

Do you program in Scratch 2.0? Then you can still follow this tutorial. Keep in mind that certain functions may be in a different place. The pictures may also look different than on your screen. You can follow this tutorial because the code is the same.

Because this is a long instruction, I have divided the explanation and I have subheadings. This makes it easier to look up where you left off.

Change language.

Your program is probably in English. To follow the steps properly, it is wise if you change the language in your program. You can change the language by clicking on the “globe” at the top left of your screen. This icon can be found next to the Scratch logo. Select Dutch.

Step 1: Requirements

1X Raspberry Pi 4 (costs from €39,95)

1X HDMI cable (micro)

1X Monitor

1X Keyboard

1X Mouse

1X 16GB micro SDHC raspbian

1X Raspberry Pi power adapter

Step 2: Connect & Start Up

On the side of the Raspberry Pi 4B are two Micro HDMI ports. Plug the Micro HDMI cable into the left port, and the HDMI end into a monitor or display.
Connect a keyboard & mouse to the USB ports and finally insert the power cable into the USB-C port.

Your setup is now ready to start.
If the de Raspberry Pi Now you start up you will see a desktop on your monitor. When you start up for the first time, you have to set it up, but that is explained step by step.

Step 3: Programming

1. Program your Sprite

First we are going to make our Sprite. But what is a Sprite? A Sprite is seen as a kind of character in Scratch. An object in the background can also be called a Sprite, such as a building.

1. start you Raspberry Pi and click on the raspberry. Go to programming and start Scratch.
2. If you have started Scratch you will see that a standard Sprite has already been created. You can keep this. You can also make a new Sprite yourself, or choose one.
3. Do you want to remove the standard Sprite? Then click with the right mouse button on the icon at the bottom left of your screen. And then click delete.
4. To create a new Sprite you see the text: “new sprite:” to make a Sprite yourself, click on the brush. To choose a Sprite, click on the head. For this tutorial I chose the witch.
5. Customize the name for your Sprite. To change the name, go to looks. There you will see: "New appearance:" Enter the name for the Sprite.

Now we can start with the code. First we are going to program our Sprite. In the game, the Sprite falls down at a constant speed (gravity). You can hold the Sprite up by clicking on the screen.

6. If you've just edited your sprite, press Scrips. Now the function blocks reappear. Go to events and grab the “when (flag) is clicked” block.
7. Go to control and take a repeat block. Place this under the starting block. Then take an “if then” block and put it in the repeat block.
8. Then you go to observe. Grab the "mouse pressed?" position. You place this function between the if then.
9. Then we create gravity. Gravity causes the witch to fall vertically, so the Y direction. We make a variable for gravity ourselves.

Click on data, then click on create a variable. Call this Gravity. Check: Only for this Sprite. This is important or it won't work. Then click OK (Figure 1).

Figure 2

10. Now take the "make gravity 0" variable. Place this under the start function. Now gravity is always 0
11. Go to movement and place the "go to X: - Y: -" block under the make gravity. Place your Sprite where you want it to start when the game starts. Read the X and Y values ​​and process them in your block. You will see these values ​​on the left side of your screen. You see your Sprite in a white box, in that box you can move the Sprite. If you move the mouse in the box you will see that the values ​​change. Play with this a bit. If you enter the values ​​in the function block and then press start, you will see where the Sprite will be placed. Adjust these values ​​until you are satisfied. You can always adjust it later too.
12. Now we are going to make sure that the Sprite moves up and down on the Y axis.

Go to movement and take the "change Y by 10" block. Place this under the repeat block. Go to Data and replace the 10 with variables “Gravity”. Place below "change gravity by 1". Set the value to -0,8. The min determines the direction where your Sprite falls, in this case down. The number determines the speed. You can adjust these values ​​yourself to your own preference.

13. Then place the make "gravity 0" block under the "mouse pressed?" position. Change the value to 10. Now your Sprite will drop and the moment the mouse is pressed it will jump up again.

Your schedule will look something like this (Figure 2). For now this is your Sprite's code.

2. Make the obstacles

1. You can make or choose the obstacles yourself. This is done in the same way as step 2 (Program your Sprite).
2. Because we want to have obstacles at the top and bottom of the screen, we create 2 pictures under the same piece. There are 2 versions of the Sprite that you will now make.
3. If you have chosen / created a Sprite, select it. Then go to Looks. I chose the building, several versions have been made. If this is also the case with you, you can remove all other versions and keep your favorite. You can remove the remaining Sprite by pressing the cross.
4. Now we go the 2^e create version. Go to your Sprite icon (box under New Appearance). Click the right mouse button and press make copy. Now you have the same building twice. This 2^e version we are going to edit. At the top right of your screen you will see various functions for running your Sprite. Press the top-bottom to flip (Figure 3). Now we have a top and bottom for our obstacles. Don't forget to give them a name. I named them Above Building and Below Building.

Now we are going to create the code so that you can see both versions of your Sprite on the screen at the same time. Click on your new Sprite and go to scripts. Now you can create a code that only applies to this Sprite.

5. Start the code with the same start function as the previous code. Go to Looks and place a disappearing block under the start. Go to control place a repeat block below.
6. Create a variable. Do this in the same way as step 4 (Program your Sprite) I call this Top / Bottom building. Again these variables only apply to this Sprite.
7. Place the “make Top / Bottom building 0” in the repeat block. Name the 0: Below.
8. Go to control and place a “make a clone of myself” place this under the previous make function.
9. Copy the same 2 blocks from steps 7 and 8 and place them one below the other.
10. Name the other “top / bottom of the building” above. Now buildings are also placed at the top. Go to control and place the “wait 1 sec” at the bottom of the repeat function. I set the timer to 1.5 sec. This determines the distance from the buildings.
11. Your schedule now looks something like this (Figure 4).
12. In addition, we start a different schedule. Go to Control and place and “when if clone starts” function. From appearance, get an appearance block and place it underneath.
13. Go to Control and place an “if - then else” block under the appear function.
14. Go to functions and place an "is equal" function between "if - then". In the first equal opening, enter your variable “Top / Bottom building”. After the = you write under. Note that the word is written the same as the diagram in (Figure 4).
15. Go to Looks and place under the as "change look to bottom of building".
16. Copy this function and place it at otherwise. Name above building here.

Figure 4

If you have used a different name for your Sprites, you must copy it.

17. Now we have made the code so that the top and bottom of your obstacle can be seen on your screen at the same time (Figure 5). The position of the obstacles does not matter for now. It is important that they are both visible on your screen at the same time.
18. Your code looks something like this (Figure 6).

.

Figure 6

3. Position the obstacles

The object of the game is for the obstacles to move across the game from right to left. It is therefore wise to start the buildings as far as possible on the right. You can adjust this yourself if you want to make the game a bit more difficult.

1. Go to movement and place "go to X: - Y: - na" under the "change costume to Up building."
2. If you move the mouse over the screen you will see the X and Y values ​​in the corner of your white box. These change the moment you move the mouse.
3. Play a little with the values ​​of X. If you enter the value and press start you will see where it appears. Fill in the values ​​that you are satisfied with. Can't you see the obstacle? Click on your Sprite and go to the header looks and click on appear. If you click on this, you will see the obstacle. To determine which one to show you have to click on number 1 or 2 (which you want to see).
4. You want the obstacles to be on top of each other. Also put a "go to X: - Y: - after" function in front of the bottom. If you are satisfied with the location of the top, you can enter the X and Y values ​​for the bottom. Now they are one below the other. Look at the picture for clarification (Figure 7). As you can see I have placed the buildings on the side of the screen. These are one above the other.

Figure 7

4. Move the obstacles

Now let's move the obstacles on the screen

1. Go to control and put the “repeat until” block after the if - then else block. This block checks whether the condition is true or false. If the action is not true, the program continues to the next block. If the action is true, he plays the code in the repeat block.
2. We also make the buildings disappear when they have passed the Sprite. Get a “less than” block from functions. And place it in the empty box after “repeat until”.
3. Go to movement and get the "X position block". Place this in front of the <50.
4. To indicate when you want to make the building disappear, place the mouse on the left side of the screen. Choose the position when you want it to disappear. Read the X value from this. Go to movement and set the “X position” in front of <50. After the <50, place the X value when you want it to disappear. You can also move the obstacle to the side of your screen for your convenience (Figure 8).
5. Go to control and place the “remove clone” block after the “repeat until” function.
6. Now let's move the buildings to the left. Go to movement and place a "change X by 10" block and place it in the "repeat until" block. Change the value from 10 to -5. This value determines the speed at which the buildings move to the left. You can adjust this yourself to make the game more difficult.

What have you written so far: the bottom and top buildings appear. The position of these buildings are indicated. If the X value is less than (in my case) -230, the clone is removed.

Your code looks something like this (Figure 9):

7. Test for yourself if the code works.
8. You can adjust the waiting time yourself. This determines how many seconds a new building is placed.

Now we are going to change the height of the buildings by adjusting the Y position.

9. We are creating new variables. I call these for convenience: arbitrary Y height. This value is again only for this Sprite.

Then we create a random y position on which the buildings are placed.

10. Put in variables the make "arbitrary Y height" in the 1^e program block at the top in the repeat function.
11. Go to functions and place “random number between 1 and 10” in the empty box of the variable.
12. It is useful if the buildings are well centered. Go to skins and copy one building and place it next to the other as in the picture (Figure 10).

Figure 10

13. To determine the center of the buildings, select both buildings with a square. When you have done that you will see a circle in the middle. Move this as close as possible to the center of the box. Move the buildings apart to determine the hole that your Sprite must pass through. If you are not completely satisfied with the distance between the buildings, you can adjust this later.
14. Now duplicate what you just created. Right-click on the image on the left side of your screen. Then click duplicate. See (Figure 11).
15. Now that you have the same file twice, remove the bottom obstacle from a picture. And the other with the top. Now you have an above and below obstacle as before. But now they are positioned together.
16. Change the names again.
17. Now you should have a picture about that you can remove. Click on the right mouse button and then on delete.
18. Test your code as you can see the buildings are too short for me (Figure 12). If this is also the case for you, we will adjust this. Go back to looks and select your obstacle and all you have to do is stretch it a bit (Figure 13). This will make your obstacle longer and fit over the entire screen.
19. Back at the code: position the maximum / minimum height at which you want the obstacles to start. Place it at the bottom / top of the screen and measure Y values. Enter these values ​​at “random number between”. The top is 160 for me and the bottom -160.
20. Still unclear where you can place the obstacle? Take a look at this picture (Figure 14).

Figure 14

21. Go to Data. Place the “random Y height” on the Y in the block “go to X… Y… place this in front of the top and bottom building. Your codes will look something like this (Figure 15).
22. Test for yourself if the code works. You can still adjust the distance by changing the values ​​in your code, play with this a bit.
23. You can also adjust the size of your Sprite: Click on your Sprite to display the code. Go to skins and choose the make size 100%, put it under your "go to x: y:" and above the repeat function. You can adjust it to your own liking (Figure 16).

Do you think your Sprite is standing still while playing? Then, just like with the real flappy bird, we can add some kind of animation.

24. Go to Control and take an “if then” block and stop it at the bottom of the repeat block.
25. Go to movement and choose the "aim to 90 degrees". You can adjust this how you want. I choose 75 degrees. Place this under the "make gravity 10 function".
26. Go to functions and grab a “less than” block and place it between the if - then
27. Then we go to movement and we choose the “direction” function, we put this in front of the <50.
28. After the <50 we enter 90. This represents 90 degrees. 90 degrees was the Sprite's starting position.
29. So if the direction is less than 90 degrees, we want the Sprite to move clockwise. For this we go to motion and we take the turn (clockwise) 15 degrees. I adjust the 15 to 3 degrees. See for yourself what you like a movement. Place this in the “if then” block.
30. Your code looks something like this (Figure 17).

Figure 15

Figure 17

5. Lose function

Then of course we have to add a loss function. Go to your character's code.

1. Go to control and place a if then block at the bottom of the repeat block.
2. Go to observe and choose the "do I touch (variables)?" tick your obstacle here. Because I chose buildings from Scratch, I choose buildings. Place this block between if — then.

Go to control and take the stop all block and put it in the "if then" block. What you have written now means that the entire code stops when the Sprite touches the (in my case) buildings.

3. You also lose the game if you fall too far down. Go to functions and take an Of ”block. Place the heading "do I touch -?" in the first opening of the or block. Then put the or block between if — then.
4. For functions, take the less than block and place it after the or function.
5. Go to movement and take the Y position and put it in front of the <.
6. Place the Sprite to the bottom of the screen and measure the Y value. I measure Y value - 170.
7. Your code looks something like this (Figure 18).
8. Test for yourself if the code works.
9. You will probably see the variables created on your screen. You can remove these by going to the heading variables. Check the boxes at the variable. Do this on your Sprite and obstacle.

Figure 18

6. Add background

Next to your created Sprites you will see the Playfield background. Under the already created background you have the functions to make one yourself or to choose one from it. Play around with this a bit.

7 Keep score

Go to your obstacle code.

1. We first create new variables, call this Score. You can keep this for all sprites.
2. The idea is to get a point when the Sprite passes through the center of the obstacle.
3. Go to Control and take an “if then” block. Place this temporarily on your screen.
4. Then go to functions and grab one is greater than function and place it between the "if then".
5. Go to observe and get the "X position of (your Sprite name) block". Place this function before> - between the “if then”
6. At Observe, take the X position and place it after the>.
7. Then you get the “change score by 1” variable from Data. And place it in the “if then” block.
8. Then place this block in the “repeat until” block. Under the "change X with".
9. For now, your code looks something like this (Figure 19).

If you test now you will see that the score goes up quickly, this is because the program quickly sees that the Sprite is through the obstacle. So it counts on too long. We will ensure that he only adds 1 point.

10. We create new variables, which we call “already scored”. Select only for this Sprite and press OK.
11. Go to Data and take the “already scored” 0 block. Change the value 0 to: No.
12. Place this block at the beginning of the code under “appear”.
13. Then you go to functions and take “en” block. And take an "equals" block, place the equal block on the 2^e opening of the “and” block.
14. Go to your variables and take your “already scored” variable and place it on the - =.
15. After the = you put: No.
16. Place the entire cup between the “if then”. Set this to the 1^e opening of the and function. Restore this sequence of commands.
17. Now the program checks whether the Sprite has already scored. The program only needs to add the score once. So we put variables in “make already scored” 0. Change the 0 to Yes. And put it between the as function. Under "change score by 1".
18. Your code now looks something like this (Figure 20).

Figure 20

19. Test if your code works, you will probably see the score go up by 2. This is because both obstacles are included.
20. We will indicate that only one obstacle (above or below) is included in the score. We now ensure that only the top obstacle is included.
21. Go to functions and choose the “and” and equal block. Place the equal block in the last open space of the “and” function.
22. Place for = Bottom the Top / Bottom building variable.
23. Write to the = Up
24. Drag the long code between “if then” into the open space of the “and” function.
25. After the = change to Bottom.
26. Drag the now long code next to the if function and place it in front of the en function. Then put it back in the same place.
27. Your code looks something like this (Figure 21).
28. The code you wrote checks if the Sprite has passed the obstacle. It also checks whether he has already scored. And it checks if the Top / bottom is equal to Top. This means that it only counts the top. If all this is true, the score increases by 1.
29. You will see that the score does not reset when you start again. We change this by adding a variable for the start function (the flag). Make “score” 0 (figure 22).
30. Now remove the Variable “already scored” on your screen by checking the square.

Figure 21

Figure 22

Now you have made your own Flappy Bird game! Did you like this? You can expand the game even further. For example, you can add music and sound effects, or create multiple characters, for example. You have already made the basics of the game and now you can completely customize the game to your own wishes. Lots of fun!