Les 1 (1)

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

This lesson contains 23 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 40 min

Items in this lesson

Games maken en ervaren

Slide 1 - Slide

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 - Slide

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 - Slide

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 - Slide

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 - Slide

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 - Slide

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 - Slide

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 - Slide

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 - Slide

Slide 10 - Slide

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 - Slide

  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 - Slide

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

Slide 13 - Slide

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

Slide 14 - Slide

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 - Slide

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

Slide 16 - Slide

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

Slide 17 - Slide

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

Slide 18 - Slide

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 - Mind map

Slide 20 - Slide


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 - Poll


Hoe vond je 
deze les?
😒🙁😐🙂😃

Slide 22 - Poll

Volgende les
shape
triangle
quad

Slide 23 - Slide