Les 4

Games maken en ervaren
1 / 38
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Cette leçon contient 38 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 60 min

Éléments de cette leçon

Games maken en ervaren

Slide 1 - Diapositive

Deze les
  • Loop
  • Automatische bewegingen
  • Jos

Slide 2 - Diapositive

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?

Slide 3 - Diapositive

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

Slide 4 - Diapositive

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.

Slide 5 - Diapositive

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.

Slide 6 - Diapositive

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;)

Slide 7 - Diapositive

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().

Slide 8 - Diapositive

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.




Slide 9 - Diapositive

  • 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.)

Slide 10 - Diapositive

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

Slide 11 - Diapositive

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

Slide 12 - Diapositive

  • 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.

Slide 13 - Diapositive

Slide 14 - Diapositive

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.

Slide 15 - Diapositive

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.

Slide 16 - Diapositive

Slide 17 - Diapositive

  • 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?

Slide 18 - Diapositive

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.

Slide 19 - Diapositive

  • 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.)

Slide 20 - Diapositive

Slide 21 - Diapositive

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

Slide 22 - Diapositive

Slide 23 - Diapositive

Verklaar de beweging die je nu ziet.

Slide 24 - Carte mentale

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

Slide 25 - Carte mentale

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.

Slide 26 - Diapositive

Slide 27 - Diapositive

  • 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.

Slide 28 - Diapositive

Slide 29 - Diapositive

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

Slide 30 - Diapositive

Slide 31 - Diapositive

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

Slide 32 - Diapositive

Slide 33 - Diapositive

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.

Slide 34 - Diapositive

16 mei
obfuscator
zelf functies maken
vallende ster
lijnenspel
JOS laten groeien

Slide 35 - Diapositive


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

Slide 36 - Sondage


Hoe vond je 
deze les?
😒🙁😐🙂😃

Slide 37 - Sondage

Volgende les
  • obfuscator
  • Zelf functies maken
  • Vallende ster
  • Jos

Slide 38 - Diapositive