Les 3 (1)

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

Cette leçon contient 15 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
  • Huis met boom programmeren
  • Parameters en argumenten in P5

Slide 2 - Diapositive

Huis met een boom

Slide 3 - Diapositive

Pas bekijkJS.html aan naar H1O04.js

Slide 4 - Diapositive

In deze opdracht gaan jullie nog een keertje oefenen met het tekenen van vormen, randen en kleuren. 

Het doel is de afbeelding hiernaast.

Slide 5 - Diapositive

In de code staan meerdere commentaarregels met opdrachten om de tekening compleet te maken. Als je een programma aanpast, doe je er goed aan om dit in stapjes te doen. Kijk elke keer even of een stap gelukt is, voordat je verder gaat. Zo ben je uiteindelijk minder tijd kwijt.
Voer de opdrachten in de code uit zodat het einddoel verschijnt. Gebruik de extra instructies in de code.

Slide 6 - Diapositive

Slide 7 - Diapositive

Parameters en argumenten
In de vorige les heb je gewerkt met onder andere fill, stroke, strokeWeight, rect, noStroke en ellipse (figuur 1.11). We hebben dit tot nu toe commando’s genoemd. Vanaf nu gebruiken we de term functie. Met een functie geef je de computer de opdracht om iets uit te voeren. Het was je misschien al opgevallen dat achter elke functie twee haakjes staan. Tussen die haakjes zet je de extra informatie die de functie nodig heeft om goed te werken.
Als je in de reference kijkt bij de uitleg van de functie strokeWeight, dan zie je het volgende:


Slide 8 - Diapositive

Met de term syntax (of: syntaxis) wordt het geheel aan taalregels van een programmeertaal bedoelt. De syntax vertelt je hoe je de taal, in ons geval Javascript, gebruikt om een programma te schrijven.

In de beschrijving staat een functie strokeWeight. In de uitleg zien we dat deze functie een gegeven nodig heeft om goed te kunnen werken. Zo’n gegeven heet een parameter. In dit geval is dit de lijndikte weight.

Een parameter heeft een algemene naam, zoals weight. 

Als je de functie wilt gebruiken, moet je een specifieke waarde voor de parameter meegegeven: strokeWeight(10) In dit voorbeeld wordt de waarde 10 als argument meegegeven. 
Niet alle functies hebben een argument nodig. Voorbeeld: met de functie noStroke() geef je aan dat je geen rand om een vorm wilt.
In de volgende opdrachten maak je kennis met een aantal P5-functies die erg handig zijn bij het tekenen.

Slide 9 - Diapositive

Pas bekijkJS.html aan naar H1O05.js

Slide 10 - Diapositive

In regel 14 staat de functie translate. Hiermee willen we het huis verplaatsen. Pas de argumenten aan, zodat x = 90 en y = -10. Wat is de betekenis van het minteken? Voorspel wat het resultaat van deze aanpassing zal zijn.

Klopte jouw voorspelling? In regel 26 staat nog een regel met translate die is uitgeschakeld met //. Haal de// weg. Begrijp je waarom nu alleen het huis verplaatst (en net nog niet)?

Slide 11 - Diapositive

Deze opdracht laat zien hoe translate werkt, maar normaal gesproken pas je dit wel anders toe: als je de oorsprong verplaatst, kun je juist makkelijk vanaf de coördinaten [0,0] tekenen. Dit gaan we uitproberen.
Bekijk de code hiernaast en maak een schets van de tekening die zal ontstaan en een tweede schets van de tekening wanneer de // voor beide regels met translate worden weggehaald.
Verwijder alle coderegels in de draw en kopieer de code van hiernaast. Klopte jouw tekening?


Slide 12 - 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 13 - Sondage


Hoe vond je 
deze les?
😒🙁😐🙂😃

Slide 14 - Sondage

Volgende les
  • Push & pop
  • Draaien

Slide 15 - Diapositive