Startproject voor Pong in Typescript
Bestudeer de opzet van het project: game roept de update functie van de bal aan. Maak de volgende aanpassingen:
- In de update functie van de bal tel je 1 op bij de
xenyvariabelen. - Log de waarde van de
xenyvariabelen in de console. - Gebruik de variabelen om de bal op die plek te tekenen!
- Geef de bal twee nieuwe variabelen:
xspeedenyspeed. Zet deze op 1. - In de update functie tel je
xspeedop bijxenyspeedbijy.
De breedte en hoogte van het scherm kan je opvragen met window.innerWidth en window.innerHeight.
- Controleer of de positie van de bal binnen het window is met
if (this.x ...). - Als de bal rechts of links buiten beeld gaat, dan moet je de xspeed omdraaien. Dit doe je door de xspeed te vermenigvuldigen met -1:
this.xspeed *= -1. - Doe hetzelfde met de yspeed als de bal boven of onder uit beeld gaat.
- Controleer of de bal nu continu door het beeld blijft stuiteren, of dat je nog iets moet aanpassen.
- Maak een array van ballen in Game.ts:
balls:Ball[] = [] - Plaats een aantal ballen in de array met
this.balls.push(new Ball()). Experimenteer met het aantal ballen. - Update alle ballen in de gameloop van game.ts
- Het project bevat een
paddle.tsclass. Voeg een paddle instance toe aan Game.ts! - Vergeet niet de paddle te updaten, net zoals de ballen.
- Bestudeer het voorbeeld van collision detection
- Voeg in game.ts collision detection toe tussen de balls en de paddle.
- Toon een bericht in de console als een bal de paddle raakt.
- De bal stuitert niet meer terug als die links uit beeld gaat.
- De bal stuitert wel terug naar rechts als de bal de paddle raakt.
- Kan je de bal steeds sneller laten gaan, naar mate die vaker geraakt wordt?
- Kan je een score updaten en tonen nadat de ball de paddle heeft geraakt?
- Kan je twee paddles toevoegen die elk hun eigen keyboard controls hebben?