P5JS - meer balletjes (classes)

• Informatica
• Middelbare school
• havo, vwo
• Leerjaar 5,6

P5JS

Makkelijk meer balletjes

• Je kan meerdere balletjes maken en laten stuiteren
  
• Dit doe je op basis van een class
• Je weet wat een constructor doet

lgg

Ik kan een balletje van links naar rechts laten stuiteren

1. Dat kan ik
2. Dat kan ik een beetje
3. Dat kan ik niet

Ik kan een balletje van links naar rechts én van boven naar beneden laten stuiteren

1. Dat kan ik
2. Dat kan ik een beetje
3. Dat kan ik niet

Ik kan vier balletjes tegelijk laten stuiteren

1. Dat kan ik
2. Dat kan ik een beetje
3. Dat kan ik niet
4. Dat kan ik, maar het is wel irritant

Meerdere stuiterende balletjes

Je hebt een stuiterend balletje. Dat heb je omdat:

1. Je code hebt zoals hiernaast. 
2. Je hebt leren te werken met velocity.

Maak nu drie stuiterende balletjes..

Linkje

https://replit.com/@TimLogtenberg/BouncingBall#script.js

Drie balletjes op deze manier maken is niet erg prettig. Maar wel belangrijk om ervaren te hebben. Nu de leerlingen de "pijn" gevoeld hebben kunnen ze leren dit efficienter te programmeren

1. Maak een class "Ball"
   
2. Maak een constructor waarin je aan meegeeft: x, y, w, h, vx, vy
3. Maak in de class een functie drawBall(). Hierin zet de je code om een balletje te teken. Die code heb je al en kan je herbruiken.
4. Roep de functie drawBall() aan in de gameloop 

Gebruik hiervoor documentatie over classes in javascript

https://www.w3schools.com/js/js_classes.asp

Opdracht

Volgende les

• Collision