Formål: Kursisten lærer at bruge AI til at udvikle spil trin for trin. Fokus er ikke at forstå hver eneste linje fra start, men at kunne teste, justere og forbedre koden.
10 mere komplicerede spilidéer
| Nr. | Spil | Hvad lærer man? | Niveau |
|---|---|---|---|
| 1 | Snake | Canvas/grid, tastaturstyring, kollision og point. | 3 |
| 2 | Mastermind | Arrays, sammenligninger, forsøg og feedback. | 3 |
| 3 | Asteroids Light | Canvas, bevægelse, skud og kollision. | 3 |
| 4 | Pong | Animation, boldfysik og tastaturstyring. | 2-3 |
| 5 | Breakout | Kollision mellem bold, bat og blokke. | 3 |
| 6 | Space Invaders Light | Fjender, skud, liv og baner. | 3 |
| 7 | Hangman | Ord, bogstavvalg, fejl og spilstatus. | 2 |
| 8 | Blackjack Light | Kort, point, regler og spilrunder. | 2-3 |
| 9 | Simon Says | Sekvenser, hukommelse og stigende sværhed. | 2-3 |
| 10 | Mini RPG-eventyr | Valg, tekst, energi, inventory og spiltilstand. | 3 |
Promptforslag til mere komplicerede spil
Snake – niveau 3
Lav en samlet HTML-fil med HTML, CSS og JavaScript. Lav et simpelt Snake-spil. Spillet skal køre i et canvas. Spilleren styrer slangen med piletasterne. Der skal være mad, som giver point. Hvis slangen rammer væggen eller sig selv, er spillet slut. Der skal være en startknap og en genstartknap. Vis score tydeligt. Koden skal være kommenteret, så en let øvet kursist kan forstå hoveddelene.
Mastermind – niveau 3
Lav en samlet HTML-fil med HTML, CSS og JavaScript. Lav et simpelt Mastermind-spil. Computeren vælger en hemmelig kode med 4 farver. Brugeren vælger 4 farver og klikker "Gæt". Efter hvert gæt skal spillet vise: - hvor mange farver der er helt rigtige - hvor mange farver der er rigtige, men på forkert plads Brugeren har 10 forsøg. Lav et overskueligt design med farvede knapper. Koden skal være samlet i én HTML-fil.
Asteroids Light – niveau 3
Lav en samlet HTML-fil med HTML, CSS og JavaScript. Lav en simpel version af Asteroids. Spillet skal køre i et canvas. Spilleren styrer et rumskib med piletaster. Spilleren kan skyde med mellemrumstasten. Der skal komme asteroider fra forskellige retninger. Hvis et skud rammer en asteroide, får spilleren point. Hvis en asteroide rammer rumskibet, mister spilleren et liv. Hold grafikken enkel med former og farver. Lav en startknap og en game over-skærm.
Breakout – niveau 3
Lav en samlet HTML-fil med HTML, CSS og JavaScript. Lav et simpelt Breakout-spil. Spillet skal have en bold, et bat og blokke. Spilleren styrer battet med musen eller piletasterne. Når bolden rammer en blok, forsvinder blokken og spilleren får point. Hvis bolden falder under battet, mister spilleren et liv. Der skal være 3 liv og en genstartknap. Koden skal være kommenteret i hovedafsnit.
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.
Sådan videreudvikler du spillet med AI
Når første version virker, kan du bede AI om små forbedringer. Tag én ting ad gangen. Ellers bliver koden hurtigt til spaghetti med ekstra sovs.
Design
Bed AI om bedre farver, større knapper, mørk tilstand eller retro arcade-stil.
Spilfunktioner
Tilføj score, highscore, liv, levels, timer eller bonuspoint.
Brugervenlighed
Tilføj startskærm, hjælpetekst, pauseknap og genstartknap.
Kodeforståelse
Bed AI forklare koden i små afsnit og kommentere de vigtigste dele.
Prompt til forbedring
Her er min kode. Kan du forbedre spillet med én ekstra funktion? Tilføj kun: [skriv funktionen her]. Behold resten af spillet så uændret som muligt. Forklar kort hvad du ændrede.
Prompt til fejlsøgning
Mit spil virker ikke som forventet. Problemet er: [beskriv problemet]. Her er min kode: [indsæt koden] Find fejlen og ret koden. Forklar kort og enkelt hvad der var galt.