Les 3 - Randen detecteren
Het is wel jammer dat de auto wegrijdt. Kunnen we hem niet laten omkeren? Jazeker! We laten de auto rijden door steeds xCar op te hogen met 1. Op een gegeven moment is xCar groter dan de breedte van je scherm en is je auto niet meer te zien. Wat we dus doen om dit op te lossen is de snelheid van de auto om te draaien als xCar te groot of te klein is.
See the Pen VMaXjd by Jurjenh (@jurjenh) on CodePen.
Het is nog niet perfect want de auto rijdt eerst helemaal het scherm uit en komt daarna weer terug. Je kunt vast een manier bedenken om dit op te lossen.
Opdracht - Stuiterend balletje
We hebben de auto alleen heen en weer laten rijden, maar je kunt natuurlijk ook je tekening naar boven en beneden laten stuiteren. Hieronder hebben we een voorbeeld gemaakt van een stuiterend balletje. Probeer zelf zoiets te maken zonder te spieken naar de code!
See the Pen pWyLey by Jurjenh (@jurjenh) on CodePen.
Opdracht - Meerdere stuiterend balletjes
Maak nu een animatie waarin je drie of meer balletjes laat stuiteren. Zorg dat ze ook andere richtingen op bewegen. Je hoeft je niet druk te maken over het botsen van balletjes. Probeer niet te spieken!