Les 4

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

Games maken en ervaren

Deze les

• Loop
  

• Automatische bewegingen
  
• Jos
  

Alle programma’s en voorbeelden die je tot nu toe hebt gezien hebben een setup met de regel noLoop();. Was het je opgevallen dat deze regel in de laatste twee opdrachten was uitgeschakeld met // (commentaar)? In les 1 is genoemd dat in de setup de begininstellingen van het programma worden beschreven en dat de draw het hoofdprogramma is. 

In P5 is draw wel een bijzonder geval, want de code binnen de draw wordt telkens opnieuw uitgevoerd. Een functie die regels code steeds opnieuw herhaalt noemen we een loopfunctie (loop is Engels voor ‘lus’ of ‘herhalingslus’). In opdracht 9 en 10 hebben we voor het eerst het voordeel van zo’n herhalingslus gezien: omdat de draw steeds opnieuw wordt uitgevoerd, kan worden gevolgd wat de actuele plaats van de muis is. Met die informatie krijgt de canvastekening steeds een update. Hoe vaak gebeurt dat eigenlijk?

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

frameRate(10);
Dit zorgt ervoor dat de animatie met 10 frames (beeldjes) per seconde wordt getekend, ofwel: dat de functie draw 10 keer per seconde wordt uitgevoerd.

Aan het einde van de draw: horizontaal += 2;
Dit zorgt ervoor dat de variabele horizontaal, die bepaalt hoe ver naar rechts de cirkel wordt getekend, elk frame met 2 wordt opgehoogd, zodat de cirkel steeds verder naar rechts wordt getekend.

De regel horizontaal += 2; had ook geschreven kunnen worden als horizontaal = horizontaal+2; Dat is iets langer, maar voor sommige mensen wel duidelijker. Je moet deze regel lezen als: de nieuwe waarde van de variabele ‘horizontaal’ is gelijk aan de oude waarde van de variabele ‘horizontaal’ plus 2.

Javascript heeft handige, korte notaties voor berekeningen. 

• Wil je één optellen of aftrekken van de waarde van een variabele, dan gebruik je horizontaal++; en horizontaal--;. 
• Verdubbelen? Gebruik horizontaal *= 2; 
• Halveren? Gebruik horizontaal /= 2; (of horizontaal *= 0.5;)

Het is niet altijd nodig om de draw -functie eindeloos uit te voeren. Als de code binnen de draw maar één keer moet worden uitgevoerd of als je het herhalen wilt stoppen, dan gebruik je daar de functie noLoop().

Automatische bewegingen

De blauwe cirkel noemen we cirkel A. 

Voor de beginpositie van A gebruiken we de variabele horizontaalA. 

We gaan een tweede cirkel B maken.

• Declareer voor de beginpositie van B een variabele horizontaalB en initialiseer die met de waarde 500.
• Teken cirkel B even groot als A, maar met de kleur darkred. Natuurlijk maak je voor de horizontale positie gebruik van horizontaalB.
• Zorg dat de positie van B elke keer dat de draw wordt uitgevoerd met 1 wordt verhoogd.
• Pas het argument van de functie frameRate aan naar 50. Wat is het resultaat?
• Pas de tekst aan zodat er komt te staan: positie A = 454 positie B = 667 (Dit is maar één voorbeeld: de waarden veranderen steeds.)

Open H1O12.js in notepad++ 

(pas ook je bekijkJS.html aan)

Jos

JOS is een game character: een poppetje dat we in meerdere opdrachten tegen zullen komen 

Zijn naam is een afkorting van Javascript Object Sprite. Een sprite is veelgebruikte term voor een tweedimensionaal plaatje of animatie

• Je ziet een behoorlijk aantal regels die ervoor zorgen dat JOS wordt getekend, maar het is niet nodig om die nu te bestuderen.
• Voeg de regel xJOS--; toe aan het eind van de draw en bekijk het resultaat Wat betekent deze regel?
• Gebruik yJOS--; zodat JOS naar linksboven beweegt.
• Pas de regel aan naar yJOS -= 2; zodat JOS twee keer zo snel omhoog beweegt als dat hij naar links beweegt.
• Pas regel 16 (translate) aan, zodat JOS meebeweegt met jouw muis.

In de vorige opdracht was het mogelijk om JOS van het canvas te laten verdwijnen. 

In veel spellen is het de bedoeling dat je game character zichtbaar blijft, ofwel: op het canvas blijft. 

Voor jou als programmeur betekent dit dat je de beweging van JOS moet inperken.

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

• Als het goed is heb je gemerkt dat je JOS wel kunt bewegen, maar dat je niet meer alle vrijheid hebt. Oorzaak is de regel xJOS = constrain(mouseX,100,450); (constrain is Engels voor beperken). JOS mag bewegen volgens de horizontale muispositie (mouseX), maar alleen tussen de waarden 100 en 450.
  
• Pas de code aan, zodat JOS links en rechts precies tot de rand van het canvas kan bewegen. HINT: in welke regel kun je zien hoe groot JOS is?
• Breid de code uit, zodat JOS ook boven en onder precies tot de rand van het canvas kan bewegen.
  

• Als we Jos wat kleiner willen tekenen, lijkt dat een hele klus, omdat hij is opgebouwd met flink wat regels programmeercode. Gelukkig heeft P5 een functie om de omvang van tekeningen te schalen: scale(1); Met de waarde 1 wordt alles op normale grootte (100%) getekend, met b.v. scale(0.5); op 50%.
• Teken Jos op 50% van zijn normale grootte. Wat zie je? LET OP: volgt Jos de muis nog wel goed?
• Verplaats de regel scale(0.5); zodat hij meteen na push(); staat. Probleem opgelost?
  

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

• In regel 15 is yJOS--; uitgezet met //. Haal deze weg en bekijk het resultaat.

• Wat gebeurt er als JOS bovenaan is? Waarom?
• Declareer een variabele snelheidJOS en geef deze de waarde 17.
• Pas de regel is yJOS--; aan zodat JOS niet met stapjes van 1 maar van 17 naar boven beweegt. Gebruik hiervoor de variabele snelheidJOS.

• Jos beweegt nu sneller naar boven, maar zijn beweging is niet heel natuurlijk. Als jij iets omhoog gooit, dan gaat het steeds langzamer omhoog, omdat de snelheid afneemt.
• Maak onder de regel die je net hebt aangepast een nieuwe regel die ervoor zorgt dat de snelheid van JOS bij elke loop van de draw afneemt met 0,5. (LET OP: in Javascript gebruik je niet een komma maar een punt.)

Zorg dat de snelheid bovenin wordt getoond, naast x en y.

Verklaar de beweging die je nu ziet.

Leg uit waarom de snelheid bovenin blijft veranderen, ook als JOS weer ‘op de grond’ staat.

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

• In regel 16 wordt de functie tekenJos aangeroepen. 

• Deze functie heeft twee parameters die bepalen waar JOS wordt getekend.
• JOS wordt nu horizontaal in het midden getekend. Zorg dat (het middelpunt van) JOS 75 pixels vanaf de linkerkant van het canvas wordt getekend.

• Voeg onder regel 16 deze twee coderegels toe en bekijk het resultaat. Voeg beide regels daarna nogmaals toe, zodat je JOS drie keer op het scherm ziet.
  

• Gebruik de eigenschappen van de loopfunctie draw om alle drie de versies van JOS naar rechts te laten bewegen met stapjes van 3 pixels.

• Gebruik de functie constrain om te zorgen dat de poppetjes stoppen op het moment dat ze de rechterkant van het canvas hebben bereikt

De functie tekenJos is natuurlijk geen standaard-functie van JS of P5. Hij wordt gemaakt in de regels 19 t/m 39. Daar zie je alle regels terug waarmee JOS kan worden getekend. Het gebruik van de functie lijkt meer werk (hoewel de code in de draw nu wel overzichtelijker is). Functies worden pas echt handig als je ze vaker gebruikt.

16 mei

obfuscator

zelf functies maken

vallende ster

lijnenspel

JOS laten groeien

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