Flappy Bat. Om te beginnen ga je naar en remix je het spel.

Transcriptie

1 Flappy Bat Een spelletje in Scratch maken is toch wel het leukst en daarom gaan we aan de hand van deze handleiding een soort Flappy Bird maken. We gebruiken als hoofdpersoon echter geen vogel maar een vleermuis en daarom noemen we het spel maar Flappy Bat (dat is het Engelse woord voor vleermuis). Het wordt trouwens een hele speciale Flappy Bat, want als je een webcam hebt, gaan we het zo programmeren dat je de Flappy Bird met je hand omhoog kan laten gaan. Nou, dat belooft wat. Om te beginnen ga je naar en remix je het spel.

2 Heb je m geremixed, dan kunnen we beginnen. In een Flappy spel lijkt het alsof de vleermuis vooruit gaat, maar eigenlijk blijft de vleermuis op zijn plaats en schuift de muur naar hem toe. Laten we beginnen met de code voor de muur. We willen dat de muur helemaal aan de rechterkant begint en dan langzaam in de richting van de vleermuis schuift. Selecteer de muur en plak daar deze code aan: Als volleerd Scratch programmeur weet je vast nog wel dat de rechterkant een x-positie heeft van 240 en de linkerkant die van We laten door deze code de muur dus helemaal van rechts naar links schuiven. Dit werkt prima, alleen schuift de muur iedere keer op dezelfde hoogte en dan wordt het wel een heel simpel spel. Net als bij de echte Flappy Bird willen we dat de muur op verschillende hoogte gaat schuiven. In plaats van dat de y, de hoogte, iedere keer op nul staat, willen we die een beetje laten variëren. Daar kunnen we dan de functie voor kunnen gebruiken. Als we de hoogte laten variëren tussen 0 en 10 gebeurt er niet zoveel, maar als we het met -100 en 100 proberen, dan ziet het er best wel goed uit. Probeer het maar.

3 Als we dit een paar keer uitproberen zien we dat de muur steeds op een andere hoogte begint maar daarna toch weer naar de midden schuift. In plaats van dat hij recht gaat, gaat hij een beetje terug naar het midden. Weet jij hoe dat komt? Als je naar de code kijkt zie je dat de muur in 4 seconden verschuift van zijn beginpositie naar het punt (-240,0) en dat is precies in het midden van de linker kant. Dat is niet goed, we willen dat de muur op dezelfde hoogte eindigt als waarop hij begint. Die beginhoogte moeten we dan wel tijdelijk bewaren omdat we m later weer nodig hebben. Om de hoogte te bewaren hebben we natuurlijk een variabele nodig. Maak een nieuwe variabele en noem die 'hoogte van de muur'. Voordat we de muur laten schuiven bepalen we nu eerst de hoogte van de muur en daarna kunnen we die waarde gebruiken in de volgende blokken. Zo, nu schuift de muur helemaal recht en iedere keer op een andere hoogte.

4 Als de muur maar een keer verschuift is het spel wel erg snel afgelopen. We kunnen de muur dus beter meerder keren van links naar rechts laten schuiven. Die code is voor ons een makkie, gewoon een herhaal-blok er om zetten. Mooi, de muur is klaar. Op naar de vleermuis, laten we die eens laten bewegen. In het spel moet de vleermuis steeds naar beneden zakken tot er op de spatiebalk wordt geduwd, dan floept hij omhoog! Selecteer de vleermuis en voeg onderstaande code toe. We plaatsen de vleermuis links van het midden op het speelveld en laten hem in een herhaal-blok steeds een beetje zakken. Omdat alleen de hoogte van de vleermuis verandert hoeven we alleen de y maar aan te passen. En omdat de vleermuis naar beneden gaat moet de y een negatieve waarde krijgen, bijvoorbeeld -2. Nu moeten we er nog voor zorgen dat de vleermuis af en toe en zwieper omhoog krijgt. We gaan daar de spatiebalk voor gebruiken, iedere keer dat er op de spatiebalk gedrukt wordt moet de vleermuis 25 pixels omhoog springen. Voeg de volgende code maar toe.

5 Als je het spel nu speelt werkt het wel, maar nog niet zo als in de echt Flappy Bird. Dat komt omdat onze vleermuis steeds met dezelfde snelheid naar beneden valt terwijl in het echt de snelheid steeds toeneemt Om dat te kunnen programmeren hebben we een nieuwe variabele nodig. Maak een nieuwe variabele en noem die stap. In de code gaan we de y niet meer met -2 gaan veranderen, maar met de variabele 'stap'. Je krijgt dan deze code We veranderen de y nu met stap maar omdat we eerder de stap op -2 gezet hebben is er eigenlijk nog niets veranderd. Probeer het maar uit, het programma werkt nog precies hetzelfde. Om de vleermuis steeds iets sneller te laten vallen moet de variabele stap steeds een beetje groter worden. De eerste keer dat de code wordt uitgevoerd zakt de vleermuis 2 pixels naar beneden, de twee keer 2,25, de derde keer 2,50, etc. Zoals je ziet worden de stapjes steeds iets groter en zakt de vleermuis dus steeds iets meer.

6 Eigenlijk moeten we de code voor het drukken op de spatiebalk ook nog even aanpassen, de variabele stap kunnen we ook daar gebruiken. Pas de code even aan. Om er echt een leuk spel van te maken kun je een beetje stoeien met de waarden van stap. Je kunt het net zo langzaam of net zo snel maken als je zelf wilt! Het spel wordt een stuk mooier als we de vleermuis echt laten flapperen met zijn vleugels. De vleermuis heeft twee uiterlijks en die moeten we dan om de beurt laten zien. Dat kun je vast wel programmeren. Cool! Het ziet er al super uit. Er is echter nog wel een supergroot probleem, de vleermuis vliegt gewoon dwars door de muur. Dat is natuurlijk niet de bedoeling. We willen dat als de vleermuis een muur aanraakt, dat hij dan 'oeps' zegt.

7 Het spel wordt nog beter als we er punten mee kunnen verdienen. Iedere keer als de vleermuis veilig de muur passeert zou je een punt moeten verdienen. Raakt de vleermuis de muur dan zou het aantal punten weer op nul gezet moeten worden. Begin met het maken van een variabele 'punten'. Zet de variabele punten op 0 als het spel start en als de vleermuis de muur raakt. Een volgende stap is ervoor te zorgen dat de vleermuis een punt verdient als hij goed door een muur is gevlogen. Hoe kunnen we dit oplossen? We weten dat de vleermuis de muur veilig is gepasseerd als de muur links van de vleermuis gekomen is. In dat geval zou het aantal punten dus met 1 moeten worden opgehoogd. Aan het begin staat de muur rechts van de vleermuis en we moeten dan wachten totdat de muur links van de vleermuis komt voordat we de punten kunnen ophogen. Om te controleren of de muur links van de vleermuis is gekomen moeten we kijken naar de x-posities van de sprites. Is de x-positie van de muur kleiner dan die van de vleermuis, dan staat de muur links van de vleermuis. Uiteindelijk komen we tot deze code

8 Als je dit probeert zie je dat het werkt, maar jammer genoeg maar één keer. Eén punt is mooi, maar we willen natuurlijk meer punten verdienen. Iedere keer dat de vleermuis door de muur vliegen willen we er een punt bij hebben. Dan denk jij natuurlijk: 'ja als ik iets meerdere keren wil doen, en niet maar één keer', dan pak ik een herhaal blok!' Probeer het uit maar je zal zien dat het niet de goede oplossing is. Wat nou, de punten schieten omhoog, het loopt zo op naar de 30. Dat is gemakkelijk verdient maar natuurlijk niet de bedoeling. Wat is hier aan de hand? Weet jij het? Zolang de muur zich links van de vleermuis bevindt worden de punten met één opgehoogd. In het herhaal-blok wordt steeds gevraagd te wachten tot de x- positie van de muur kleiner is dan de x-positie van de vleermuis, maar als de muur links van de vleermuis is, dan is dat al zo. Er hoeft dan helemaal niet meer gewacht te worden en worden dus gelijk de punten opgehoogd. Pas als de muur weer rechts van de vleermuis staat wordt er weer gewacht. Nadat we een punt gegeven hebben moeten we dus wachten tot de muur weer rechts van de vleermuis staat, pas dan kan er weer een punt verdiend worden. Probeer het maar.

9 Het is niet zo vreemd als je dit niet zo goed begrijpt hoor, dit is best wel moeilijk. Ja, programmeren kan soms het best lastig zijn. Maar nu de uitsmijter. We gaan de webcam gebruiken om de vleermuis te bewegen! Je denkt vast dat dat heel moeilijk te programmeren is maar eigenlijk is het heel simpel, we hebben er maar één blokje voor nodig. Om de webcam te kunnen gebruiken moeten we eerst de video-code activeren. Druk linksonder op de blauwe knop en kies daarna voor video. Als het goed gaat zie je nu jezelf op het speelveld van Scratch.

10 Nou dat is al heel gaaf, maar we gaan het nog wat leuker maken. Eerst moeten we er voor zorgen dat de webcam aan gaat als het spel wordt gestart. Pas de opstart code dan ook als volgt aan. Pak daarna het blok 'wanneer videobeweging groter is dan 10'. Kopieer de blokjes onder wanneer spatiebalk wordt ingedrukt en plak ze onder de wanneer videobeweging groter is dan 10. Wow, wat gaaf, je kunt de vleermuis aansturen met je handen. Dit materiaal is gemaakt door Felienne. Het is Creative Commons by-nc-sa-4.0