Wie ooit op de kermis of in een speelhal is geweest is er ongetwijfeld bekend mee: de kwartjesschuivers. Ik kon er uren zoet mee zijn. Met een paar muntjes zo veel mogelijk punten en extra munten proberen te scoren (en uiteindelijk met vrijwel lege handen naar huis). Maar het was een fijne bezigheidstherapie!
Die experience wilde ik thuis ook nabootsen, maar om nou zo’n complete machine aan te schaffen is misschien wat overdreven. En als je alleen maar je eigen geld kunt terugwinnen is de charme er natuurlijk wel een beetje af.
Dus ging ik op zoek naar een kwartjesschuiver-game voor de computer. En het zal je misschien -net als een van mijn favoriete YouTubers- verbazen dat er eigenlijk geen enkele game bestaat die ook maar enigszins in de buurt komt van het “echte werk”:
Het zijn allemaal zeer commerciële pay-to-win apps met kinderachtige graphics, en onrealistische “physics”.
Dus heb ik jarenlang met het idee rond gelopen om dan maar zelf een keer zo’n game te maken. Maarja, daar moet je natuurlijk ook maar net de tijd en kennis voor hebben.
Enter: ChatGPT!
Het zal je misschien niet ontgaan zijn dat de berichten op onze site een lichte AI-kritische ondertoon hebben. Laten we het eens keer in ons voordeel gebruiken!
Een game maken met ChatGPT
Even voorop gesteld, deze game is gemaakt met GPT-4, hier heb je op het moment van schrijven een Plus abonnement voor nodig. Dit idee realiseren was een van de eerste dingen die in mij op kwam toen ChatGPT werd gelanceerd, maar de standaard GPT-3.5 versie bakte er niks van.
Ik heb zelf geen ervaring met games bouwen, maar kan wel programmeren en ben bekend met de vaktermen. Als je ChatGPT opdrachten wilt geven is het wel handig als je een beetje weet waar je het over hebt, en weet hoe je de resultaten moet toepassen. Want onthoud: garbage in, garbage out.
Wat willen we bouwen?
Het mooiste zou natuurlijk zijn als de game werkt in de browser. Tegenwoordig kun je behoorlijke games bouwen die gewoon vanuit de webbrowser draaien zonder iets te hoeven downloaden.
Daar ga ik twee “libraries” voor gebruiken, Three.js en Cannon.js. Three.js is nodig voor het renderen van de 3D objecten van het spel en Cannon.js zorgt dat de objecten (munten) realistisch bewegen ten opzichte van elkaar (“physics”).
Dus, ChatGPT…:
Can you create a realistic HTML5 canvas coin pusher game using three.js and cannon.js?
Het resultaat

Na tien minuten wat over en weer gechat te hebben met ChatGPT hebben we een game gerealiseerd die qua munt-physics wat mij betreft elke game in de app store al overtreft.
Probeer hem hier (klikken om munten te laten vallen)
Natuurlijk is er nog geen enkel doel, geen score, geen limiet en kunnen de graphics ook nog wel wat verbetering gebruiken.
Maar het begin is er!
Dat de AI precies “snapt” wat je wilt bouwen in 3D is natuurlijk bizar. Ik heb enkel opdrachten gegeven om verbetering aan de game te maken en heb zelf geen enkel lijntje code geschreven. De code is 100% door ChatGPT gegenereerd.
Hoe nu verder?
Of ik de game nog verder ga ontwikkelen is maar de vraag. Het was in ieder geval een leuk experiment! Natuurlijk kun je ook zelf de bovenstaande broncode pakken en ChatGPT vragen er verbetering in te maken of functies toe te voegen!
Of misschien heb je zelf wel een heel ander game-idee. Ik zie graag jullie AI-gegenereerde games in de comments!