Les 5

• Informatica
• Middelbare school
• havo, vwo
• Leerjaar 4

Games maken en ervaren

Deze les

• obfuscator
• zelf functies maken
• vallende ster
• lijnenspel
• JOS laten groeien

obfuscator: schuivende bollen

Een obfuscator is een programma dat code zo verandert dat het moeilijk te lezen of te begrijpen is, terwijl het nog steeds werkt zoals het bedoeld is. Dit wordt gedaan om de code te beschermen tegen diefstal of om te voorkomen dat anderen de code makkelijk kunnen kopiëren of begrijpen.

Bekijk OBF01. De bijbehorende code is onleesbaar gemaakt m.b.v. https://obfuscator.io

Open H1O16.js in jouw editor. Breid deze code uit zodat je hetzelfde resultaat bereikt als in OBF01.

pas je bekijkJS.html aan in lijn 12:

<script src='JS/HOBF/HOBFO01.js'></script>

zorg dat H1O16.js hetzelfde resultaat toont als HOBFO01.js

In les 4 heb je voor het eerst kunnen zien dat je zelf functies kunt maken; in dit geval: 

function tekenJos(x,y).

Hier zie je een functie die een huis tekent. Als je zelf een functie maakt, begin je met function gevolgd door de (door jou bedachte) naam van de functie. Achter die naam moet je altijd haakjes () zetten, dus ook als de functie geen parameters heeft. Tussen de accolades {} zet je vervolgens alle regels code die moeten worden uitgevoerd als de functie wordt aangeroepen. Dit noemen we een functiedefinitie.

LET OP

de functie maak je buiten de draw. Het aanroepen van de functie doen we (nu) wel in de draw met (alleen) tekenHuis();. Alleen als je de functie aanroept, wordt het huis ook echt getekend!

Dit toont een functie met een parameter: tekenBoom(x);. Dit betekent dat je een argument aan de functie meegeeft, waarmee de functie aan de slag kan. Deze waarde wordt bijvoorbeeld gebruikt voor de rechthoekige stam van de boom: rect(x,130,40,130);.

Het gebruik van parameters heeft enorme voordelen. Het huis wordt altijd op dezelfde plek getekend, maar de plek waar de boom getekend wordt kun je nu zelf sturen door bij het aanroepen een argument mee te geven: tekenBoom(700);.
Als je één keer een functie hebt gemaakt, kun je hem zo vaak aanroepen als je wilt. Twee of drie bomen tekenen is nu een fluitje van een cent.
Merk op dat we binnen de functies steeds push(); en pop(); hebben gebruikt. Dit voorkomt dat je per ongeluk tekeninstellingen (zoals de vulkleur) ‘aan laat staan’ als je de functie hebt gebruikt.

Open H1O17.js 

(denk aan je bekijkJS.html)

• Voeg drie bomen toe aan de tekening.
• Vul voor de horizontale positie de argumenten 50,150 en 250 in. Zorg dat de bomen achter het huis staan.
• Maak een nieuwe functie (buiten de draw!) door de code hiernaast over te schrijven.
• Voeg de regel tekenZon(500,1); toe na regel 11.
• Pas de regel aan naar: tekenZon(mouseX,schaal);.

Open H1O18.js 

(denk aan je bekijkJS.html)

In de theorie hebben we functies met nul en één parameter gezien, maar je kunt zoveel parameters toevoegen aan een functie als je zelf wilt. We kijken naar een functie met drie parameters.

• In de loopfunctie draw staan maar twee regels. Die roepen de twee functies background en tekenSter aan. Voeg twee regels toe, zodat bij elke loop de variabele yPositie met 1 wordt verhoogd en de variabele xPositie met 5 wordt verhoogd.
• Voorspel wat je gaat zien als je // voor background zet. Controleer je voorspelling.
• Misschien herinner je jezelf nog dat de vierde parameter van background de mate van doorzichtigheid aangeeft. Haal de // voor background weer weg en geef de laatste parameter het attribuut 0.1 mee.

De functie tekenSter heeft op dit moment twee parameters. 

In regel 3 is een variabele schaal gedeclareerd, waarmee we zelf willen regelen met welke grootte de ster wordt getekend. Daarvoor is binnen tekenSter al de regel scale(1); toegevoegd.

Voer de volgende opdrachten uit:

• Pas de functie tekenSter aan zodat een derde parameter s wordt gebruikt voor het tekenen van de ster op een bepaalde schaal 
• Zorg dat er bij de aanroep van de functie tekenSter (in de draw) gebruik gemaakt wordt van de variabele schaal.
• Zorg dat de variabele schaal bij elke loop met 0,05 wordt verhoogd.
  

obfuscator II: lijnenspel

• Bekijk OBF02. De bijbehorende code is onleesbaar gemaakt m.b.v. https://obfuscator.io
• Open H1O19.js. Je ziet nu alleen twee grijze lijnen.
• De bedoeling is dat je OBF02 probeert na te bouwen. 
• Om je te helpen is function tekenLijnen(p)alvast voor je gemaakt. 
• Hierin zie je voor ons nog onbekende code line(0,p,width,p);. Gebruik eventueel de reference om de precieze werking te achterhalen.
• In de code is al een begin gemaakt met de twee functies tekenRechthoek(p) en tekenVierkant(p).
• Vul beide functies aan zodat het beeld overeenkomst met OBF02.

JOS laten groeien

Tot nu toe heb jij als programmeur beslist hoe de tekeningen eruitzien en hoe vormen bewegen. Het leuke van spelletjes is nu juist dat de speler zelf iets kan veranderen. We gaan nu kijken naar coderegels die daarvoor kunnen zorgen

Open H1O20.js in notepad++
(pas ook je bekijkJS.html aan)

• Bekijk de coderegels. We maken hier opnieuw gebruik van dezelfde functie om JOS te tekenen.
• Sommige programmeerregels lezen als Engelse zinnen. Wat betekent if (keyIsPressed == true) denk je?
• Verander deze regel in if (mouseIsPressed == true). Dus: verander het woord key in mouse.
• Wat gebeurt er als de variabele zoomniveau kleiner dan 0 wordt?

• Voorwaarden: if en else
• afstand bepalen
• raak het andere blokje
• jager en prooi
• obfuscator III: raak het doel
  

Na deze les, 

wil ik...

de uitleg nog 1 keer horen

meer voorbeelden krijgen

meer oefeningen maken

de leerstof thuis nog even bekijken

overgaan naar nieuwe leerstof

nog meer te weten komen over de leerstof

niet meer te weten komen over de leerstof

Hoe vond je 

deze les?

😒🙁😐🙂😃

Volgende les

• obfuscator

• Zelf functies maken
  

• Vallende ster
• Jos