Les 6

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

Games maken en ervaren

Deze les

• Voorwaarden: if en else
• Afstand bepalen
• Raak het andere blokje
• Jager en prooi
  

Voorwaarden: if en else

Als je JOS hebt laten groeien, dan heb je al gewerkt met voorwaarden.

Bijna alle computerprogramma's reageren op de invoer van de gebruiker van het programma. Ze doen dus niet zomaar iets, maar alleen ALS de gebruiker daar om vraagt.

Wanneer een opdracht niet altijd moet worden uitgevoerd, maar alleen in speciale gevallen, spreek je van een voorwaarde. Alleen wanneer aan de voorwaarde is voldaan, wordt de opdracht uitgevoerd. In H1O12 zie je een bewegende bal die, als hij de rand bereikt, omkeert qua snelheid. De bijbehorende code zie je hiernaast.

Een voorwaarde begint met if ( ). Tussen de haakjes zet je de voorwaarde (-n) of eis (-en) waaraan moet worden voldaan om één of meerdere coderegels uit te voeren, zoals if (x > 880). Wat de computer moet doen als aan de eis is voldaan, staat tussen { }.

Als je in H1021 met de muis klikt, wordt de cirkel soms groen, maar soms ook niet, ook al klik je met de muis. Dat komt omdat er een dubbele voorwaarde is gebruikt: if (mouseIsPressed == true && snelheid == 5) { fill('green'); }

De snelheid wisselt hier tussen (+) 5 (naar rechts) en -5 (naar links). Alleen als het waar is dat er op de muis wordt gedrukt en tegelijkertijd ook geldt dat de snelheid 5 is, wordt de vulkleur groen gebruikt. Als je meerdere eisen wilt stellen, gebruik je &&. Merk op dat je om te kijken of de snelheid 5 is een dubbele = (==) moet gebruiken. Een enkele = gebruik je om een waarde aan een variabele toe te kennen.

Als je nog eens kritisch kijkt naar de code hiernaast dan zie je dat dat er eigenlijk twee voorwaarden zijn waarbij dezelfde handeling moet plaatsvinden (namelijk: snelheid omkeren). Dit kunnen we samenvoegen tot één voorwaarde: als x groter dan 880 of kleiner dan 120 is, moet de snelheid omkeren. Dat doe je zo: if (x > 880 || x < 120) { snelheid = -1*snelheid; }

Als je of wilt aangeven gebruik je dus ||. De elementen ||, &&, == en > zijn voorbeelden van logische operatoren. In de opdrachten gaan we er mee oefenen.

In H1O21 wordt de cirkel groen als aan bepaalde eisen is voldaan. Maar wat moet er gebeuren als dat niet zo is? Dat staat beschreven in het gedeelte met else { }. Een else maak je altijd in combinatie met een if. De vaste vorm zie je in figuur 1.29.

Merk op dat er achter de else geen nieuw voorwaarde komt. De voorwaarde tussen ( ) is altijd iets dat WAAR (true) of NIET WAAR (false) is. Later komen we hier nog uitgebreid op terug.

Open H1O21.js 

(denk aan je bekijkJS.html)

• In de theorie wordt uitgelegd hoe deze twee losse voorwaarden kunnen worden samengevoegd tot één if. Voer dat uit in jouw bestand.
  
• In de voorwaarde voor de vulkleur staat && snelheid == 5. Voorspel wat je ziet als == wordt veranderd in: A) snelheid < 5; B) snelheid > 5 ; C) snelheid >= 5 ; Check vervolgens of je voorspelling klopt.
  
• Zorg dat de cirkel groen wordt als er wordt geklikt of als de cirkel naar rechts beweegt.
  
• Zorg dat de cirkel groen is als hij naar rechts beweegt, blauw als hij naar links beweegt en rood als er iemand klikt.
  
• Zorg dat de diameter van de cirkel alleen 100 is als er iemand klikt en weer 200 als dat niet zo is.

Open H1O22.js 

(denk aan je bekijkJS.html)

• Beweeg hierbij JOS langs alle randen van het canvas. Jos verandert alleen rechts van kleur. De functie tekenJOS heeft hiervoor een extra parameter kleur gekregen.
  
• Bestudeer de code. In welke regels is ervoor gezorgd dat JOS niet buiten beeld kan verdwijnen?
  
• Verklaar het gebruik van de waarde 25 in deze coderegels.
  
• Hoe dicht moet JOS bij de rand zijn om van kleur te veranderen? Hoeveel pixels is dit? In welke coderegel kun je dit zien?
  
• Pas de code aan zodat JOS ook aan de linkerkant rood kleurt als hij te dichtbij de rand komt. Houd dezelfde marge aan als aan de rechterkant.
  
• Pas de code verder aan zodat JOS ook boven en onder rood kleurt (met dezelfde marge).

Nu JOS rood kleurt bij de randen van het canvas, is de zwarte bol aan de beurt. In figuur 1.31 bevindt het middelpunt van Jos zich in het punt [x,y] = [315,105]. Omdat het canvas 450 pixels breed en hoog is en de zwarte bol in het midden staat, bevindt het middelpunt van de zwarte bol zich in [x,y] = [225,225] (= 450/2).

In de onderbouw heb je geleerd hoe je met de Stelling van Pythagoras de afstand tussen de twee punten kunt bepalen. Als we in de gele driehoek van figuur 1.31 de horizontale zijde a noemen en de verticale zijde b dan kunnen we over de schuine zijde c zeggen:

P5 heeft een ingebouwde functie die dit voor je uitrekent: de dist-functie (distance is Engels voor afstand). De coderegel afstand = dist(315,105,225,225); zorgt ervoor dat de variabele afstand nu de waarde 150 krijgt.

• Gebruik bovenstaande coderegel (met dist) en pas deze aan zodat de afstand tussen de punt van de muis (de cursor; het middelpunt van JOS!) en het middelpunt van de zwarte bol wordt berekend.
  

We willen dat JOS rood kleurt als hij zich 5 pixels (of minder) van de zwarte bol bevindt. Dit doen we door de functie dist te gebruiken.

• Pas de code aan, zodat JOS niet alleen rood kleurt in de buurt van de randen van het canvas, maar ook wanneer hij in de buurt van de zwarte bol komt.
  

• Zorg dat bovenin, behalve de reeds getoonde tekst, ook de actuele waarde van de variabele afstand wordt getoond.
• Pas de code aan, zodat de achtergrond geel (yellow) kleurt als JOS zich op de linkerhelft van het canvas bevindt en wit (white) kleurt als JOS zich op de rechterhelft van het canvas bevindt. Natuurlijk zorg je ervoor dat de tekst bovenaan nog steeds zichtbaar is!

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

• Druk op de pijltjestoetsen. Welke richtingen werken?
  
• Het blokje blijft in het canvas, door regel 23: y = constrain(y,0,height - 100); Verklaar het gebruik van height - 100 In deze functie.
  
• Pas de code aan, zodat het blokje ook naar links en rechts kan bewegen (met de bijbehorende pijltjestoetsen).
  
• HINT: Gebruik LEFT en RIGHT.
  
• Het blokje kan nu links en rechts het canvas verlaten. Blokkeer dit met de functie constrain.
• Breid de code uit, zodat het rechterblokje groen kleurt wanneer het geraakt wordt door het vierkant.

Open H1O23.js in notepad++

(pas ook je bekijkJS.html aan)

Breid de code uit, zodat een tweede speler het blokje (prooi) kan besturen met w, a, d en s.

De prooi kan nu het canvas verlaten. Los dit probleem op.

De prooi kan nu bewegen. 

Pas de code aan, zodat de prooi alleen felgroen kleurt wanneer de jager hem ook echt raakt.

Onderaan is een functie eindScherm gemaakt. Zorg dat deze wordt aangeroepen op het moment dat het ‘raak’ is.