P5JS - collision

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

P5JS

Collision

• Je de horizontale en verticale overlap tussen twee vierkanten herkennen
• Je kan deze combineren tot een collision
• Je kan een gevolg geven aan de collision

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 (met classes)

1. Dat kan ik
2. Dat kan ik een beetje
3. Dat kan ik niet
4. Dat kan ik, en het is echt superefficient

1. Maak fork van de onderstaande replit
2. Verplaats 3 vierkanten naar willekeurig plekken. Zorg dat ze elkaar niet overlappen
3. Schrijf code die ervoor zorgt dat de vierkanten een andere kleur krijgen als ze overlappen

Code om te starten:

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

Opdracht

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

Let op! Deze code gebruikt constructies die we niet behandeld hebben dus gebruiken op eigen risico!

1. Hoe weet je of twee vierkanten horizontaal overlappen?

Verticale overlap

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

Eigen precies hetzelfde als verticale overlap.Combineer nu de horizontale met de verticale overlap:

Horizontale overlap

Geen overlap

verticale overlap

horizontale overlap

Collision

Dit is een stap in de goede richting maar de verticale en horizontale overlap mogen van zichzelf nog geen reactie geven.

Eigen precies hetzelfde als verticale overlap.Combineer nu de horizontale met de verticale overlap:

Collision

Geen overlap

verticale overlap

horizontale overlap

Collision

Dit is een stap in de goede richting maar de verticale en horizontale overlap mogen van zichzelf nog geen reactie geven.

Of toch niet? :'(

Hoera, dan zijn we er!

Watskeburt?

1. Maak fork van de onderstaande replit
2. Voeg 3 rechthoeken toe op willekeurige plekken. Zorg dat ze elkaar niet overlappen
3. Schrijf code die ervoor zorgt dat de vierkanten een andere kleur krijgen als ze overlappen

Code om te starten:

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

Klaar?

Maak een stuiterend blokje met collision (zie opdracht voor voorbeeld)

Opdracht

Volgende les(sen)

• Werken aan je spelletje