I øvelsen hoppebold fik du bolden til at hoppe rundt på canvas. Det vil vi nu udvide på og lave et spil Pong. Pong er et computerspil fra 1972 der er basseret på bordtennis. Målet med denne øvelse er at lave et fuldt pong spil hvor der er to spillere som har hver deres bat de kan bevæge frem og tilbage.

For at gøre det mere overskueligt at lave spillet deler vi det op i mindre dele.

Da vi har en bold der kan bevæge sig rundt på banen, skal vi have et bat vi kan “jonglere” bolden med.

1. Lav en boks vha. rect.
2. Få den til at følge musens x placering på skærmen.
3. Sørg for at være omhyggelig med navngivningen af variablerne.

Nu skal vi detektere om bolden kollidere med battet. Dvs. hvis bolden rammer battet skal bolden skifte retning og man kan på den måde holde bolden i “luften”.

For at detektere om bolden har ramt battet skal vi bruge betingede sætninger (se her), specifikt if-sætninger (se her) og logiske operatorer (se her). Det kan være en god ide at have en stykke papir og en blyant ved siden af så du kan tegne det.

Følgende billeder viser en illustration af boldens kollision med battet.

Bold på vej mod battet men uden for x range og y range.

Bolden er indenfor x range, men udenfor y range.

Bolden er både indenfor x range og y range! Vi har en kollision!!

Nu kan vi jonglere med bolden men vi kan ikke tabe bolden. Derfor skal der laves en kollision på nederste side af canvas. Hvis bolden kollidere, skal der vises en Game over skærm.

Nu har vi bygget et singleplayer af spillet pong. Men det kunne være federe hvis vi kunne spille det med vores venner! Vi har alle delene til at kunne lave det fulde spil som multiplayer, vi skal bare have flyttet lidt rundt på det hele. Der skal følgende steps til:

1. Der skal laves et ekstra bat.
2. Det vil være optimalt at få battene til at bevæge sig på y-aksen.
3. Kontrolleren til battene skal ændres fra musens placering til at bruge wasd og piltasterne.
4. Begge bat skal have en kollision.
5. Hver side af kanvas skal have en kollision.
6. Måske en point-tæller kunne være godt?
7. Game over side der fortæller hvem der vandt.

• Tilføj en ekstra bold.
• Få boldene til at kollidere.
• Lav fede effekter ved kollision mellem objekter.
• Det skal da også være pænt at se på det spil!