Workshop Handout

Game Development met AI & Vibecoding

Van Idee naar Interactie: Programmeer zonder code te schrijven

Welkom! Vandaag ben je geen programmeur, maar een "Product Owner". Jij verzint het spelconcept, de AI bouwt de techniek ("Vibecoding"). We gaan dit doen in 5 niveaus, van simpel delen tot een werkende online database.

Opdracht 1:      Maak een spel                             (beginner)

Opdracht 1a:    Lokaal html-5 bestand              (beginner)

Opdracht 2:      Geheugen (local storage)         (semi-gevorderd)

Opdracht 3:      Publiceren op Github pages    (semi-gevorderd)

Opdracht 4:      Publiceer de ranglijst                 (gevorderd) 

---

Opdracht 1: Maak een spel

We beginnen simpel. Laat de AI een spel maken en deel de link direct via de tool zelf.

De Opdracht:

• Ga naar je AI-tool (bijv. aistudio.google.com).
• Typ een prompt zoals in de workshop besproken
  Denk aan:
  RTF ( Rol, Taak en Format >
      ervaren docent en programmeur, lesontwerp met criteria, één enkele          HTML5-file)
  Criteria: Bijvoorbeeld:
  •Onderwerp
  •Klas
  •Methode
  •Bloom niveau
  •Uitleg + toets?

• Bekijk het resultaat in het voorbeeldvenster. En test het.
  Je kunt nu eventueel stap voor stap om uitbreidingen vragen.
• Geef aan wat je anders wilt, totdat je tevreden bent.
• Klik op de Share/Delen knop van de AI-tool en stuur de link naar je buurman/buurvrouw.

✅ Voordeel: Supersnel (binnen 30 sec) en direct speelbaar.

❌ Nadeel: De link is vaak tijdelijk en je hebt geen controle over de bestanden.

---

Opdracht 1a: Lokaal HTML5 bestand

Je kunt  je spel gana downloaden om het lokaal beschikbaar te maken als je wilt.Je kunt deze stap ook overslaan als jet het voor nu wel best vindt dat het spel via de share link gedeeld wordt.

Het spel "van ons" maken.
We halen de code uit de AI en zetten het op onze eigen computer.

De Opdracht:

1. Vraag de AI: "Geef me de volledige code van dit spel in één enkel HTML-bestand."
2. Klik op de knop Copy Code.
3. Open Kladblok (Windows) of een teksteditor.
4. Plak de code en sla het op als mijnspel.html (kies "Alle bestanden" bij opslaan).
5. Zoek het bestand op in je map en dubbelklik erop om te spelen.

✅ Voordeel: Het bestand is echt van jou en werkt ook zonder internet.

❌ Nadeel: Lastig te delen. Als je het mailt, blokkeren virusscanners het vaak.

---

Stap 2: Het Geheugen (Local Storage)

Spelers balen als hun highscore verdwijnt na een refresh. We bouwen een "lokaal geheugen" in.

De Opdracht:
Vraag de AI om je vorige spel aan te passen met deze prompt:

"Pas het spel aan. Ik wil dat de highscore wordt onthouden, ook als ik de pagina ververs of de browser afsluit. Gebruik hiervoor LocalStorage. Zorg ook dat de huidige score en de highscore allebei duidelijk in beeld staan."

Sla de nieuwe code weer op (overschrijf mijnspel.html) en test het door de pagina te verversen (F5).

✅ Voordeel: Supersnel, gratis en geen ingewikkelde server nodig.

❌ Nadeel: De score staat alleen op jouw apparaat. Je kunt het niet delen met je vrienden of een docent.

---

Stap 3: De Showroom (GitHub Pages) 

We gaan ons lokale bestand nu professioneel "hosten" zodat de hele wereld erbij kan via een echte link.We zijn dan niet meer afhankleijk van de share-options van aistudio of chatgpt, etc. 
Ook als AI niet een enkel html file heeft gemaakt maar een hele rits van bestanden heeft gegenereerd, waaronder index.html, kun je die vaak allemaal op GitHub kwijt. 

De Opdracht:

1. Voorbereiden: Maak een bestand mijnspel.html
   Als je het index.html noemt kun je er later makkelijker naartoe verwijzen.
2. Uploaden: Maak een account/log in op GitHub.com en maak een nieuwe Repository (groene knop 'New'). Geef het een naam (bijv. 'mijn-games').
3. Slepen: Klik op 'Uploading an existing file' en sleep je index.html erin. Klik op 'Commit changes'.
4. Activeren:
   • Ga in je repository naar Settings (bovenin).
   • Klik in het linkermenu op Pages.
   • Zet onder 'Branch' de selectie op main en klik op Save.
5. Wacht 1 minuut en ververs de pagina. Je ziet nu je eigen wereldwijde link!
   Als je het spel index.html hebt genoemd kun je met deze link je spel openen, anders moet je achter de link nog mijnspel.htmll typen ( als dat de naam van je spel is natuurlijk ;))

✅ Voordeel: Een professionele link die altijd en overal werkt (ook op mobiel van leerlingen).

❌ Nadeel: Je project is "Open Source". Iedereen op internet kan jouw bestanden vinden, downloaden en hergebruiken..

---

Stap 4: Publiceer de ranglijst (gevorderd) 

Voor de pro's! Nu je spel online staat, willen we ook dat de scores online gedeeld worden. Je kunt als docent zien of lje leerlingen het spel gespeeld hebben. We koppelen Google Sheets.

Stap A: De Database voorbereiden

1. Maak een nieuwe Google Sheet (typ sheet.new in je browser).
2. Noem het tabblad onderin Scores.
3. Zet in cel A1: Naam en in cel B1: Score.
4. Ga in het menu naar Extensies > Apps Script.

Stap B: De "Brug" bouwen
Verwijder alle tekst in het code-venster en plak onderstaande code erin:

function doGet(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Scores');
  const params = e.parameter;
  
  // Actie 1: Data opslaan (set)
  if (params.action === 'set') {
    sheet.appendRow([params.naam, params.score, new Date()]);
    return ContentService.createTextOutput(JSON.stringify({result: 'success'})).setMimeType(ContentService.MimeType.JSON);
  }
  
  // Actie 2: Data ophalen (get)
  if (params.action === 'get') {
    const data = sheet.getDataRange().getValues();
    data.shift(); // Header rij verwijderen
    // Sorteer van hoog naar laag op kolom B (score)
    data.sort((a, b) => b[1] - a[1]); 
    // Pak de top 10
    const top10 = data.slice(0, 10).map(row => ({naam: row[0], score: row[1]}));
    return ContentService.createTextOutput(JSON.stringify(top10)).setMimeType(ContentService.MimeType.JSON);
  }
}

3. Klik op het Save icoon (Opslaan).
4. Klik op de blauwe knop Implementeren (Deploy) > Nieuwe implementatie.
5. Klik op het tandwiel ⚙️ > Web-app.
6. ZEER BELANGRIJK: Zet 'Wie heeft toegang' op: Iedereen (Anyone).
7. Klik op Implementeren en kopieer de Web App URL.

Stap C: De "Vibecoding" Prompt
Ga terug naar je AI en geef deze specifieke prompt. Vervang de URL met die van jou!

"Bouw het spel om zodat de scores online worden opgeslagen in mijn Google Sheet. Ik heb al een API script opgezet.

Hier is mijn Web App URL: [PLAK HIER JE GEKOPIEERDE URL]

Gebruik deze logica:
1. Om scores op te halen: GET request naar URL + ?action=get
2. Om scores op te slaan: GET request naar URL + ?action=set&naam=SPELERNAAM&score=PUNTEN

Zorg dat ik bij 'Game Over' mijn naam kan invullen en toon daarna de Top 10 lijst die je ophaalt."

---

Meer info over Vibecoding >>