Een game bouwen met Scratch Principes van programmeren

Een game bouwen met Scratch Principes van programmeren Joek van Montfort - roc2013@scratchweb.nl 23 mei 2013

Inhoudsopgave 1 Inleiding 3 1.1 Praktische zaken........................... 3 1.2 Opzet cursus............................. 3 2 Scratch 4 2.1 De Scratch community........................ 4 2.2 Scratch interface........................... 5 3 Programmeren 7 3.1 Afbakening.............................. 7 3.2 Test en debug............................. 7 3.3 Stijl.................................. 7 4 Een eerste game: Pong 9 5 Variabelen en lijsten 12 5.1 Variabele............................... 12 5.2 Lijsten................................. 13 6 Een lijst bijwerken 14 6.1 Vraag en antwoord.......................... 14 6.2 Tekst samenvoegen.......................... 14 6.3 Highscores op volgorde........................ 15 6.4 Een top-5............................... 16 2

No plan survives first contact with the enemy. (Helmuth von Moltke) 1 Inleiding Deze syllabus wordt geschreven bij een vijfweekse cursus voor studenten netwerkbeheer en applicatieontwikkeling van het ROC Amsterdam. Tijdens deze cursus gaan we games bouwen. Omdat dat leuk is, omdat je daarmee enorm veel over programmeren leert, omdat het geploeter is dat dubbel beloond wordt. Ten eerste heb je een eigen game gebouwd en ten tweede heb je door zelf heel veel te proberen belangrijke technieken echt eigen gemaakt. 1.1 Praktische zaken We zijn met een grote groep.veel van het lestijd zullen jullie zelf aan het programmeren zijn. Docenten kunnen maar op een plaats tegelijk zijn. Als je een vraag hebt, steek je hand op, en wacht tot een docent naar je toekomt. Veel vragen zou je onderling moeten kunnen oplossen,we werken regelmatig in tweetallen. Net als bij een race rally is er naast de chauffeur (die de toetsen bedient) een navigator, die de grote lijn in de gaten houdt. Grote bedrijven als Google hebben veel succes met dit idee van pair programming. Een van de features van Scratch is dat je makkelijk met geluid kunt werken. Als dat storend is in de les maken we er geen gebruik van. Naast de colleges is er ook huiswerk, meestal het bouwen van iets in Scratch. Dergelijke projecten moeten online ingediend worden via de Scratch website. Zorg ervoor dat je bij dat indienen in de projectomschrijving duidelijk aangeeft wie het werk hebben gemaakt en voor welke opgave het bedoeld is. Als het een keer niet lukt: geen probleem. Lukt het twee of meer keer niet dan heeft dat gevolgen voor de beoordeling. 1.2 Opzet cursus De eerste twee lessen staan in het teken van vaardig worden met Scratch. Het principe zal na een paar minuten duidelijk zijn, maar de kleine details vergen wat extra oefening. De twee daarop volgende lessen zal steeds een programmeer concept behandeld worden, waarna je dat gaat uitwerken in een of meerdere Scratch projecten. De laatste les werk je aan je eigen game. 1. Scratch, programmeren en Pong 2. Besturingsblokken, jij bent de baas 3. Gebeurtenissen, interactie en signalen 4. Variabelen en lijsten 5. Een eigen game 3

The best way to predict the future is to invent it. (Alan Kay) 2 Scratch Scratch is een grafische programmeeromgeving. Het is ontwikkeld door medewerkers van MIT Media Lab, een van de meest vooraanstaande universiteiten als het over informatica en techniek gaat. De programmeeromgeving laat je programma s bouwen, maar dat is niet het hoofddoel van Scratch. Het is de ontwikkelaars vooral te doen om de mogelijkheid creatief te zijn, makkelijk je werk met andere te kunnen delen en daardoor door remixen samen verder te komen. Je bouwt programma s door met blokjes te slepen, maakt daardoor in ieder geval weinig typefouten. Bovendien zijn er flink wat blokjes die je gemakkelijk maken met geluid en beeld te werken. 2.1 De Scratch community Voor deze cursus is het noodzakelijk lid te worden van de Scratch community. Dat is gratis en gebeurt met het aanmaken van een account op de website scratch.mit.edu Als je eenmaal een account hebt kun je vanuit Scratch makkelijk je werk online zetten. Figuur 1: Website van de internationale Scratch community: scratch.mit.edu Opdracht 2.1. Google Scratch, bezoek de eerste link http://scratch.mit.edu en maak een account aan op deze site. 4

Scratch zelf is een programma en als dat nog niet op je computer staat moet je het installeren. Dat kan gratis via scratch.mit.edu/download Opdracht 2.2. Download Scratch en installeer het op je computer. 2.2 Scratch interface De interface van Scratch, datgene wat je als gebruiker ziet en kunt beïnvloeden ziet er als volgt uit. In grote lijnen is het scherm verdeeld in vier grotere vlakken. Figuur 2: Het uiterlijk van het Scratch programma Rechtsboven is het podium (stage), hier gaat het gebeuren. In het begin is het podium wit en is er in het midden een kat te zien. Onder het podium vind je een vlak met de acteurs (sprites), in het begin alleen een kat. Die acteurs gaan leven in de brouwerij brengen, tenminste als dat in het script staat. In het midden is een leeg grijs werkvlak. Hier ga je straks de scripts in elkaar zetten en het uiterlijk van je acteurs aanpassen. De scripts schrijf je door blokken uit de blokkendozen, helemaal links, naar het werkvlak te slepen. Er zijn acht blokkendozen met kleurcodes. Standaard begin je met de blauwe blokjes die over beweging gaan. 5

Figuur 3: Knoppen voor sprites Opdracht 2.3. Tussen het podium en het gebied met de acteurs, backstage, vind je drie knoppen om nieuwe sprites toe te voegen. Probeer ze alledrie. Maak voor de zelfgetekende sprite een smiley. Opdracht 2.4. Boven het podium vind je vier knopjes: een stempel, een schaar, pijlen naar buiten en pijlen naar binnen. Als je op een van die knoppen klikt verandert je cursor. Probeer dat uit op de sprites die je in de vorige opdracht hebt gemaakt. 6

Computers are good at following instructions, but not at reading your mind. (Donald Knuth) 3 Programmeren Programmeren, een programma schrijven voor verwerking door een computer, komt eigenlijk altijd neer op het oplossen van een probleem binnen vooraf gegeven randvoorwaarden. Voor je begint is het altijd goed om over die twee zaken goed na te denken. Wat moet er gebeuren? en Wat zijn de beperkingen waarmee ik rekening moet houden? 3.1 Afbakening Ook voor een project in Scratch is het nuttig vooraf wat te schetsen rondom de gegeven opdracht. Hoeveel sprites heb je nodig? Zijn er eisen aan de achtergrond, moet er bijvoorbeeld een speciale achtergrond komen voor Game over. Moet er een helppagina zijn met uitleg over hoe het spel werkt? Antwoorden op dit soort vragen helpen je bij het duidelijk krijgen van wat je moet maken. Naast schetsen is het ook vaak verhelderend om je plan aan een ander uit te leggen. Het dwingt je om het onder woorden te brengen, en de vragen van de ander laten zien waar je omschrijving nog aan duidelijkheid mist. 3.2 Test en debug Een skateboarder kan een heel helder idee hebben over de truc die hij wil uitvoeren, maar pas op het moment dat hij het probeert ziet hij of hij het onder de knie heeft. Programmeurs hebben het iets makkelijker, ze kunnen de truc in twee stukken verdelen of de truc in slow motion nalopen, maar in de praktijk is het vaak hetzelfde geploeter. Proberen, zien dat het nog niet helemaal klopt en verbeteren. en dat dan heel vaak. Zelfs als het werkt moet er nog getest worden voor onverwachte situaties. 3.3 Stijl Gebruik namen die je helpen. Als in jouw game een kat achter een muis aanzit, noem ze dan ook kat en muis, en niet sprite1 en sprite2. De volgende stukjes code doen precies hetzelfde, maar bij eentje heb je meteen door waar het over gaat. 7

Voeg commentaar toe om de code begrijpelijk te houden. Dat is vooral belangrijk als het programma later nog eens bijgewerkt moet worden. Meestal ben je zelf de persoon die dat moet doen, dus je doet er waarschijnlijk jezelf een plezier mee als bij de code toelichting schrijft. In Scratch kun je commentaar toevoegen door rechts te klikken op het werkvlak waar je de scripts bouwt en dan te kiezen voor voeg commentaar toe. Ruim af en toe op. Soms heb je onderweg naar het eindresultaat wat dingen geprobeerd die uiteindelijk niet nodig zijn voor je programma. Haal ze weg op het moment dat je nog scherp hebt dat ze er alleen maar nodig waren in een eerdere versie. Doe je dat niet, dan heb je kans dat je bouwwerk zo onoverzichtelijk wordt dat je niet meer weet of iets nog belangrijk was of niet. Opruimen betekent ook dat je stukjes script die bij elkaar horen ook bij elkaar bewaart. Als je bijvoorbeeld PacMan met pijltjestoesen bestuurt, zet dan de vier scripts voor de vier richtingen bij elkaar. 8

4 Een eerste game: Pong Pong is door Atari in 1972 uitgebracht. Het was een heel eenvoudig spel. Dat nam niet weg dat er heel wat geld is verdiend met computers die niet meer konden dan geld vragen voor een spellletje Pong. Bij Pong begint een bal in een willekeurige richting in rechte lijn te bewegen. Er zijn drie situaties die de bal kan tegenkomen: 1. De bal raakt de rand (keer om als een biljartbal) 2. De bal raakt het racket (verander de richting zoals een tennisbal) 3. De bal raakt de grond (game over) Het racket staat natuurlijk niet stil, die volgt de invoer van de speler... Opdracht 4.1. Teken in Scratch een bal en geef de bal een script zodat 1. De bal in willekeurige richting vertrekt (de richting is een getal tussen 1 en 360 graden) 2. De bal blijft bewegen 3. De bal omkeert aan de rand Gebruik de volgende blokken. 9

Opdracht 4.2. Het racket is ook een sprite die je zelf moet tekenen. Het script ervan moet zorgen dat vanaf de start het racket door de speler bestuurd wordt. Een manier is om het bat constant te laten luisteren naar de x positie van de muis. De punten op het scherm zijn op te vatten als een paar (x, y) met x tussen 240 en 240 voor de horizontale positie en y tussen 180 en 180 voor de vertikale positie. Een andere manier is om de pijltjestoetsen te gebruiken. Maak deze sprite en kies een van de technieken om het te besturen. Opdracht 4.3. Niet alleen de sprites zijn programmeerbaar en van uiterlijk te veranderen, het scherm is dat ook. Klik op het icoon van het scherm, kies in het werkvlak bij het tabje achtergrond voor bewerken en zorg dat de onderkant van het scherm een opvallende kleur krijgt. Opdracht 4.4. Als het goed is heb je nu een spel waarbij de bal eindeloos over het beeld stuitert zonder dat er iets gebeurt bij botsingen met de grond of het racket. We gaan dat veranderen door iedere keer dat de bal beweegt te controleren of er een bepaalde kleur geraakt wordt. 10

Opdracht 4.5. Maak de game af door er iets persoonlijke aan toe te voegen, een ander uiterlijk van de bal of het racket of een achtergrond, of een variant op het script. Opdracht 4.6. Huiswerk Als je game af is, upload hem naar de website van Scratch. Opdracht 4.7. Huiswerk Stuur uiterlijk 24 uur voor de volgende les een email naar de docent met daarin je naam je studentnummer je username bij scratch.mit.edu 11

5 Variabelen en lijsten We gaan de Pong game spannender maken door de bal steeds sneller te laten bewegen. En omdat we graag willen bijhouden hoe goed we het doen gaan we een scorelijst bijhouden. 5.1 Variabele Een variabele is een plek om iets bij te houden dat van waarde verandert. Bij wiskunde heten ze vaak x of α, bij programmeren mogen we zelf de namen bepalen en voor ons gemak doen we dat niet al te zuinig. Als we willen bijhouden hoe snel de bal gaat dan noemen we de variabele snelheid of speed. Zijn er meer ballen in het spel dan kan bijvoorbeeld snelheid rode bal. In de game Pong zoals we die in het vorige hoofdstuk hebben gemaakt gaat de bal steeds met dezelfde snelheid over het scherm. We gaan nu de game aanpassen zodat de bal steeds sneller gaat. De snelheid van de bal gaan we bijhouden in een variabele snelheid. Opdracht 5.1. In de rubriek Variabelen kun je variabelen en lijsten aanmaken. Maak een variabele aan en noem deze speed. Zodra je een variabele hebt aangemaakt verschijnt er een extra knop Een variabele verwijderen en vijf nieuwe blokjes. Het eerste blokje met alleen de naam van de variabele heeft een aanvinkvakje. Daarmee geef je aan of de variabele zichtbaar moet zijn op het scherm. Opdracht 5.2. Pas het script aan zodat de snelheid van de bal niet meer vast is maar kan veranderen gedurende het spel. Het plaatje laat een stuk van het oude script zien met de benodigde aanpassingen. 12

Wat gebeurt als je het blokje maak speed 10 weglaat. Wat is de waarde van variabele als je niets opgeeft? Opdracht 5.3. Speel het spel. Hoever kom je? Als de snelheid erg hoog wordt kan het zijn dat de bal door de paddle heen gaat. Heb je een idee waardoor dat komt? Heb je een idee om dat probleem op te lossen? 5.2 Lijsten De waarde van de variabele speed op het moment dat de bal de grond raakt (game over) is een score die je bij kunt houden. Meerdere scores komen op een lijst: de Highscorelist. Opdracht 5.4. Maak een lijst Highscorelist aan. Bekijk de extra blokjes die dat oplevert. Welk blokje denk je nodig te hebben om een score toe voegen aan de lijst? Een manier om je score op de lijst te krijgen gaat met twee blokjes. Opdracht 5.5. Speel het spel een paar keer zodat de er scores op de Highscore List komen. Geef tenminste drie redenen aan waarom de lijst nog geen goede Highscore List is. 13

6 Een lijst bijwerken Onze Highscore List is op dit moment nog niet meer dan een briefje waarop we alle scores opschrijven. Een betere highscore list vertelt bij de score wie de score heeft behaald zet de scores in volgorde van goed naar slecht beperkt zich tot de goede scores, bijvoorbeeld de top-3 6.1 Vraag en antwoord De lichtblauwe doos met Waarnemen-blokken heeft zeer uiteenlopende blokken waarmee de computer iets kan zien. Wij gebruiken het blokje Vraag Wat is je naam? en wacht om de naam van de speler op te vragen. Het antwoord dat dan ingetypt wordt wordt onthouden in de variabele antwoord. Om het onszelf, later makkelijker te maken gaan we het antwoord kopiëren naar een nieuw aangemaakte variabele spelersnaam. Opdracht 6.1. Maak de variabele spelersnaam aan en vul die met het antwoord dat terugkomt op de vraag Wat is je naam?. Gebruik de volgende blokjes: Zorg ervoor dat aan het begin van ieder spel de spelersnaam wordt opgevraagd. 6.2 Tekst samenvoegen Als het spel is afgelopen is de waarde van variabele speed de score en de waarde van variabele spelersnaam de speler. De groene doos met Functies-blokken heeft ook een functie waarmee teksten aan elkaar geplakt kunnen worden. Opdracht 6.2. Gebruik het blokje om tekst samen te voegen om het score uit te breiden met het antwoord. Werk het blokje bij waarin je de score op de Highscore list zet. Opdracht 6.3. Wanneer je het spel nu speelt komt bij de score een naam te staan, maar een beetje onhandig: direct tegen de score aan zoals bijvoorbeeld 17Alberto. Maak de lijst leesbaarbaarder door niet alleen speed en spelersnaamte gebruiken, maar er ook een spatie tussen te voegen. Het samenvoegblokje is twee keer nodig. Voor Codeblokjes als uit de vorige opdracht kunnen een stuk ingewikkeldere worden en als je ze niet zelf gemaakt hebt even een puzzel zijn om te ontcijferen. Dat is 14

een goede reden om commentaar toe te voegen, zodat je later sneller snapt wat hier ook alweer gebeurde. In gewone programmeertalen maak je commentaar door tekst tussen bepaalde bijzondere tekens te zetten, in HTML bijvoorbeeld <!... >. In Scratch voeg je commentaar toe door rechts te klikken in het werkvalk van de scripts en te kiezen voor commentaar toevoegen. Dat commentaar kun je dan naar het blokje slepen waar het betrekking op heeft. Opdracht 6.4. Voeg commentaar toe om de programmablokjes die je in de vorige opdracht hebt gebruikt begrijpelijk te maken voor een ander (of voor jezelf als je er na een tijdje weer eens naar kijkt). Als voorbeeld: Tip: als je veel commentaar schrijft kun je met het zwarte driehoekje het commentaar inklappen. Voor als je lijst wat onoverzichtelijk is geworden, en als voorbereiding op ce gesorteerde lijst kun je de lijst wissen met het verwijder item... van... -blokje. 6.3 Highscores op volgorde Het sorteren van een lijst kan op verschillende manieren. Hier behandelen we een manier waarbij we een nieuw score toevoegen aan een lijst die al op volgorde staat. Bij zo n lijst kunnen we de nieuwe waarde onderaan toevoegen en de waarde dan zo nodig naar boven laten schuiven. Dat schuiven gaat in kleine stapjes, steeds kijk je of de waarde vlak boven de nieuwe score slechter is dan de score die je aan het invoegen bent. Zo ja, dan wisselen we de twee waarden om. Zo nee, dan staat de nieuwe waarde op de goede plaats en is de lijst weer gesorteerd. Als de nieuwe score de beste tot nog toe is, een echte highscore dus, komt de score bovenin de lijst terecht waarna het niet meer mogelijk is om met de waarde boven te vergelijken. In zo n geval moet we het programma ook laten stoppen. Opdracht 6.5. Schrijf de getallen 1, 2, 3, 4, 5 op een stukje papier, vouw de papiertjes, schud en neem een willekeurig papiertje. Leg dit voor je op tafel, dit is een lijst met maar een item en die staat vanzelf op volgorde. Neem nu een tweede papiertje en leg dit rechts van het eerste papiertje. Als het tweede getal kleiner is dan het eerste getal ligt de lijst niet op volgorde van klein naar groot: wissel de twee papiertjes om. Herhaal dit met de overige drie papiertjes: rechts aanschuiven en door eventueel herhaald wisselen met de linker buur de volgorde goed maken. Probeer goed te breipen wat je doet, en wanneer je stopt. De vorige opdracht bevat een belangrijk principe van programmeren: voor je in de weer gaat met de code zelf maak je eerst een klein voorbeeldje om te begrijpen wat je precies wilt bereiken. Als je in een lijst de waarden van twee regels wilt wisselen is dat net wat ingewikkelder dan het omwisselen van de papiertjes zoals boven beschreven. Je 15

kunt het vergelijken dat twee mensen iets zwaars tillen dat niet de grond mag raken en even moeten wisselen. De truc is dan om een derde persoon te vragen een van de objecten even vast te houden. Dat is dus een soort aflegplek. Opdracht 6.6. Bestudeer de stukjes code en de hiervoor genoemde voorbeelden en breidt je project zo uit dat nieuwe scores goed worden ingevoegd. 6.4 Een top-5 Na een tijdje wordt de lijst wel heel erg lang, meestal vinden we het genoeg om de beste vijf scores in beeld te brengen. Dat betekent dat we nieuwe scores alleen gaan toevoegen als ze beter zijn dan de nummer vijf van dit moment. Als dat zo is, kunnen we nummer vijf weggooien en daarna de nieuwe score toevoegen zoals boven. Opdracht 6.7. Pas nogmaals de code aan. Beperl de High score list tot een Top-5. 16