Flappy Bird in Scratch
- Inleiding
- De basis
- De vogel laten vallen
- De vogel laten vliegen
- Buizen toevoegen
- De vogel tegen de buizen laten botsen
- Verander het spel nu zelf verder…
- 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 (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.
-
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.
-
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 dezwaartekracht
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.
-
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 op6
.
We voegen ook nog wat geluid en beweging toe.
-
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.
-
Voeg een ga naar x
220
en y0
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 wacht2
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.
-
Kies een Wanneer ik als kloon start blok.
Voeg een blok verander uiterlijk naar
willekeurig getal tussen
1
en3
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.
-
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.
-
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!