Flappy Bird in Scratch

  • Inhoudsopgave

Inleiding

Wil je zelf proberen het spelletje Flappy Bird in Scratch te maken? Probeer dan deze instructies die we voor CoderDojo #12 maakten! Flappy Bird is een bekend spel waarbij je een vogel laat vliegen en daarbij obstakels (buizen) laat ontwijken. Voor iedere buis die de vogel passeert krijgt de speler een punt. Als de vogel een buis raakt is het spel afgelopen.

Om te beginnen ga je naar deze pagina. Klik op Bekijk van binnen en druk op de Remix knop.

Heb je geen Remix knop, dan moet je eerst in Scratch inloggen. Dat kan rechtsboven.

Heb je nog geen inlog, klik dan op Word Scratcher en volg de stappen. Je bent direct ingelogd in Scratch en kunt aan de slag. Je ontvangt ook een e-mail. Om het aanmaken van je account af te ronden, klik je in de mail op de link. Je kunt daarna projecten delen met anderen (bijvoorbeeld met CoderDojo Arnhem).

Als Scratch niet in het Nederlands wordt weergegeven kun je met het wereldbolletje linksboven Nederlands selecteren.

De basis

Laten we eerst kijken wat we in dit spel beschikbaar hebben.

sprites

Sprites (oftewel de hoofdrolspelers in je spel): Rechtsonder zie je dat er in dit spel twee sprites zijn. Eentje die vogel heet (flappy bird) en eentje die buizen heet.

Als je rechts klikt op de vogel en daarna links op het tabblad uiterlijken, dan zie je dat flappy bird drie uiterlijken heeft: vogel1, vogel2 en vogel3. Zie jij het verschil? Dit gaan we straks gebruiken om flappy bird echt te laten vliegen!

Als je klikt op de sprite van de buizen dan zie je daar ook drie verschillende uiterlijken: buizen1, buizen2 en buizen3. Het gat tussen de buizen zit steeds op een andere plek. Flappy bird moet deze buizen straks proberen te ontwijken.

Geluiden: Bij de sprite van de vogel zie je ook nog een tabblad geluiden. In dit spel zijn 2 geluiden beschikbaar: het geluid flap en het geluid hit. Luister maar eens.

Achtergrond: Als je rechts in je scherm kijkt, dan zie je dat de achtergrond voor dit spel ook al beschikbaar is in deze remix. Wil je later in het spel je eigen achtergrond kiezen dan kan dat hier.

Laten we beginnen met programmeren van het spel!

De vogel laten vallen

Klik op de sprite vogel. Klik links op het tabblad code. Het blok Wanneer ⚑ wordt aangeklikt staat er al.

Bij de start van het spel moeten we eerst een paar basis dingen instellen.

Stap 2

  1. Voeg een maak y 0 blok toe. Hierdoor begint de vogel altijd in het midden van het scherm.

    Voeg een maak zwaartekracht 0 blok toe. Dit blok is te vinden bij variabelen. Hierdoor krijgt de variabele zwaartekracht aan het begin van het spel altijd de waarde nul.

  1. Voeg een herhaal blok toe.

    Binnen het herhaal blok voeg je een verander y met blok toe. Sleep vanuit Variabelen de variabele zwaartekracht op het verander y met blok. Hierdoor veranderen we de y-positie (verticaal) van de vogel met de waarde van de zwaartekracht variabele.

    Voeg ook een blok verander zwaartekracht met toe. Geef deze de waarde -1. De waarde is negatief; de vogel zal omlaag vallen.

Start het spel om te kijken wat er gebeurt. Stop het spel voordat je verder gaat (met de rode stopknop naast het vlaggetje).

De vogel laten vliegen

Nu gaan we de vogel laten vliegen! We zitten nog steeds in het tabblad code van de sprite vogel. Als de spatiebalk ingedrukt wordt, stellen we de zwaartekracht in op 6. De y-positie (verticaal) wordt hierdoor voor korte tijd hoger.

Stap 3

  1. Voeg een nieuw wanneer ⚑ wordt aangeklikt blok toe.

    Voeg een herhaal blok toe met daarbinnen wacht tot toets spatiebalk ingedrukt.

    Voeg een maak zwaartekracht blok toe en stel die in op 6.

We voegen ook nog wat geluid en beweging toe.

Stap 4

  1. Voeg een start geluid blok toe en stel die in op flap.

    Voeg een volgend uiterlijk blok toe.

Start het spel en druk op de spatiebalk om te kijken wat er gebeurt. Schiet Flappy Bird kort omhoog? En zie je de vleugels bewegen en hoor je het geluid alsof de vogel echt vliegt? Stop het spel voordat je verder gaat.

Buizen toevoegen

Klik rechtsonder in het scherm op het plaatje van de buizen om die sprite te selecteren. Klik links op het tabblad code. Het blok Wanneer ⚑ wordt aangeklikt staat er al.

We gaan bij deze sprite eerst programmeren wat er moet gebeuren als het programma start. Elke 2 seconden moet een nieuwe buis verschijnen. Dat doen we door elke 2 seconden een kloon te maken.

Stap 5

  1. Voeg een ga naar x 220 en y 0 toe. Hierdoor begint de buis rechts buiten het scherm.

    Voeg een verdwijn blok toe om de buis direct onzichtbaar te maken.

    Voeg een herhaal blok toe.

    Zet in het herhaalblok Maak een kloon van mezelf en een blok wacht 2 sec.

Nu gaan we er voor zorgen dat elke 2 seconden een nieuwe buis in beeld komt waarbij het iedere keer een verrassing is welk uiterlijk verschijnt.

Start 6

  1. Kies een Wanneer ik als kloon start blok.

    Voeg een blok verander uiterlijk naar willekeurig getal tussen 1 en 3 toe. Hiermee krijgt de buis één van de drie uiterlijken.

    Laat de buis verschijnen met het blok verschijn.

Tot slot voegen we beweging toe. We laten de buizen van rechts naar links bewegen. Hierdoor lijkt het net of flappy bird door het landschap vliegt! Een buis moet verdwijnen wanneer hij de rand van het scherm raakt.

Start 7

  1. Voeg een herhaal blok toe.

    Zet hierbinnen een blok verander x met -4.

    Voeg een als raak ik rand dan blok toe.

    Daarbinnen het blok verwijder deze kloon.

Start het spel om te kijken wat er gebeurt. Zie je de buizen in beeld komen en weer verdwijnen? Stop het spel voordat je verder gaat.

De vogel tegen de buizen laten botsen

Flappy Bird vliegt nu nog dwars door de buizen. Dat is niet de bedoeling. Hij moet precies door het gat tussen de buizen vliegen. Als flappy bird tegen een buis botst dan eindigt het spel.

Maak linksonder in het scherm de vogel sprite actief en ga naar het tabblad code.

Stap 8

  1. Voeg een nieuw wanneer ⚑ wordt aangeklikt blok toe.

    Voeg een blok wacht tot raak ik buizen toe.

    Voeg Start geluid hit en wacht toe om een geluid af te spelen als de vogel een buis raakt.

    Als flappy bird één van de buizen raakt dan is hij af en moet het spel stoppen. Voeg daarom onderaan je code een blok Stop alle toe.

Gefeliciteerd! Je basisspel is helemaal af. Hoe lang lukt het jou om flappy bird tussen de buizen door te laten vliegen?

Is het niet helemaal gelukt en wil je even spieken. Hier vind je het eindresultaat.

Verander het spel nu zelf verder…

…dat je een punt krijgt wanneer er een nieuwe buis verschijnt (hint: maak een variabele met de naam punten),

…of dat de tijd wordt bijgehouden totdat je “af” bent,

…of geef flappy bird een ander uiterlijk,

…of maak je spel zo dat de vogel de bovenkant en onderkant van het scherm niet mag raken,

…of zorg er voor dat de buizen steeds sneller gaan bewegen (of langzamer als je het te moeilijk vindt!),

…of kies een andere achtergrond

…of een nieuwe/extra achtergrond met “game over” dat tevoorschijn komt als het spel afgelopen is,

…of wat je zelf nog voor leuke dingen kunt bedenken!