A101-Games en apps maken met AI artifacts

GAMES EN APPS MAKEN MET AI

Nodig:

Computer met internet

Coderdojo Sint-Niklaas Versie 15/10/2025 1 Auteur: Jimmy DD .

Google Account

INLEIDING

Om spelletjes en apps te maken, gebruik je een programmeertaal. Scratch is een grafische programmeertaal, maar de meeste software wordt gemaakt met een tekstgebaseerde taal zoals Python, C++ of Javascript.

Deze talen zijn super interessant, maar vragen veel tijd om te leren. Bij CoderDojo zijn de sessies vaak te kort om zo'n taal volledig onder de knie te krijgen. Gelukkig kunnen we er wél mee experimenteren door het programma volledig door Artificiële Intelligentie (AI) te laten maken!

WAT IS EEN PROMPT?

We 'programmeren' dus in gewone spreektaal en de AI schrijft de code voor ons. De tekst met instructies die we aan de AI geven, noemen we een prompt .

Enkele voorbeelden van een prompt:

Waarom zijn bananen krom?
Maak een gedicht van 100 woorden.
Programmeer het spel Pong.

WELKE AI GEBRUIKEN WE?

Op elke prompt krijg je een antwoord. Dit kost echter veel rekenkracht van supercomputers en dus veel energie . Omdat iemand die energie moet betalen, heb je meestal een account nodig en is het aantal gratis prompts dat je mag doen beperkt. Zuinig zijn met prompts en eerst goed nadenken is dus de boodschap!

De meest bekende AI chatbot is ChatGPT . In deze opdracht maken we echter gebruik van Gemini PRO van Google, omdat deze erg goed is in programmeren en je vaak meer gratis prompts krijgt.

GOOGLE GEMINI OPSTARTEN

Ga in Chrome naar aistudio.google.com en log in met je Google Account.
Zorg dat links in het menu (klik op ) Chat is geselecteerd.
Zorg dat rechts in het menu (klik op ) een Gemini ... Pro versie is geselecteerd (kies de nieuwste Pro-versie die beschikbaar is).

DE JUISTE PROMPT BEPALEN

Het is belangrijk om duidelijk en exact te beschrijven wat we willen. Stel dat we zouden vragen:

Programmeer alstublieft het spel Pong (tik dit nog niet in)

Er zal een antwoord volgen, maar meestal is dit niet wat we willen. We hebben bijvoorbeeld niet verteld in welke programmeertaal het moet zijn. We willen het spel in de webbrowser (zoals Chrome) kunnen spelen. Een betere prompt is dus:

Programmeer alstublieft het spel Pong in 1 HTML file (tik dit nog niet in)

HTML is de taal die een webbrowser begrijpt. We vragen om alles in "1 file" (één bestand) te stoppen. Zo bevat dat ene bestand meteen de graphics, de opmaak én de Javascript code (de eigenlijke programmeertaal).

Het resultaat zal al beter zijn, maar misschien is het spel niet full-screen. We hebben ook niet verteld of we met de muis of het toetsenbord willen spelen.

Daarom geven we best meteen alles mee wat we al weten in de eerste prompt. Een goed begin is:

Programmeer alstublieft het spel pong in 1 html file. Maak het full screen en maak de besturing met pijltje omhoog en omlaag op het toetsenbord. (tik dit nog niet in)

Met deze prompt is niks mis. Maar als je vaker met AI werkt, zal je merken dat je overbodige woorden mag weglaten om tijd te besparen. De AI vindt kortaf zijn niet erg. Deze prompt bevat evenveel informatie, maar is veel korter:

Spel pong, 1 html, full screen, besturing met pijltoetsen

DE EERSTE PROMPT

Dit is onze definitieve eerste prompt. Geef deze prompt nu in. (in de chat balk) Na even wachten krijg je een antwoord met daarin tekst die begint met <!DOCTYPE html>. Dit is de code van ons spel.

Om het spel uit te voeren, volg je deze stappen:

Zoek boven de code naar het download-icoon om het bestand op te slaan. Klik hierop om het bestand in de Download folder te bewaren.
Klik nu rechtsboven in Chrome op het download-icoon en klik op het html bestand dat je net hebt binnengehaald, dit staat bovenaan.

Normaal start nu je spel in een nieuw tabblad!

VERVOLG PROMPTS

De kans is groot dat het spel meteen werkt. Is dat niet zo? Dan moeten we in een nieuwe prompt vertellen wat er mis is, zodat de AI een verbeterde versie kan maken.

Voorbeelden van prompts om fouten op te lossen:

De bal beweegt niet.
De plank (paddle) beweegt niet met de toetsen.
De bal botst niet terug van de muren.

Sla deze stap over als het spel werkt . Als het niet werkt, geef de prompt in (met de beschrijving van het probleem) en download het nieuwe HTML-bestand en voer het uit. Herhaal dit tot het werkt!

HET SPEL UITBREIDEN

We hebben een goede basis. Nu gaan we extra's toevoegen. Je kan in één prompt zoveel extra's vragen als je wil. Geef nu de volgende prompt in (in dezelfde chat):

Voeg een scorebord toe: 5 strafpunten bij missen van de bal, en 1 punt bij raken van de bal. Maak een geluidje bij het botsen. Maak de bal groter en rood.

Lees aandachtig het antwoord . De AI zal een samenvatting maken van je verzoek. Dit is belangrijk zodat je weet of de AI jouw prompt wel goed begrepen heeft!

Er wordt een nieuw HTML-bestand gemaakt. Download dit en voer het uit.

Tip: Sluit bij elke nieuwe versie het tabblad van het vorige spel, zodat je niet per ongeluk in een oud spel aan het testen bent.

Werkt er iets niet? Geef dan opnieuw een prompt met de beschrijving van het probleem.

PONG MET 2 SPELERS

We voegen nog iets toe zodat we samen met vrienden kunnen spelen: een 2 speler modus. We moeten goed nadenken hoe we dit duidelijk maken aan de AI. Een goede prompt kan zijn:

Maak een 2 speler versie: Speler 1 gebruikt pijltje omhoog/omlaag. Speler 2 gebruikt toets Z voor omhoog en S voor omlaag.

Voeg zelf nog zoveel extra's toe als je wil . Denk aan andere kleuren, achtergronden, obstakels of meerdere ballen. Een willekeurig voorbeeld voor een uitbreiding:

Maak een intro scherm met keuze voor 1 of 2 spelers

KLAAR VOOR JE EIGEN SPEL OF APP!

Proficiat, je kan nu programmeren met AI! Volg steeds deze tips :

Zeg in de allereerste prompt altijd: Maak ... in 1 HTML file .
Wees kort maar duidelijk (samenvatting stijl).
Vermeld meteen alle basisfuncties die je wil hebben.
Als iets niet werkt: beschrijf het probleem in de volgende prompt.
Lees aandachtig het antwoord om te controleren dat AI je opdracht goed begrepen heeft en geen zaken die je niet wou heeft bij verzonnen
Beperk het aantal prompts: denk goed na over een prompt. Als je te veel prompts na elkaar ingeeft, kan je snel de gratis limiet bereiken.
Belangrijk : Als je met een compleet nieuw idee begint, start dan een nieuwe chat (klik links op "Chat").

BEDENK EERST WAT JE WIL MAKEN

Heb je weinig inspiratie? Vraag de AI dan om ideeën met deze prompt:

Geef 50 ideeën voor een game of app die ik met AI kan maken

Heb je een idee? Perfect! Start een nieuwe chat en ga op dezelfde manier tewerk als bij Pong. Hier is een voorbeeld van de reeks prompts voor een Flappy Bird spel:

maak flappy bird in 1 HTML file, full screen, besturing met spatiebalk
de pijpen staan te dicht op elkaar. voeg een score toe.
teken een gele vogel in plaats van een rechthoek, maak de achtergrond lichtblauw en voeg wolken toe.
voeg geluid toe en maak een 'game over' scherm en een intro scherm.

Je hoeft deze prompts niet in te geven , het is maar een voorbeeld van een start prompt, gevolgd door aanpassingen en verbeteringen.

Werk je eigen idee uit en toon het op de Show Tell!

We kijken uit naar jouw eigen games en apps!

Meer info vind je op: https://drive.google.com/file/d/1u4KSi0anTpiFqtPq36cmQX5L1bUb-PfP/view?usp=drive_link