Opdracht 3
Stuiterende bal
Uitgedeeld op 24 september 2020
Deadline: aftekenen in de les, uiterlijk 15 oktober
Stap 1:
Zorg ervoor dat je alles van Opdracht 2 al hebt geïnstalleerd / afgerond
Maak een nieuw project in je CSDOSC map door empty-example te kopiëren en een naam te geven als opdracht3_stuiterende_bal.
Je kan dit in de terminal doen door gebruik te maken van het cp -r commando. cp staat voor copy en -r maakt het recursief, zo kopiëer je ook alle bestanden in een map.
Een commando om een nieuw project te maken ziet er dan waarschijnlijk ongeveer zo uit:
cp -r empty-example/ opdracht3_stuiterende_bal
Start je sketch door in de terminal naar opdracht3_stuiterende_bal te gaan met cd en daarna npm start uit te voeren
In je browser naar keuze kan je nu naar localhost:8001/opdracht3_stuiterende_bal gaan om je sketch in actie te zien.
Wanneer je nu met je favoriete text-editor sketch.js aanpassingen maakt en deze opslaat (ctrl / cmd + s) en je daarna je browser refresh't ctrl / cmd + (shift) + r zie je de aanpassingen in je browser.
(Voor uitgebreidere uitleg zie de CSDOSC documentatie)
Stap 2:
Teken een ellipse van 50 pixels groot met een eigen gekozen kleur in het midden van het canvas. Gebruik hiervoor ellipse of circle (welke functie is in dit geval relevanter?)
Stap 3:
Zorg ervoor dat de bal beweegt. Bepaal de snelheid voor zowel de x- en de y-richting en maak 2 variabelen aan om dit in op te slaan; xSpeed en ySpeed. Tel ieder frame de x- en ySpeed op bij de x- en y-locatie.
Verander de snelheid van het balletje.
Stap 4:
Zoals je merkt beweegt het balletje na een tijdje uit het beeld. Zorg ervoor dat dit niet gebeurt door het balletje tegen de randen van het scherm te
laten stuiteren. Je kunt dit bereiken met if en else statements en door gebruik te maken van de width en height en xSpeed en ySpeed variabelen.
Stap 5:
Maak een tweede balletje met een eigen grootte, kleur en snelheid. Laat deze onafhankelijk van het eerste balletje bewegen.