in dit project leg ik jullie stapsgewijs uit hoe je een Flappy Bird spel kunt maken in Scratch.

Over Flappy Bird:

De inspiratie voor dit project komt van het spel Flappy Bird. Het spel werd uitgebracht in 2013 voor de mobile telefoon.

Het spel gaat over een vogel die constant valt, deze kun je laten vliegen door op het scherm te tikken. Je moet de vogel al tikkend door de obstakels leiden. Hij mag de obstakels niet aanraken. ondertussen wordt de score bijgehouden. Het doel van het spel is een zo hoog mogelijke score te behalen.

Dit spel werd een enorme rage. Sinds het spel uit te Playstore is verwijderd zijn er ontzettend veel replica’s van nagemaakt. Dit is er een van!

Wat is Scratch?

Scratch is een programmeer programma op je Raspberry Pi. In dit programma werk je met functieblokken. Dit houd in dat je de programmeer tekst niet zelf schrijft. De blokken met de functies zijn al voor je gemaakt. Deze blokken zet je zelf in een schema. Als je de Raspbian software op je Raspberry Pi hebt gedownload staat Scratch als het goed is automatisch op je Pi. Als dat niet zo is moet je deze downloaden.

Ik programmeer in Scratch op de Raspberry Pi 4 met 4GB. Je kunt ook programmeren op de Raspberry Pi 3B+. Ook kun je met de Pi 4 de 1 GB of 2 GB gebruiken.

Programmeer je in Scratch 2.0? Dan kun je nog steeds deze tutorial volgen. Houd er wel rekening mee dat bepaalde functies op een andere plek kunnen staan Ook kunnen de plaatjes er anders uitzien dan op jouw scherm. Je kunt deze tutorial volgen omdat de code hetzelfde is.

Omdat dit een lange instructie is heb ik de uitleg verdeeld ik tussenkopjes. Hierdoor kun je makkelijker opzoeken waar je gebleven was.

Taal veranderen.

Waarschijnlijk staat jouw programma in het Engels. Om de stappen goed te volgen is het verstandig als je de taal verandert in je programma. Je kunt de taal veranderen door op de “wereldbol” links boven je scherm te klikken. Dit icoon is de vinden naast het logo van Scratch. Selecteer Nederlands.

Niveau – beginner 33% 33%

Tijdsduur – 60 Min 50% 50%

Kosten – €82.3. euro compleet 50% 50%

Stap 1: Benodigheden

1X Raspberry Pi 4 (kosten vanaf €39,95)

1X HDMI kabel (micro)

1X Monitor

1X Toetsenboord

1X Muis

1X 16GB micro SDHC raspbian

1X Raspberry Pi voedingsadapter

Stap 2: Aansluiten & Opstarten

Aan de zijkant van de Raspberry Pi 4B zitten twee Micro HDMI poorten. Plaats de Micro HDMI kabel in de linker poort, en het HDMI uiteinde in een monitor of beeldscherm.
Sluit een toetsenbord & muis aan op de USB poorten en plaats als laatste de voedingskabel in de USB-C poort.

Je set-up is nu klaar om te worden opgestart.
Als de de Raspberry Pi nu opstart krijg je op je monitor een desktop te zien. Bij de eerste keer opstarten moet je deze nog even instellen, maar dat wordt stap voor stap uitgelegd.

Stap 3: Programmeren

1. Programmeer je Sprite

Eerst gaan we onze Sprite maken. Maar wat is een Sprite? Een Sprite wordt in Scratch gezien als een soort van karakter. Een object op de achtergrond kan ook een Sprite heten, zoals bijvoorbeeld een gebouw.

Start je Raspberry Pi op en klik op het framboos. Ga naar programmeren en start Scratch.
Als je Scratch hebt opgestart zie je dat er al een standard Sprite is aangemaakt. Deze kun je behouden. Je kunt ook een nieuwe Sprite zelf maken, of er eentje uitkiezen.
Wil je de standard Sprite verwijderen? Klik dan met de rechtermuis knop op het icoontje aan de linker onderkant van je scherm. En klik vervolgens op verwijderen.
Om een nieuwe Sprite aan te maken zie je de tekst: “nieuwe sprite:” om zelf een Sprite te maken klik dan op de kwast. Om een Sprite uit te kiezen klik je op het hoofdje. Voor deze tutorial heb ik gekozen voor de heks.
Pas de naam aan voor je Sprite. Om de naam aan te passen ga je naar uiterlijken. Daar zie je staan: “Nieuw uiterlijk:” Vul hierna de naam voor de Sprite in.

Nu kunnen we beginnen met de code. Eerst gaan we onze Sprite programmeren. In het spel valt de Sprite met een constante snelheid naar beneden (zwaartekracht). Je kunt de Sprite omhoog houden door op het scherm te klikken.

Als je net je sprite hebt bewerkt druk je op Scrips. Nu komen de functieblokken weer tevoorschijn. Ga naar gebeurtenissen en pak de “wanneer (flag) wordt aangeklikt” blok.
Ga naar besturen en pak een herhaal blok. Zet deze onder de start blok. Pak vervolgens een “als dan” blok en zet deze in de herhaal blok.
Vervolgens ga je naar waarnemen. Pak de “muis ingedrukt?” functie. Deze functie plaats je tussen de als dan.
Vervolgens maken we de zwaartekracht aan. Door de zwaartekracht valt de heks verticaal naar beneden, dus de Y richting. Wij maken voor de zwaartekracht zelf een variabel aan.

Klik op data, klik dan op maak een variabele. Noem deze Zwaartekracht. Vink aan: Alleen voor deze Sprite. Dit is belangrijk, anders werkt het niet. Klik vervolgens op OK (Figuur 1).

Figuur 1

Figuur 2

Pak nu de “maak zwaartekracht 0” variabel. Plaats deze onder de start functie. Nu is de zwaartekracht altijd 0
Ga naar beweging en plaats de “ga naar X:– Y:–” blok onder de maak zwaartekracht. Plaats je Sprite waar je wilt dat deze start wanneer het spel begint. Lees de X en Y waardes af en verwerk deze in je blok. Je ziet deze waardes aan de linkerkant van je scherm. Je ziet je Sprite in een wit vak, in dat vak kun je de Sprite bewegen. Als je de muis beweegt in het vak zie je dat de waardes veranderen. Speel hier een beetje mee. Als je de waardes invult in het functieblok en vervolgens op start drukt, zie je waar de Sprite geplaatst wordt. Pas deze waardes aan tot je tevreden bent. Je kunt het ook altijd later nog aanpassen.
Nu gaan we ervoor zorgen dat de Sprite op de Y as naar boven en beneden beweegt.

Ga naar beweging en pak de “verander Y met 10” blok. Plaats deze onder het herhaal blok. Ga naar Data en vervang de 10 met variabelen “Zwaartekracht”. Plaats hieronder “verander zwaartekracht met 1”. Zet de waarde op -0,8. De min bepaalt de richting waar je Sprite valt, in dit geval naar beneden. Het getal bepaald de snelheid. Deze waardes kun je zelf aanpassen naar je eigen voorkeur.

Plaats daarna de maak “zwaartekracht 0” blok onder de “muis ingedrukt?” functie. Verander de waarde naar 10. Nu zal je Sprite vallen en het moment de muis ingedrukt is weer omhoog springen.

Je schema zal er zo ongeveer uit zien (Figuur 2). Voor nu is dit de code van je Sprite.

2. Maak de obstakels

De obstakels kun je zelf maken of uitkiezen. Dit gaat op dezelfde manier als stap 2 (Programmeer je Sprite).
Omdat we obstakels aan de boven en onderkant van het scherm willen hebben maken we 2 plaatjes aan onder hetzelfde stukje. Van de Sprite dat je nu gaat maken komen 2 versies.
Als je een Sprite hebt gekozen/aangemaakt selecteer je deze. Ga dan naar Uiterlijken. Ik heb het gebouw gekozen, hier zijn meerdere versies van gemaakt. Als dit bij jou ook het geval is kun je alle overige versies verwijderen en jouw favoriet overhouden. Je kunt de overige Sprite verwijderen door op het kruisje te drukken.
Nu gaan we de 2^e versie aanmaken. Ga naar je Sprite icoon (vakje onder Nieuw uiterlijk). Klik op de rechtermuis knop en druk op kopie maken. Nu heb je 2 keer hetzelfde gebouw. Deze 2^e versie gaan we bewerken. Helemaal rechtsboven in je scherm zie je verschillende functies staan om je Sprite te draaien. Druk op de boven-onder omdraaien (Figuur 3). Nu hebben we een boven en onderkant voor onze obstakels. Vergeet ze niet een naam te geven. Ik heb ze Boven gebouw en Onder gebouw genoemd.

Nu gaan we de code maken zodat je beiden versies van je Sprite tegelijk op het scherm ziet. Klik nu je nieuwe Sprite aan en ga naar scripts. Nu kun je een code aanmaken die alleen voor deze Sprite geld.

Begin de code met dezelfde start functie als de vorige code. Ga naar Uiterlijken en plaats onder de start een verdwijn blok. Ga naar besturen plaats een herhaal blok hier onder.
Maak een variabelen aan. Doe dit op dezelfde manier als stap 4 (Programmeer je Sprite) Ik noem deze Boven/Onderkant gebouw. Weer geld deze variabelen alleen voor deze Sprite.
Plaats de “maak Boven/Onderkant gebouw 0” in het herhaal blok. Benoem de 0: Onder.
Ga naar besturen en plaats een “maak een kloon van mijzelf” plaats deze onder de vorige maak functie.
Kopieer dezelfde 2 blokken van stap 7 en 8 en plaats deze onder elkaar.
Noem de andere “boven/onderkant gebouw” Boven. Nu worden ook gebouwen aan de bovenkant geplaatst. Ga naar besturen en plaats de “wacht 1 sec” onder in de herhaalfunctie. Ik zet de timer op 1.5 sec. Dit bepaald de afstand van de gebouwen.
Je schema ziet er nu ongeveer zo uit (Figuur 4).
Hiernaast starten we een ander schema. Ga naar Besturen en plaats en “wanneer als kloon start” functie. Haal vanuit uiterlijken een verschijn blok en plaats deze daar onder.
Ga naar Besturen en plaats een “als — dan anders” blok onder de verschijn functie.
Ga naar functies en plaats een “is gelijk” functie tussen “als – dan”. Vul in de eerste is gelijk opening je variabel “Bovenkant /Onderkant gebouw”. Na de = schrijf je Onder. Let erop dat het woord hetzelfde is geschreven als het schema in (Figuur 4).
Ga naar Uiterlijken en plaats onder de als “verander uiterlijk naar onder gebouw”.
Kopieer deze functie en plaats deze bij anders. Benoem hier boven gebouw.

Figuur 3

Figuur 4

Als je een andere naam hebt gebruikt voor je Sprites moet je die overnemen.

Nu hebben we de code zo gemaakt dat de boven en onderkant van je obstakel tegelijk te zien zijn op je scherm (Figuur 5). De positie van de obstakels maakt voor nu niet uit. Belangrijk is dat ze beiden tegelijk te zien zijn op je scherm.
Je code ziet er ongeveer zo uit (Figuur 6).

Figuur 5

Figuur 6

3. Positioneer de obstakels

De bedoeling van het spel is dat de obstakels van rechts naar links over het spel bewegen. Daarom is het verstandig om de gebouwen zo ver mogelijk aan de rechterkant te laten beginnen. Dit kun je zelf aanpassen als je het spel wat lastiger wilt maken.

Ga naar beweging en plaats “ga naar X:– Y: — na” onder de “verander uiterlijk naar Boven gebouw.”
Als je met de muis over het scherm beweegt zie je in de hoek van je witte vak de X en Y waardes staan. Deze veranderen op het moment dat je met de muis beweegt.
Speel een beetje met de waardes van X. Als je de waarde invult en op start drukt zie je waar het verschijnt. Vul de waardes waar jij tevreden mee bent. Zie je het obstakel niet? Klik je Sprite aan en ga naar het kopje uiterlijken en klik op verschijn. Als je deze aanklikt, zie je het obstakel. Om te bepalen welke je laat zien moet je bij uiterlijke nummer 1 of 2 (welke je wilt zien) aanklikken.
Je wilt dat de obstakels boven elkaar staan. Plaats ook een “ga naar X: — Y:– na” functie voor de onderkant. Als je tevreden bent met de plek van de bovenkant kan je de X en Y waardes invullen voor de onderkant. Nu staan ze onder elkaar. Bekijk voor verduidelijking het plaatje (Figuur 7). Zoals je kan zien heb ik de gebouwen aan ze zijkant van het scherm geplaatst. Deze staan boven elkaar.

Figuur 7

4. Beweeg de obstakels

Nu laten we de obstakels op het scherm bewegen

Ga naar besturen en zet de “herhaal tot” blok na de als – dan anders blok. Dit blok voert kijkt of de voorwaarde waar of niet waar is. Als de actie niet waar is gaat het programma verder naar het volgende blokje. Als de actie waar is speelt hij de code in de herhaal blok af.
Ook laten we de gebouwen verdwijnen als ze de Sprite gepasseerd zijn. Haal uit functies een “minder dan” blok. En plaats deze in het lege vakje na “herhaal tot”.
Ga naar beweging en pak de “ X-positie blok”. Plaats deze voor de <50.
Om aan te geven wanneer je het gebouw wilt laten verdwijnen plaats je de muis aan de linkerkant van het scherm. Kies de positie uit wanneer je het wilt laten verdwijnen. Lees hiervan de X waarde af. Ga naar beweging en plaats de “X- positie” voor <50. Plaats na de <50 de X waarde wanneer je het wilt laten verdwijnen. Je kunt ook het obstakel verplaatsen naar de zijkant van je scherm om het je gemakkelijk te maken (Figuur 8).
Ga naar besturen en plaats de “verwijder kloon” blok na de “herhaal tot” functie.
Nu laten we de gebouwen naar links bewegen. Ga naar beweging en plaats een “verander X met 10” blok en plaats het in de “herhaal tot” blok. Verander de waarde van 10 naar -5. Deze waarde bepaald de snelheid waarmee de gebouwen naar links bewegen. Dit kun je zelf aanpassen om het spel lastiger te maken.

Wat heb je tot nu toe geschreven: de onderkant en bovenkant gebouwen verschijnen. De Positie van deze gebouwen zijn aangegeven. Als de X waarde kleiner is dan (in mijn geval) -230 wordt de kloon verwijderd.

Je code ziet er ongeveer zo uit (Figuur 9):

Test voor jezelf of de code werkt.
Je kunt zelf de wachttijd aanpassen. Dit bepaald om de hoeveel seconden en nieuw gebouw geplaatst wordt.

Nu gaan we de hoogte van de gebouwen veranderen door de Y positie aan te passen.

We maken een nieuwe variabelen aan. Ik noem deze voor het gemak: willekeuring Y hoogte. Deze waarde is weer alleen voor deze Sprite.

Dan maken we een random y positie aan waar de gebouwen op geplaatst worden.

Plaats in variabelen de maak “willekeurige Y hoogte” in het 1^e programmeer blokje boven in de herhaal functie.
Ga naar functies en plaats “willekeurig getal tussen 1 en 10” in het lege vakje van de variabele.
Het is handig als de gebouwen goed in het midden van elkaar staan. Ga naar uiterlijken en kopieer een gebouw en plaats het bij de andere zoals op de foto (Figuur 10).

Figuur 8

Figuur 9

Figuur 10

Om het middelpunt van de gebouwen te bepalen selecteer je beide gebouwen met een vierkant. Als je dat gedaan heb zie je in het midden een rondje. Verplaats dit zo dicht mogelijk in het midden van het vakje. Beweeg de gebouwen van elkaar af om zo het gat te bepalen waar je Sprite doorheen moet. Als je nog niet helemaal tevreden bent met de afstand tussen de gebouwen kun je dit later aanpassen.
Dupliceer nu wat je net hebt gemaakt. Klik met je rechtermuis knop op het plaatje aan de linkerkant van je scherm. Klik vervolgens op dupliceren. Zie (Figuur 11).
Nu je 2 keer hetzelfde bestand hebt haal je bij een plaatje de onderste obstakel weg. En bij de ander de bovenkant. Nu heb je weer net als voorheen een boven en onder obstakel. Maar nu zijn ze aan elkaar gepositioneerd.
Pas weer de namen aan.
Nu heb je als het goed is een plaatje over die kunt je verwijderen. Klik op de rechtermuis knop en vervolgens op verwijderen.
Test je code zoals je kunt zien zijn bij mij de gebouwen te kort (Figuur 12). Als dit bij jou ook het geval is gaan we dit aanpassen. Ga weer naar uiterlijken en selecteer je obstakel en het enige wat je hoeft te doen is het een beetje uitrekken (Figuur 13). Hierdoor wordt je obstakel langer en past het over het gehele scherm.
Terug bij de code: positioneer de maximale/minimale hoogte waarop je wilt dat de obstakels beginnen. Plaats het aan de onder/bovenkant van het scherm en meet Y waardes op. Vul deze waardes in op “willekeurig getal tussen”. De bovenkant is voor mij 160 en de onderkant -160.
Nog onduidelijk waar je het obstakel kunt plaatsen? Bekijk even dit plaatje(Figuur 14).

Figuur 11

Figuur 12

Figuur 13

Figuur 14

Ga naar Data. Plaats de “willekeurige Y hoogte” op de Y in het blokje “ga naar X… Y… plaats deze voor de boven en onderkant gebouw. Je codes zien er ongeveer zo uit (Figuur 15).
Test voor jezelf of de code werkt. Je kunt de afstand nog aanpassen door de waardes in je code te veranderen, speel hier een beetje mee.
Je kunt ook de grootte van je Sprite aanpassen: Klik op je Sprite, zodat de code weergegeven wordt. Ga naar uiterlijken en kies de maak grootte 100% zet deze onder je “ga naar x: y:” en boven de herhaal functie. Je kunt het naar je eigen wensen aanpassen (Figuur 16).

Vind je dat je Sprite te stil staat tijdens het spelen? Dan kunnen wij net zoals bij de echte flappy bird een soort van animatie toevoegen.

Ga naar Besturen en pak een “als dan” blok en stop deze onderaan de herhaal blok.
Ga naar beweging en kies de “richt naar 90 graden”. Deze kun je aanpassen hoe je zelf wilt. Ik kies voor 75 graden. Plaats dit onder de “maak zwaartekracht 10 functie”.
Ga naar functies en pak een “minder dan” blok en plaats deze tussen de als – dan
Dan gaan we naar beweging en kiezen we de “richting” functie, deze zetten we voor de <50.
Na de <50 vullen we 90 in. Dit staat voor 90 graden. 90 graden was de startpositie van de Sprite.
Dus als de richting kleiner is dan 90 graden willen we dat de Sprite kloksgewijs beweegt. Hiervoor gaan we naar motion en pakken we de draai (klokwijs) 15 graden. De 15 pas ik aan naar 3 graden. Kijk zelf wat je een leuke beweging vind. Plaats dit in de “als dan” blok.
Je code ziet er ongeveer zo uit (Figuur 17).

Figuur 15

Figuur 16

Figuur 17

5. Verlies functie

Dan moeten we natuurlijk nog een verlies functie toevoegen. Ga naar de code van je karakter.

Ga naar besturen en plaats een als dan blok onderin de herhaalblok.
Ga naar waarnemen en kies de “raak ik (variabelen)?” vink hierin je obstakel aan. Omdat ik vanuit Scratch gebouwen heb gekozen kies ik buildings. Plaats dit blok tussen als—dan.

Ga naar besturen en pak de stop alle blok en zet deze in de “als dan” blok. Wat je nu geschreven hebt, houd in dat de gehele code ophoud als de Sprite de (in mijn geval) gebouwen aanraakt.

Ook verlies je het spel als je te ver naar beneden valt. Ga naar funties en pak een Of” blok. Plaats het kopje “raak ik — aan?” in de eerste opening van de or blok. Zet daarna de or blok tussen als—dan.
Pak bij funties de minder dan blok en plaats deze na de of functie.
Ga naar beweging en pak de Y positie en zet deze voor de <.
Plaats de Sprite naar de bodem van het scherm en meet de Y waarde. Ik meet Y waarde – 170.
Je code ziet er ongeveer zo uit (Figuur 18).
Test voor jezelf of de code werkt.
Waarschijnlijk zie je de aangemaakte variabelen op je scherm staan. Deze kun je weghalen door naar het kopje variabelen te gaan. Vink hierbij de doosjes bij de variabel af. Doe dit bij je Sprite en obstakel.

Figuur 18

6. Achtergrond toevoegen

Naast je aangemaakte Sprites zie je de Speelveld achtergrond staan. Onder de al aangemaakte achtergrond heb je de functies om er zelf een te maken of er eentje uit te kiezen. Speel hier een beetje mee.

7 Score bijhouden

Ga naar je obstakels code toe.

We maken eerst een nieuwe variabelen aan, noem deze Score. Deze kun je aanhouden voor alle sprites.
De bedoeling is dat je een punt erbij krijgt als de Sprite door het midden van de obstakel gaat.
Ga naar Besturen en pak een “als dan” blok. Plaats dit tijdelijk los op je scherm.
Ga dan naar functies en pak een is groter dan functie en plaats deze tussen de “als dan”.
Ga naar waarnemen en pak de “X-positie van (jou Sprite naam) blok”. Plaats deze functie voor > — tussen de “als dan”
Bij Waarnemen pak je de X-positie en zet je deze na de >.
Dan haal je van Data de “verander score met 1” variabel. En plaats deze in de “als dan” blok.
Vervolgens plaats je dit blok in de “herhaal tot” blok. Onder de “verander X met”.
Voor nu ziet je code er ongeveer zo uit (Figuur 19).

Als je nu test zie je dat de score snel omhoog gaat, dit is omdat het programma snel ziet dat de Sprite door het obstakel is. Het telt dus te lang door. Wij gaan er voor zorgen dat hij er maar 1 punt bij op telt.

We maken een nieuwe variabelen aan, deze noemen we: “al gescoord”. Selecteer alleen voor deze Sprite en druk op OK.
Ga naar Data en neem de “maak al gescoord” 0 blok. Verander de waarde 0 naar: Nee
Plaats dit blok aan het begin van de code onder “verschijn”.
Vervolgens ga je naar functies en pak je “en” blok. En pak een “is gelijk aan” blok, plaats de gelijkblok op de 2^e opening van de “en” blok.
Ga naar je variabelen en pak je “al gescoord” variabel en plaats deze op de — =.
Na de = zet je: Nee
Plaats het gehele kopje tussen de “als dan”. Zet deze op de 1^e opening van de en functie. Zet deze reeks commando’s weer terug.
Nu controleert het programma of de Sprite al gescoord heeft. Het programma hoeft maar een keer de score op te tellen. Dus plaatsen we van variabelen een “maak al gescoord” 0. Verander de 0 naar Ja. En zet deze tussen de als functie. Onder “verander score met 1”.
Je code ziet er nu ongeveer zo uit (Figuur 20).

Figuur 19

Figuur 20

Test of je code werkt, je ziet waarschijnlijk dat de score per 2 omhoog gaat. Dit is, omdat beiden obstakels meegerekend worden.
We gaan aangeven dat maar een obstakel (boven of onder) meegerekend wordt voor de score. We zorgen er nu voor dat alleen de bovenste obstakel meegerekend wordt.
Ga naar functies en kies de “en” en gelijk blok. Zet het gelijk blok op de laatste open plek van de “en” functie.
Plaats voor =Onderkant de Boven/Onderkant gebouw variabel.
Schrijf naar de = Boven
Sleep de lange code tussen “als dan” op de open plek van de “en” functie.
Verander na de = naar Onderkant.
Sleep de inmiddels lange code naast de als functie en plaats deze voor de en functie. Zet deze vervolgens weer terug op dezelfde plek.
Je code ziet er ongeveer zo uit (Figuur 21).
De code die je hebt geschreven controleert of de Sprite voorbij de obstakel is gegaan. Ook kijkt het of hij al gescoord heeft. En het controleert of de Boven/onderkant gelijk is aan Bovenkant. Dit houd in dat het alleen de bovenkant meetelt. Als dit allemaal waar is gaat de score met 1 omhoog.
Je zult zien dat de score niet reset als je weer opnieuw begint. Dit veranderen we door voor de start functie (de flag) een variabelen toe te voegen. Maak “score” 0 (afbeelding 22).
Haal nu nog de Variabel “al gescoord” weg op je scherm door het vierkantje af te vinken.

Figuur 21

Figuur 22

Nu heb je jouw eigen Flappy Bird spel gemaakt! Vond je dit leuk om te maken? Je kunt het spel nog uitbreiden. Je kunt bijvoorbeeld muziek en soundeffects toevoegen, of bijvoorbeeld meerdere karakters maken. De basis van het spel heb je al gemaakt en nu kun je het spel helemaal aanpassen naar jouw eigen wensen. Veel plezier!