Formål: Kursisten skal opleve hurtige succeser og forstå, at AI kan hjælpe med at bygge små browser-spil. Fokus er på idé, prompt, test og forbedring.
10 lettere spilidéer
| Nr. | Spil | Hvad lærer man? | Niveau |
|---|---|---|---|
| 1 | Slotmaskine | Tilfældige symboler, knap, resultatbesked. | 1 |
| 2 | Terningespil | Random-tal, point, simpel vinderlogik. | 1 |
| 3 | Møntkast | If/else, tilfældighed og visning af resultat. | 1 |
| 4 | Sten, saks, papir | Betingelser, brugerens valg mod computerens valg. | 1-2 |
| 5 | Gæt et tal | Inputfelt, feedback og antal forsøg. | 1-2 |
| 6 | Klik-spil | Pointtæller, tid og simple events. | 2 |
| 7 | Bingo-generator | Arrays, tal og tilfældig udvælgelse. | 2 |
| 8 | Memory Light | Kort, match, klik og spiltilstand. | 2 |
| 9 | Domino Light | Simple brikker, matchende tal og turbaseret logik. | 2 |
| 10 | Digital lykkekage | Tilfældige beskeder, arrays og knapfunktion. | 1 |
Promptforslag til de lettere spil
Slotmaskine – niveau 1
Lav en samlet HTML-fil med HTML, CSS og JavaScript. Lav et simpelt slotmaskinespil. Der skal være tre felter med symboler. Brug emojis som 🍒 🍋 ⭐ 💎 🔔. Brugeren klikker på en knap med teksten "Spin". Hvis alle tre symboler er ens, skal der stå "Jackpot!". Hvis to symboler er ens, skal der stå "Næsten!". Ellers skal der stå "Prøv igen". Designet skal være farverigt, enkelt og virke direkte i browseren.
Terningespil – niveau 1
Lav en samlet HTML-fil med HTML, CSS og JavaScript. Lav et simpelt terningespil for én spiller. Spilleren klikker på "Kast terning". Vis et tal fra 1 til 6. Hold styr på spillerens samlede point. Hvis spilleren slår 6, skal der vises en sjov besked. Designet skal være let at læse og kunne åbnes direkte i browseren.
Sten, saks, papir – niveau 1-2
Lav en samlet HTML-fil med HTML, CSS og JavaScript. Lav spillet Sten, saks, papir. Brugeren skal kunne vælge Sten, Saks eller Papir med tre knapper. Computeren skal vælge tilfældigt. Vis hvem der vinder runden. Vis også en samlet score for bruger og computer. Designet skal være enkelt og tydeligt for begyndere.
Domino Light – niveau 2
Lav en samlet HTML-fil med HTML, CSS og JavaScript. Lav et meget simpelt domino-spil. Brugeren får 5 dominobrikker med to tal på hver. Der ligger én startbrik på bordet. Brugeren skal klikke på en brik, der matcher et af tallene på startbrikken. Hvis brikken passer, får brugeren point. Hvis den ikke passer, vises en venlig fejlbesked. Hold spillet simpelt og forklar kort reglerne på siden.
Sådan gemmer du koden som en HTML-fil
Når ChatGPT eller Gemini har lavet kode til dig, skal den gemmes som en fil, som browseren kan åbne.
Metode med Notesblok i Windows
- Åbn Notesblok.
- Kopiér hele koden fra AI-værktøjet.
- Sæt koden ind i Notesblok.
- Klik på Filer → Gem som.
- Vælg en mappe, fx Skrivebordet.
- Skriv filnavnet sådan:
mit-spil.html - Ved Filtype vælger du Alle filer.
- Ved Kodning vælger du gerne UTF-8.
- Klik Gem.
Vigtigt: Filen må ikke ende med
.txt. Den skal hedde fx slotmaskine.html og ikke slotmaskine.html.txt. Windows kan godt finde på at lave små numre her. Klassisk Windows-humor.
Sådan åbner du filen i browseren
- Find filen på din computer.
- Dobbeltklik på filen.
- Den åbner normalt i Edge, Chrome eller Firefox.
- Hvis den ikke åbner rigtigt: højreklik på filen og vælg Åbn med.
Når du vil rette i koden
- Højreklik på HTML-filen.
- Vælg Åbn med → Notesblok.
- Ret koden.
- Gem filen.
- Gå tilbage til browseren og tryk F5 for at opdatere.
Prompt til at få én samlet HTML-fil
Lav spillet som én samlet HTML-fil. HTML, CSS og JavaScript skal være i samme fil. Filen skal kunne gemmes som .html og åbnes direkte i en browser. Brug ingen eksterne filer, biblioteker eller installationer.
Arbejdsmodel for kursisten
- Vælg et spil fra listen.
- Brug prompten i ChatGPT eller Gemini.
- Kopiér koden over i Notesblok.
- Gem som
spilnavn.html. - Åbn filen i browseren.
- Test alle knapper.
- Bed AI om én forbedring ad gangen.
God øvelse: Start med slotmaskinen. Bed derefter AI om at tilføje point, lydløs “jubeltekst”, flere symboler eller en nulstil-knap.