Les 1 (1)

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

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

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

Éléments de cette leçon

Games maken en ervaren

Slide 1 - Diapositive

Tijdens deze periode leer je stap voor stap programmeren in de taal Javascript met P5. P5 of Processing is een aanvulling op Javascript. Zo’n aanvulling heet een bibliotheek (library). 

P5 is speciaal gemaakt om het programmeren makkelijker te maken voor mensen die net beginnen met programmeren.

Slide 2 - Diapositive

Opbouw
  • Basisprincipes van het programmeren en specifieke javascript- en P5-elementen. 
  • Object-georiënteerd programmeren (OO of OOP) heet. 
  • Ontwerpen en ervaren van games.

Slide 3 - Diapositive

Deze les
Voordat je kunt beginnen met programmeren in P5, moet je een omgeving inrichten om in te werken en te testen.
Dit doen we met notepad++ en je browser.

Slide 4 - Diapositive

Teams-lesmateriaal
  • Game:  Deze bestanden moet je allemaal downloaden en op je onedrive zetten 
  • P5 references: alle P5 commando's

(als je slim bent, maak je een mapje informatica op je onedrive en zet je het daarin)

Slide 5 - Diapositive

Kennismaking met P5
Deze tekening is geprogrammeerd met Javascript. De code bestaat uit twee belangrijke delen: de setup en draw.
Het canvas: ons speelveld

Slide 6 - Diapositive

setup
In de setup van een programma creëer je de beginsituatie van het programma. We gaan hier niet alle regels één voor één uitleggen. Belangrijk voor nu zijn:
  • createCanvas(1000,500); Maak een speelveld / canvas van 1000 pixels breed en 500 pixels hoog
  • background('orange'); Geef het canvas een oranje achtergrondkleur

Slide 7 - Diapositive

draw
Het tweede deel van de code staat hiernaast. Dit is ons hoofdprogramma: de draw. In dit voorbeeld staan hier commando’s om de cirkel en de rechthoek te tekenen in het canvas.

Slide 8 - Diapositive

Het canvas kun je zien als een veld van pixels. Je verwijst naar een bepaald punt met een x-waarde en een y-waarde. Belangrijk om te weten: het punt [0,0] ligt linksboven en een grotere y-waarde betekent dat je naar beneden gaat (en niet omhoog, zoals in een assenstelsel bij wiskunde)

Hiernaast zie je het resultaat met een raster van hokjes van 100 × 100 pixels.

Slide 9 - Diapositive

Slide 10 - Diapositive

Opdracht 1 
vormen tekenen I
Open H1O01.js (Hoofdstuk 1 Opdracht 1) in notepad++. (Game-JS-H1). Dit is de code van het plaatje hiernaast. Bekijk het resultaat in de browser door bekijkJS.html te dubbelklikken

Slide 11 - Diapositive

  1. Pas de code aan zodat het canvas grijs (grey) van kleur wordt.
  2. Pas de code aan zodat het canvas nog maar 450 pixels hoog is.
  3. Zorg dat de groene cirkel zowel boven als links op een afstand van 25 pixels van de rand van het canvas komt te staan.
  4. Voeg een tweede, witte cirkel toe met hetzelfde middelpunt als de groene cirkel en een diameter van 300.
  5. Pas de regel voor de rechthoek aan, naar: rect(125,125,200,200);
  6. Pas de code aan zodat het eindresultaat verschijnt met een vierkant canvas.

Slide 12 - Diapositive

Pas de code aan zodat het canvas grijs (grey) van kleur wordt.

Slide 13 - Diapositive

Pas de code aan zodat het canvas nog maar 450 pixels hoog is.

Slide 14 - Diapositive

Zorg dat de groene cirkel zowel boven als links op een afstand van 25 pixels van de rand van het canvas komt te staan.

Slide 15 - Diapositive

Voeg een tweede, witte cirkel toe met hetzelfde middelpunt als de groene cirkel en een diameter van 300.

Slide 16 - Diapositive

Pas de regel voor de rechthoek aan, naar: rect(125,125,200,200);

Slide 17 - Diapositive

Pas de code aan zodat het eindresultaat verschijnt met een vierkant canvas.

Slide 18 - Diapositive

Er zijn nu twee regels met ellipse. Voorspel wat je zal zien als je de beide coderegels van plek laat wisselen, zodat hun
volgorde andersom is.

Slide 19 - Carte mentale

Slide 20 - 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 21 - Sondage


Hoe vond je 
deze les?
😒🙁😐🙂😃

Slide 22 - Sondage

Volgende les
shape
triangle
quad

Slide 23 - Diapositive