Persoonlijk Project

Pong

Pong is een van de eerste videogames. Het is uitgebracht door Atari in 1972. Pong is gebaseerd op tafeltennis en heeft hier ook zijn naam aan te danken(pingpong). Pong bestaat uit twee spelers, waarvan een door een computer gespeeld kan worden. Elke speler heeft een batjes en spelen een balletje over. Wanneer deze de muur achter de ene speler raakt heeft de andere speler een punt gescoord. De spelers kunnen spelen op tijd of tot een aantal punten. In allebei de gevallen heeft de speler met de meeste punten gewonnen.

Wat ga ik doen?

1. Canvas opzetten en spelobjecten tekenen

2. Spelmechanica implementeren

3. Besturing en interactie toevoegen

4. Iteratief testen en verbeteren

Mijn aanpak

Mijn aanpak is stapsgewijs en iteratief:

Door te werken met een canvas en alles te programmeren in JavaScript, leer ik veel over game development en logica achter animaties. Dit maakt mijn versie van Pong niet alleen functioneel, maar ook technisch uitdagend en leerzaam.

Projectplan

Dit projectplan beschrijft mijn eigen project, Pong. Hierin leg ik uit waar het project over gaat, welke hoofd- en deelvragen ik wil beantwoorden en aan welke leeruitkomsten ik wil werken. Daarnaast geef ik een overzicht van wat ik binnen de beschikbare tijd zal realiseren en welke onderdelen niet.

Verder benoem ik verschillende thema-ideeën voor Pong, mijn planning en wie mijn coach is. Tot slot bevat dit plan een overzicht van de bronnen die ik hiervoor heb gebruikt.

Mijn projectplan dient als leidraad om het proces gestructureerd en doelgericht aan te pakken.

Proces

Bronnen

Ik ben begonnen om zelf Pong na te maken, om te kijken hoe ver ik zou komen. Ik startte simpel: het speelveld, de batjes en de score zette ik als div-elementen in mijn HTML. Daarna begon ik met JavaScript om de batjes te laten bewegen. Ik wist dat ik een keydown event moest gebruiken, maar ondanks meerdere pogingen kreeg ik het niet werkend.

Toen heb ik besloten om een YouTube-tutorial te volgen. Eerst keek ik deze volledig en herhaalde ik de delen die ik niet begreep. Toen ik de uitleg beter snapte, probeerde ik de code te integreren in mijn eigen project. Dat werkte niet goed, omdat ik werkte met div-elementen, terwijl de tutorial gebruik maakte van een canvas-element.

Ik heb onderzocht wat beter werkt: divs of canvas. Hieruit bleek dat div-elementen makkelijker zijn voor beginners omdat je daarbij vooral werkt met HTML en CSS. Bij canvas teken je met JavaScript alles zelf, en moet je veel werken met coördinaten. Omdat ik me juist wil verdiepen in JavaScript, heb ik ervoor gekozen om opnieuw te beginnen en wél met canvas te werken, op basis van de tutorial.

Vanaf dat moment heb ik iteratief gewerkt:

Door te spelen kwam ik erachter dat er nog veel dingen misten:

In plaats van meteen alles te verbeteren, heb ik eerst usertests gedaan met klasgenoten om te zien wat zij vonden. Op basis daarvan stelde ik doelen op. Daarna ben ik opnieuw mijn code doorgelopen. Ik heb overal comments toegevoegd zodat ik beter begrijp wat elk deel doet en ik de logica van het script beter leer volgen.

Door dit iteratieve proces — proberen, testen, verbeteren en feedback verwerken — heb ik niet alleen Pong gemaakt, maar ook veel geleerd over JavaScript, het werken met canvas, en hoe je stap voor stap je code kunt verbeteren.

Feedback

Feedback Frank

Je hebt nu een tutorial gevolgd, voordat je er andere functionaliteiten aan toevoegt is het belangrijk dat je begrijpt waar je code over gaat. Ga verder met comments maken zodat je de code begrijpt, je moet de code uit kunnen leggen. Probeer eerst de code die je hebt te veranderen, maak het batje/speelveld een andere grootte of verander de kleuren. Maak het je eigen product.

Aanpasingen

Aanpassingen

Bronnen:

Feedback Frank

Goed dat je nu de kleuren hebt aangepast. Probeer nu kleine dingen aan te passen in de code, zoals dat de batjes vloeiender bewegen en dat je ze beiden tegelijkertijd kan bewegen. Hierdoor maak je het ‘Dominique’s’ Pong en niet ‘gewoon’ Pong. Als je hierbij vastloopt kan je gebruik maken van ai, dit is beter dan dat het je frustreet en je geen verbetering maakt.

Aanpassingen

Feedback Frank en Anke

We hebben samen afgesproken wat mijn volgende doelen zijn:

Aanpassingen

Usertest moment 1

Om te kijken hoe gebruikers mijn eerste versie van Pong ervaren en of zij dit zonder hinder en met plezier kunnen spelen, heb ik besloten om met twee mensen een usertest uit te voeren. Ik test hiermee of zij de taak ‘speel Pong’ zonder problemen kunnen uitvoeren.

Tijdens de test observeer ik hun acties: welke toetsen proberen ze uit, en weten ze automatisch hoe ze de verschillende batjes moeten bewegen? Na het spelen stel ik verschillende open en gesloten vragen over hun ervaring.

Ik heb deze test uitgevoerd met Brian en Jennifer, twee kennissen die ook de opleiding ICT volgen bij Fontys. Aan hen heb ik gevraagd om Pong te spelen, zonder extra uitleg vooraf. Tijdens het spel stelde ik vragen over hun beleving of vroeg ik hen specifieke acties uit te voeren.

Na het spelen heb ik hun feedback verzameld en hieruit een conclusie en doelen opgesteld om mijn spel te verbeteren.

Conclusie

Tijdens het testen werd duidelijk dat het niet meteen helder is dat je de spelers moet besturen met de toetsen arrow up, arrow down, W en S. De pijltjestoetsen worden snel gevonden, maar het besturen van de tweede speler (W en S) wordt pas duidelijk als dat wordt benoemd. Daarbij werd aangegeven dat een korte tutorial aan het begin fijn zou zijn. Ook gaf de gebruiker aan dat het best lastig is om beide spelers tegelijk te besturen, omdat dit niet gelijktijdig lukt.

De snelheid van de spelers werd in de ene test als voldoende beoordeeld, maar in de andere juist als (te) traag ervaren. De tip werd gegeven om het spel traag te laten starten, en het tempo daarna geleidelijk op te voeren. Ook werd voorgesteld om de spelers iets langer te maken en de bal iets groter, om de speelervaring te verbeteren.

Wat betreft de besturing werd aangegeven dat het fijn zou zijn als je ook met een muis of joystick kunt spelen — vooral om een breder publiek aan te spreken.

De puntentelling werkt goed en wordt als overzichtelijk ervaren. Het feit dat deze in het speelveld staat wordt niet als storend ervaren.

Gebruikers zouden het spel momenteel wel aanraden omdat het technisch werkt, maar nog niet omdat het prettig of leuk speelt. Als laatste werden er meerdere ideeën aangedragen om het spel verder te ontwikkelen, zoals: verschillende game modes, betere opmaak, sound effects, een leaderboard en zelfs visuele aanpassingen zoals skins.

Samengestelde doelen

Lees de volledige usertests in

Usertest moment 2

Ik heb een gebruikerstest uitgevoerd om te onderzoeken of de gameplay van mijn Pong-versie intuïtief, responsief en plezierig aanvoelt. Specifiek wilde ik weten welk batje fijner speelt. Hiervoor heb ik batje 1 en batje 2 een andere snelheid gegeven. Tijdens de test vroeg ik de gebruikers om het spel te spelen en bewust te letten op de besturing van de batjes. Na het spelen stelde ik een aantal vragen over hun ervaring.

Conclusie

De reacties liepen uiteen. Player 2 werd vaker als fijner ervaren vanwege de hogere snelheid, maar er werd ook aangegeven dat dit per speler kan verschillen. Wat opviel is dat iedereen de bal te traag vond, waardoor het spel wat saai aanvoelde. Alle gebruikers gaven aan dat ze controle hadden over hun batje, wat positief is. Wel was het voor iedereen onduidelijk hoe je de batjes moest besturen; dit moet duidelijker worden uitgelegd of visueel worden aangegeven.

Doelen

Usertest moment 3

Voor deze test wilde ik onderzoeken hoe gebruikers het spel Pong in het algemeen ervaarden, met speciale focus op de muziek en geluidseffecten. De testpersoon kreeg de taak om het spel te spelen, waarna ik een aantal gerichte vragen stelde over de spelbeleving en het geluid. Tijdens deze test waren er ook twee andere personen aanwezig die zelf niet meespeelden, maar wél luisterden naar de achtergrondmuziek en soundeffects. Op die manier kon ik ook specifiek de audio-ervaring afzonderlijk testen.

De gebruiker vond het spel leuk en makkelijk te begrijpen. De interactie met het geluid werd als overwegend positief ervaren: de soundeffecten pasten goed bij het spel, maar waren in het begin moeilijk te onderscheiden van de achtergrondmuziek. De muziek werd meerdere keren omschreven als "slaapverwekkend" en verwarrend, wat de beleving negatief beïnvloedde. De snelheid van de bal werd als aan de trage kant ervaren, en de wall collision-sound werd als onaangenaam genoemd door externe luisteraars. De batjes en de bal zijn van een goede grootte volgens de gebruiker, en het gebruik van toetsen voelde intuïtief aan (W/S en pijltjes).

Doelen

Pitch

Ik heb een pitch gemaakt om mijn eigen project, Pong, te presenteren op 20 juni. Vervolgens heb ik deze pitch voor Jennifer en Coco gehouden. Zij gaven mij feedback, die ik heb verwerkt in een nieuwe versie. Daarna heb ik mijn pitch gepresenteerd aan Noortje, opnieuw feedback verzameld en deze verwerkt in een aangepaste versie van mijn pitch.

Feedback

Jennifer gaf aan dat mijn lichaamstaal goed en positief was, en dat het volume van mijn stem prettig was. Ze raadde aan om minder te giechelen tijdens het spreken. Ze vond het sterk dat ik duidelijk mijn leerdoel benoemde en uitlegde waarom ik dit had gekozen — dit liet volgens haar mijn enthousiasme goed zien.

Coco vond dat ik goed en duidelijk sprak en dat ik goed wist waar ik het over had. Wel gaf ze aan dat mijn openingszin wat tegenstrijdig overkwam. Het herhalen van informatie vond ze goed, maar ze adviseerde om dit korter en concreter te houden. Verder vond ze dat ik alle belangrijke onderdelen duidelijk had benoemd.

Met deze feedback heb ik mijn pitch verbeterd en opnieuw gepresenteerd, dit keer aan Noortje. Na mijn presentatie heb ik haar om feedback gevraagd, zodat ik mijn pitch nog verder kon aanscherpen.

Feedback

Je begon met een goede hook en je sprak rustig, wat prettig was om naar te luisteren. Je legde goed uit waarom je ervoor gekozen hebt om dit project te maken — het sluit aan bij jouw niveau en is een mooie uitdaging. Wel mag de uitleg over waarom je het hebt gekozen iets korter, bijvoorbeeld iets meer in balans (50/50) of door de volgorde om te draaien. Je deed het verder goed: je sprak duidelijk en je lichaamstaal was positief.

Hierna heb ik mijn pitch gepresenteerd aan Frank, Anke en de klas. Hieruit is de volgende feedback gekomen:

Feedback

We hebben samen afgesproken wat mijn volgende doelen zijn:

Reflectie

Omdat ik bij het development-project het te groot had aangepakt en daardoor minder de diepte in kon gaan dan ik had gewild, heb ik besloten om dit project kleiner aan te pakken. Daarom heb ik gekozen voor Pong.

Ik wilde eerst kijken hoe ver ik zelf kon komen, maar ik merkte al snel dat ik vastliep en raakte daardoor gefrustreerd. Het voelde alsof ik in cirkels liep. Daarom heb ik ervoor gekozen om een tutorial te volgen. Eerst heb ik deze bekeken en daarna toegepast. Dit gaf me een beter beeld van wat ik aan het doen was. Als ik iets niet begreep, spoelde ik de video terug.

Hierdoor heb ik geleerd om te werken met elementen waar ik van tevoren geen kennis van had. Mijn doel om meer ervaring op te doen met JavaScript is hiermee behaald. Ook is het gelukt om een uitdagend maar niet te moeilijk project te kiezen. Veel informatie was nieuw voor mij, maar met behulp van de tutorial en AI begrijp ik nu de code en heb ik aanpassingen en uitbreidingen gemaakt waar nodig. Daardoor is het niet zomaar 'Pong', maar echt 'mijn' versie van Pong geworden.

Al met al vond ik het leuk dat je bij dit project zelf mocht kiezen wat je wilde maken. Het was fijn om een onderwerp te kiezen waar ik nog weinig kennis van had, zodat ik er echt iets van kon leren.