Spiele entwickeln mit KI


Spiele entwickeln mit KI
Kurzbeschreibung des Projekts
Spiele entwickeln und programmieren mit KI ist ein dreitägiges Projekt, in dem Du ein eigenes Spiel planst, mit Unterstützung von KI programmierst, testest, verbesserst und präsentierst.
Du kannst je nach Erfahrung ein einfaches Klick- oder Fangspiel mit p5.js, ein kleines HTML- oder JavaScript-Spiel, ein Quiz, ein Arduino-Spiel oder eine komplexere Website beziehungsweise App entwickeln. ChatGPT und Gemini helfen Dir bei Ideen, Code, Erklärungen und Fehlersuche. Wenn Du schon fortgeschrittener bist, kannst Du auch mit Codex oder Google Antigravity arbeiten.
Am Ende stellst Du Dein Spiel in einer kleinen Game Gallery vor und zeigst, was funktioniert, was Du gelernt hast und wobei Dir KI geholfen hat.
Sammlung alle Spiele auf Kult-Spiel.de, Alle KI-Spiele & Schulduell

Voraussetzungen
- Interesse an Spielen, Technik oder kreativen Ideen
- Bereitschaft, neue digitale Werkzeuge auszuprobieren
- Grundkenntnisse am Computer, zum Beispiel Browser nutzen, kopieren, speichern
- Keine Programmierkenntnisse nötig für einfache Projekte
- Erste Erfahrungen mit HTML, CSS, JavaScript oder Arduino hilfreich für schwierigere Projekte
- Geduld beim Testen, Ausprobieren und Verbessern
- Bereitschaft, mit KI zu arbeiten und ihre Ergebnisse kritisch zu prüfen
- Bereitschaft, Dein Projekt am Ende kurz vorzustellen
Geeignete Zielgruppe
- Schüler:innen ab etwa Klasse 6 oder 7 für einfache p5.js-, Quiz- oder HTML-Projekte
- Schüler:innen ab etwa Klasse 8 für JavaScript-, Arduino- oder komplexere Webprojekte
- Geeignet für Anfänger:innen und Fortgeschrittene, weil Du den Schwierigkeitsgrad selbst wählen kannst
Zugänge und technische Voraussetzungen
Wünschenswert ist ein eigener ChatGPT-Account oder ein Google-Account. Damit kannst Du KI-Tools wie ChatGPT oder Gemini nutzen, Prompts speichern und an Deinem Projekt weiterarbeiten.


Spiele entwickeln mit KI
Projekttage: Spiele entwickeln und programmieren mit KI
Thema: Spiele entwickeln, programmieren, testen und präsentieren mit Unterstützung von ChatGPT, Gemini, Codex, Google Antigravity, p5.js, HTML, CSS, JavaScript, Arduino und weiteren digitalen Werkzeugen.
Grundidee: Die Schüler:innen entwickeln in drei Projekttagen ein eigenes digitales oder physisches Spiel. Der Schwierigkeitsgrad ist offen: Möglich sind sehr einfache Spiele mit p5.js, kleine HTML-Seiten, veröffentlichbare Webspiele, interaktive Quizspiele, Arduino-Spiele mit Tastern und LEDs oder komplexere Internetseiten und App-Prototypen mit Unterstützung von Codex und Google Antigravity.
Zentrale Idee: Nicht alle Schüler:innen müssen dasselbe Produkt erstellen. Entscheidend ist, dass alle auf ihrem Niveau ein eigenes Spiel planen, mit KI-Unterstützung umsetzen, testen, verbessern und präsentieren.
Leitfrage
Wie kann ich mit Unterstützung von KI ein eigenes Spiel planen, programmieren, testen, verbessern und präsentieren?
Ziel der Projekttage
Die Projekttage sollen nicht nur zeigen, dass KI Code erzeugen kann. Die Schüler:innen sollen verstehen, wie aus einer Idee ein funktionierendes Spiel entsteht. Dabei lernen sie, gute Prompts zu schreiben, Code zu testen, Fehler zu beschreiben, mit KI zu debuggen, eigene Entscheidungen zu treffen und ein fertiges Produkt verständlich zu präsentieren.
Pädagogische Grundidee
Die KI ist nicht der Ersatz für eigenes Denken, sondern ein Entwicklungshelfer. Die Schüler:innen sollen KI nutzen, um Ideen zu finden, Code-Vorschläge zu erhalten, Fehler zu verstehen und Verbesserungen umzusetzen. Gleichzeitig müssen sie ihr Spiel selbst planen, testen, verändern, erklären und verantworten.
Mögliche Produkte
| Schwierigkeitsgrad | Produkt | Geeignete Tools | Typische Ergebnisse |
|---|---|---|---|
| Sehr leicht | Einfaches p5.js-Spiel | ChatGPT, Gemini, p5.js-Webeditor | Klickspiel, Fangspiel, Reaktionsspiel, Ziel treffen, Punkte sammeln |
| Leicht | Interaktives Spiel mit HTML, CSS und JavaScript | ChatGPT, Gemini | Quizspiel, Memory, Escape-Room-Seite, Mini-Webspiel |
| Mittel | Spiel mit mehreren Spielzuständen | ChatGPT, Gemini, p5.js, JavaScript | Startbildschirm, Punkte, Timer, Level, Leben, Game Over |
| Mittel bis schwer | Physisches Spiel mit Arduino | ChatGPT, Arduino IDE, Arduino Cloud Editor | Reaktionsspiel, LED-Spiel, Buzzer-Spiel, Sensor-Spiel, (Beispiel: Arduino-Quiz mit ESP32 und Smartphones) |
| Schwer | Mehrseitige Website oder Spielesammlung | ChatGPT, Codex, Google Antigravity | Startseite, Spielseite, Anleitung, Levelauswahl, Highscore-Idee |
| Sehr schwer | App-Prototyp oder komplexere Internetseite | Codex, Google Antigravity, optional React | Web-App, Lernspiel, Quizplattform, Spielgenerator, Fortschrittssystem |
Sammlung alle Spiele auf Kult-Spiel.de & Schulduell
Kompetenzen
- Die Schüler:innen entwickeln eine eigene Spielidee mit Ziel, Regeln, Steuerung und Spielende.
- Die Schüler:innen formulieren sinnvolle Prompts für ChatGPT, Gemini, Codex oder Google Antigravity.
- Die Schüler:innen testen KI-generierten Code kritisch und übernehmen ihn nicht ungeprüft.
- Die Schüler:innen erkennen einfache Code-Strukturen wie Variablen, Funktionen, Bedingungen und Schleifen.
- Die Schüler:innen beschreiben Fehler so genau, dass die KI beim Debugging helfen kann.
- Die Schüler:innen verbessern ihr Spiel durch Feedback, Tests und eigene Entscheidungen.
- Die Schüler:innen dokumentieren, wobei KI geholfen hat und was sie selbst entschieden haben.
- Die Schüler:innen präsentieren ihr Spiel verständlich und reflektieren den Entwicklungsprozess.
- Die Schüler:innen erfahren, dass Programmieren ein Prozess aus Ausprobieren, Scheitern, Verbessern und Weiterentwickeln ist.
Grundregeln für den KI-Einsatz
- Keine persönlichen Daten in KI-Tools eingeben.
- Jede wichtige KI-Hilfe dokumentieren, zum Beispiel durch gespeicherte Prompts.
- Fehler genau beschreiben, statt nur zu schreiben: „Es geht nicht.“
- Code immer testen, weil KI auch fehlerhaften Code erzeugen kann.
- Änderungen einzeln einbauen, damit Fehler leichter gefunden werden.
- Am Ende erklären können, welche Code-Stellen besonders wichtig sind.
- Die eigene Spielidee bleibt wichtiger als die KI-Antwort.
- KI darf vereinfachen, erklären und helfen, aber nicht die Verantwortung übernehmen.
Rolle der Lehrkraft
Die Lehrkraft ist während der Projekttage nicht hauptsächlich Wissensvermittler:in, sondern Projektcoach. Sie hilft bei der Auswahl eines passenden Schwierigkeitsgrades, achtet auf realistische Ziele, unterstützt beim Debugging, stellt technische Vorlagen bereit und sorgt dafür, dass KI sinnvoll und reflektiert eingesetzt wird.
Vorbereitung durch die Lehrkraft
- Einen gemeinsamen Einstieg mit einem sehr einfachen p5.js-Spiel vorbereiten.
- Einen Raum oder mehrere Arbeitsbereiche einrichten.
- Prüfen, ob alle Geräte Internetzugang haben.
- Den p5.js-Webeditor vorher testen.
- Einen einfachen HTML-Projektordner mit index.html, style.css und script.js vorbereiten.
- Falls Arduino angeboten wird, Boards, Kabel, LEDs, Widerstände, Buttons, Buzzer und Breadboards vorbereiten.
- Beispielprojekte für unterschiedliche Niveaus bereithalten.
- Promptkarten ausdrucken oder digital bereitstellen.
- Eine Vorlage für den Projektsteckbrief vorbereiten.
- Einen gemeinsamen Speicherort für Dateien festlegen.
- Klären, ob Veröffentlichungen nur intern oder auch online erfolgen dürfen.
- Datenschutzregeln für KI-Tools besprechen.
- Entscheiden, ob einzeln, zu zweit oder in Kleingruppen gearbeitet wird.
- Für schwächere Gruppen vorbereitete Startcodes bereithalten.
- Für starke Gruppen anspruchsvollere Projektideen vorbereiten.
Empfohlene Gruppengröße
- Einzelarbeit eignet sich für sehr starke Schüler:innen oder einfache p5.js-Projekte.
- Partnerarbeit eignet sich besonders gut, weil eine Person testen und eine Person programmieren kann.
- Dreiergruppen eignen sich für größere Projekte mit Rollenverteilung.
- Größere Gruppen sind nur sinnvoll, wenn ein komplexes Projekt mit klaren Aufgaben geplant ist.
Rollen in einer Gruppe
| Rolle | Aufgabe | Typische Frage |
|---|---|---|
| Game Designer:in | Achtet auf Spielidee, Regeln, Level, Schwierigkeit und Spielspaß. | Macht das Spiel Spaß? |
| Coder:in | Arbeitet am Code und testet Veränderungen. | Funktioniert der Code? |
| KI-Manager:in | Formuliert Prompts, sammelt KI-Antworten und dokumentiert die KI-Nutzung. | Ist der Prompt genau genug? |
| Tester:in | Spielt regelmäßig Probe und notiert Fehler oder Verbesserungsideen. | Was passiert beim Spielen wirklich? |
| Präsentator:in | Bereitet Projektkarte, Erklärung und Abschlusspräsentation vor. | Können andere unser Spiel verstehen? |
Gesamtstruktur der drei Projekttage
| Tag | Schwerpunkt | Zentrales Ergebnis |
|---|---|---|
| Tag 1 | Ideen finden, KI sinnvoll nutzen, ersten Prototyp bauen | Ein einfaches spielbares Grundgerüst |
| Tag 2 | Entwickeln, debuggen, verbessern, erweitern | Eine deutlich verbesserte Spielversion |
| Tag 3 | Fertigstellen, sichern, veröffentlichen oder vorführen, präsentieren | Fertiges Projekt mit Reflexion und Game Gallery |
Projekttag 1: Von der Spielidee zum ersten Prototyp
Ziel des ersten Tages: Alle Schüler:innen sollen ein erstes lauffähiges Spiel oder eine erste interaktive Anwendung erstellen. Es geht noch nicht um Perfektion, sondern um ein schnelles Erfolgserlebnis und ein klares Projektziel.
Ablauf Tag 1
| Zeit | Phase | Inhalt | Ergebnis |
|---|---|---|---|
| 08:00–08:20 | Einstieg | Beispiele zeigen: Klickspiel, Fangspiel, Quiz, Arduino-Reaktionsspiel, kleine Website | Schüler:innen sehen, was möglich ist |
| 08:20–08:45 | Was ist ein Spiel? | Spielziel, Regeln, Steuerung, Hindernisse, Punkte, Sieg und Niederlage klären | Gemeinsames Grundverständnis |
| 08:45–09:15 | KI als Entwicklungshelfer | Gute und schlechte Prompts vergleichen | Erste Promptregeln |
| 09:15–10:15 | Gemeinsamer p5.js-Einstieg | Alle bauen ein einfaches Klickspiel | Erstes funktionierendes Spiel |
| 10:15–10:30 | Pause | Kurze Unterbrechung | Erholung |
| 10:30–11:00 | Projektwahl | Schüler:innen wählen Niveau, Tool und Spielidee | Projektidee steht |
| 11:00–12:00 | Prototyping | Erste eigene Version bauen | Spielbares Grundgerüst |
| 12:00–12:35 | Testphase | Andere Schüler:innen testen den Prototyp | Erste Verbesserungsliste |
| 12:35–13:00 | Tagesabschluss | Kurzer Statusbericht | Plan für Tag 2 |
Schritt-für-Schritt-Anleitung: Einstieg mit p5.js
- Öffne den p5.js-Webeditor.
- Klicke auf New Sketch oder öffne ein leeres Projekt.
- Schaue dir zuerst an, welche Teile bereits vorhanden sind.
- Besprich kurz die beiden wichtigsten Funktionen: setup() startet das Programm, draw() läuft immer wieder.
- Kopiere einen einfachen Startcode in den Editor.
- Klicke auf Play.
- Prüfe, ob ein Spielfeld erscheint.
- Verändere eine Farbe.
- Verändere die Größe des Kreises.
- Verändere den Text.
- Klicke erneut auf Play.
- Speichere die erste funktionierende Version.
- Notiere, was im Code geändert wurde.
- Frage die KI erst danach nach einer Verbesserung.
Minimaler Startcode für ein p5.js-Klickspiel
<syntaxhighlight lang="javascript"> let x; let y; let punkte = 0; let startZeit; let spielDauer = 30;
function setup() {
createCanvas(600, 400); x = random(width); y = random(height); startZeit = millis();
}
function draw() {
background(240);
let vergangeneZeit = int((millis() - startZeit) / 1000); let restZeit = spielDauer - vergangeneZeit;
fill(0);
textSize(20);
text("Punkte: " + punkte, 20, 30);
text("Zeit: " + restZeit, 20, 60);
if (restZeit <= 0) {
textSize(40);
text("Spiel vorbei!", 190, 200);
noLoop();
return;
}
fill(50, 150, 255); ellipse(x, y, 50, 50);
}
function mousePressed() {
let abstand = dist(mouseX, mouseY, x, y);
if (abstand < 25) {
punkte = punkte + 1;
x = random(width);
y = random(height);
}
} </syntaxhighlight>
Schüler:innen-Auftrag zum Startspiel
- Starte das Klickspiel im p5.js-Webeditor.
- Spiele es einmal vollständig durch.
- Verändere die Farbe des Kreises.
- Verändere die Größe des Spielfeldes.
- Verändere die Spielzeit.
- Verändere den Text „Spiel vorbei!“.
- Baue eine eigene Schwierigkeit ein.
- Speichere deine Version.
- Erkläre einer anderen Person, welche drei Dinge du geändert hast.
Beispiele für einfache Änderungen am Startspiel
| Änderung | Was wird verändert? | Warum ist das sinnvoll? |
|---|---|---|
| Andere Kreisfarbe | Der Wert in fill(50, 150, 255) wird verändert. | Die Schüler:innen sehen sofort eine sichtbare Wirkung. |
| Andere Spielzeit | Die Variable spielDauer wird angepasst. | Die Schwierigkeit kann leicht verändert werden. |
| Kleinerer Kreis | Die Größe in ellipse(x, y, 50, 50) wird reduziert. | Das Spiel wird schwieriger. |
| Punktabzug bei Fehlklick | In mousePressed() wird ein else ergänzt. | Das Spiel bekommt eine echte Herausforderung. |
| Zielpunktzahl | Bei einer bestimmten Punktzahl endet das Spiel. | Das Spiel bekommt ein klares Ziel. |
Mögliche Erweiterungen für das Startspiel
- Der Kreis wird nach jedem Treffer kleiner.
- Der Kreis bekommt nach jedem Treffer eine andere Farbe.
- Es gibt einen roten Kreis, der Punkte abzieht.
- Das Spiel bekommt einen Startbildschirm.
- Das Spiel bekommt einen Game-over-Bildschirm.
- Der Punktestand wird größer angezeigt.
- Es gibt verschiedene Level.
- Es gibt ein Ziel, zum Beispiel 20 Punkte in 30 Sekunden.
- Es gibt eine Spielfigur statt eines Kreises.
- Es gibt Soundeffekte.
- Es gibt einen Highscore.
- Es gibt eine falsche Zielscheibe.
- Es gibt eine kurze Anleitung vor dem Start.
- Es gibt eine steigende Geschwindigkeit.
- Es gibt Bonusobjekte mit Extrapunkten.
Guter Einstiegsprompt für p5.js
<syntaxhighlight lang="text"> Erstelle ein sehr einfaches p5.js-Spiel für Anfänger:innen.
Spielidee: Man muss einen Kreis anklicken. Wenn man ihn trifft, bekommt man einen Punkt und der Kreis erscheint an einer neuen zufälligen Stelle. Nach 30 Sekunden endet das Spiel.
Bitte schreibe den Code so, dass ich ihn direkt in den p5.js-Webeditor kopieren kann.
Wichtig: Der Code soll einfach sein. Der Code soll kurze Kommentare enthalten. Erkläre danach die wichtigsten Stellen in einfacher Sprache. </syntaxhighlight>
Schritt-für-Schritt-Anleitung: Eigene Spielidee entwickeln
- Schreibe einen Arbeitstitel für dein Spiel auf.
- Formuliere in einem Satz, was man im Spiel erreichen muss.
- Entscheide, wie man das Spiel steuert.
- Entscheide, wann man Punkte bekommt.
- Entscheide, wann man verliert.
- Entscheide, wann man gewinnt.
- Zeichne eine einfache Skizze des Spielfeldes.
- Schreibe auf, welche Figuren, Gegenstände oder Hindernisse vorkommen.
- Schreibe auf, was in der ersten einfachen Version unbedingt funktionieren muss.
- Schreibe auf, welche Erweiterungen später möglich wären.
- Formuliere daraus einen Prompt für die KI.
- Prüfe die KI-Antwort und entscheide, ob sie zu deiner Idee passt.
- Starte mit einer einfachen Version und füge erst später Extras ein.
Vorlage: Spielidee
| Frage | Antwort |
|---|---|
| Wie heißt das Spiel? | |
| Was ist das Ziel? | |
| Wie wird gesteuert? | |
| Wann bekommt man Punkte? | |
| Was macht das Spiel schwierig? | |
| Wann ist das Spiel vorbei? | |
| Was soll in Version 1 funktionieren? | |
| Was wäre eine Erweiterung? |
Zusätzliche Beispielideen für Schüler:innen
| Spielidee | Grundmechanik | Einfache Version | Erweiterung |
|---|---|---|---|
| Meteor Dodge | Eine Figur weicht fallenden Meteoriten aus. | Spielfigur links und rechts bewegen. | Mehr Meteoriten, Leben, Level. |
| Apfel-Fänger | Ein Korb fängt fallende Äpfel. | Punkte für jeden Apfel. | Faule Äpfel ziehen Punkte ab. |
| Mathe-Quiz-Duell | Fragen lösen und Punkte sammeln. | Eine Frage nach der anderen. | Zeitlimit, Joker, Schwierigkeitsstufen. |
| Labyrinth-Flucht | Eine Figur muss ein Ziel erreichen. | Wände nicht berühren. | Gegner, Schlüssel, Türen. |
| Alien-Klicker | Aliens erscheinen zufällig und müssen angeklickt werden. | Punkte pro Treffer. | Gute und schlechte Aliens. |
| Vokabel-Retter | Richtige Übersetzung auswählen. | Drei Antwortbuttons. | Levels nach Schwierigkeit. |
| Mülltrennungs-Spiel | Gegenstände in richtige Tonnen sortieren. | Drag-and-drop oder Klickauswahl. | Timer, Fehlermeldungen, Erklärung. |
| Arduino-Reaktionstest | LED leuchtet, Button muss schnell gedrückt werden. | LED und Button. | Buzzer, mehrere LEDs, Bestenliste. |
Projekttag 2: Entwicklungswerkstatt
Ziel des zweiten Tages: Aus dem ersten Prototyp wird ein echtes Spiel. Die Schüler:innen arbeiten an Funktionen, Gestaltung, Schwierigkeit, Fehlerbehebung und Spielspaß. Die KI wird gezielt als Entwicklungs- und Debugginghilfe eingesetzt.
Ablauf Tag 2
| Zeit | Phase | Inhalt | Ergebnis |
|---|---|---|---|
| 08:00–08:15 | Stand-up | Jede Gruppe nennt den aktuellen Stand und das Tagesziel. | Klarer Arbeitsauftrag |
| 08:15–08:45 | Debugging lernen | Fehler beschreiben, Fehlermeldungen nutzen, KI gezielt fragen. | Debugging-Methode |
| 08:45–10:15 | Entwicklungsblock 1 | Programmieren, testen, verbessern. | Version 2 |
| 10:15–10:30 | Pause | Kurze Unterbrechung. | Erholung |
| 10:30–11:00 | Zwischentest | Andere Gruppe testet das Spiel. | Feedback |
| 11:00–12:00 | Entwicklungsblock 2 | Feedback einarbeiten, Design verbessern, Fehler beheben. | Fast fertige Version |
| 12:00–12:40 | Dokumentation | Projektsteckbrief und KI-Nachweis ausfüllen. | Präsentationsgrundlage |
| 12:40–13:00 | Tagesabschluss | Ampelstatus: grün, gelb oder rot. | Plan für Tag 3 |
Schritt-für-Schritt-Anleitung: Debugging mit KI
- Spiele dein Spiel langsam und aufmerksam.
- Notiere genau, was nicht funktioniert.
- Schreibe auf, was eigentlich passieren sollte.
- Kopiere die Fehlermeldung vollständig.
- Kopiere den aktuellen Code vollständig.
- Frage die KI nicht allgemein „Was ist falsch?“.
- Beschreibe der KI zuerst das Ziel des Codes.
- Beschreibe dann das tatsächliche Problem.
- Bitte die KI, nur die nötigen Stellen zu ändern.
- Vergleiche die neue Version mit deiner alten Version.
- Übernimm nicht sofort alles.
- Teste die Änderung.
- Speichere eine funktionierende Version.
- Notiere, welcher Fehler behoben wurde.
Typische Fehler und passende KI-Fragen
| Problem | Mögliche Ursache | Gute KI-Frage |
|---|---|---|
| Der Bildschirm bleibt leer. | Fehler in einer Klammer, falscher Funktionsname, Code nicht gestartet. | „Warum bleibt mein p5.js-Canvas leer? Prüfe bitte Klammern, Funktionsnamen und setup()/draw().“ |
| Die Figur bewegt sich nicht. | Tastaturabfrage falsch, Variable wird nicht verändert. | „Meine Figur soll sich mit den Pfeiltasten bewegen, bleibt aber stehen. Prüfe bitte nur die Bewegungslogik.“ |
| Punkte werden nicht gezählt. | Kollisionsabfrage falsch, Punktestand wird nicht aktualisiert. | „Warum erhöht sich meine Punktzahl nicht, obwohl ich das Ziel treffe?“ |
| Das Spiel endet sofort. | Timer falsch berechnet, Startzeit nicht gesetzt. | „Mein Timer springt sofort auf 0. Bitte prüfe die Zeitberechnung.“ |
| HTML und JavaScript verbinden sich nicht. | Falscher Dateiname, Script falsch eingebunden, Element-ID stimmt nicht. | „Mein Button reagiert nicht. Prüfe bitte, ob HTML-ID und JavaScript-Code zusammenpassen.“ |
Debugging-Prompt
<syntaxhighlight lang="text"> Mein Spiel funktioniert nicht richtig.
Das sollte passieren: [Hier beschreiben, was passieren sollte.]
Das passiert stattdessen: [Hier beschreiben, was tatsächlich passiert.]
Fehlermeldung: [Hier die Fehlermeldung einfügen.]
Hier ist mein Code: [Hier den Code einfügen.]
Bitte: 1. Erkläre mir den Fehler in einfacher Sprache. 2. Verändere nur das Nötigste. 3. Gib mir den verbesserten vollständigen Code. 4. Markiere, welche Stelle geändert wurde. </syntaxhighlight>
Schritt-für-Schritt-Anleitung: Spiel verbessern
- Teste zuerst die aktuelle Version.
- Entscheide dich für genau eine Verbesserung.
- Baue nicht mehrere neue Funktionen gleichzeitig ein.
- Formuliere die gewünschte Verbesserung genau.
- Frage die KI nach einem kleinen Änderungsvorschlag.
- Vergleiche den neuen Code mit deinem alten Code.
- Teste die Änderung.
- Speichere die funktionierende Version.
- Notiere, was verbessert wurde.
- Wiederhole den Ablauf mit der nächsten Verbesserung.
Verbesserungs-Prompt
<syntaxhighlight lang="text"> Mein Spiel funktioniert grundsätzlich.
Aktueller Stand: [Beschreibe kurz dein Spiel.]
Ich möchte genau eine Verbesserung einbauen: [Zum Beispiel: Startbildschirm, Timer, Punkte, Level, Hindernisse, Game Over, Sound, bessere Steuerung.]
Bitte: 1. Erkläre zuerst kurz, wie diese Verbesserung technisch funktionieren kann. 2. Gib mir danach den vollständigen verbesserten Code. 3. Kommentiere die neuen Stellen. 4. Erkläre mir am Ende, welche Variablen oder Funktionen neu sind. </syntaxhighlight>
Werkstatt A: p5.js-Spiele
Geeignet für: Anfänger:innen und mittlere Gruppen.
Typische Projekte: Fangspiel, Klickspiel, Reaktionsspiel, Ausweichspiel, Labyrinth, einfaches Jump-and-Run.
Schritt-für-Schritt-Anleitung für ein p5.js-Spiel
- Öffne den p5.js-Webeditor.
- Erstelle ein neues Projekt.
- Lege fest, ob dein Spiel mit Maus oder Tastatur gesteuert wird.
- Erstelle zuerst ein Spielfeld.
- Erstelle danach eine Spielfigur.
- Erstelle danach ein Zielobjekt.
- Programmiere eine einfache Bewegung.
- Programmiere eine einfache Kollision.
- Programmiere Punkte.
- Programmiere ein Spielende.
- Teste das Spiel.
- Verbessere die Steuerung.
- Ergänze Gestaltung.
- Ergänze eine Anleitung im Startbildschirm.
- Speichere die finale Version.
Beispiele für p5.js-Projekte
| Projekt | Grundidee | Einfache Version | Schwierige Erweiterung |
|---|---|---|---|
| Fang den Stern | Eine Figur sammelt Sterne. | Bewegung mit Pfeiltasten. | Gegner, Level, Timer. |
| Schatz im Labyrinth | Man muss durch ein Labyrinth zum Schatz. | Wände dürfen nicht berührt werden. | Schlüssel, Türen, Gegner. |
| Reaktionskreis | Erst klicken, wenn der Kreis grün wird. | Zufällige Wartezeit. | Fehlstart-Erkennung, Reaktionszeitmessung. |
| Monster ausweichen | Spielfigur weicht Monstern aus. | Ein Gegner bewegt sich. | Mehr Gegner, steigende Geschwindigkeit. |
| Mini-Jump-and-Run | Eine Figur springt über Hindernisse. | Sprung und Boden. | Plattformen, Münzen, Level. |
Werkstatt B: HTML-Spiel oder interaktive Website
Geeignet für: Schüler:innen, die eine veröffentlichbare Website oder ein einfaches Webspiel erstellen möchten.
Typische Projekte: Quizspiel, Escape-Room-Seite, Lernspiel, Charakter-Generator, Spielesammlung.
Schritt-für-Schritt-Anleitung für ein HTML-Projekt
- Erstelle einen Projektordner.
- Erstelle die Datei index.html.
- Erstelle die Datei style.css.
- Erstelle die Datei script.js.
- Verbinde style.css mit index.html.
- Verbinde script.js mit index.html.
- Erstelle zuerst eine Überschrift.
- Erstelle danach einen Startbutton.
- Erstelle danach den Spielbereich.
- Erstelle danach die Spiellogik in script.js.
- Teste die Datei index.html im Browser.
- Verbessere das Design mit style.css.
- Prüfe, ob alles ohne Server funktioniert.
- Speichere alle Dateien im Projektordner.
- Bereite den Ordner für die Veröffentlichung vor.
Grundstruktur für index.html
<syntaxhighlight lang="html"> <!DOCTYPE html> <html lang="de"> <head>
<meta charset="UTF-8"> <title>Mein Spiel</title> <link rel="stylesheet" href="style.css">
</head> <body>
Mein Spiel
Klicke auf Start und sammle Punkte.
<button id="startButton">Start</button>
Punkte: 0
<button id="punktButton">Punkt sammeln</button>
<script src="script.js"></script>
</body> </html> </syntaxhighlight>
Grundstruktur für style.css
<syntaxhighlight lang="css"> body {
font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0;
}
h1 {
color: #224466;
}
button {
font-size: 20px; padding: 10px 20px; margin: 10px;
}
- spielbereich {
margin-top: 30px;
} </syntaxhighlight>
Grundstruktur für script.js
<syntaxhighlight lang="javascript"> let punkte = 0;
document.getElementById("punktButton").addEventListener("click", function() {
punkte = punkte + 1;
document.getElementById("punkte").textContent = punkte;
}); </syntaxhighlight>
Beispiele für HTML- und JavaScript-Projekte
| Projekt | Inhalt | Einfache Version | Erweiterung |
|---|---|---|---|
| Quiz der Tiere | Fragen zu Tieren beantworten. | Drei Antwortbuttons. | Punkte, Auswertung, Erklärung. |
| Escape-Room Schule | Rätsel lösen, um aus einem Raum zu entkommen. | Ein Zahlenrätsel. | Mehrere Seiten, Codeeingabe, Hinweise. |
| Charakter-Generator | Zufällige Spielfigur erstellen. | Name, Stärke, Fähigkeit. | Bild, Level, Ausrüstung. |
| Mülltrennungs-Training | Gegenstände richtig zuordnen. | Klick auf richtige Tonne. | Erklärung bei Fehlern, Timer. |
| Mini-Spielesammlung | Startseite mit mehreren Spielen. | Drei Buttons zu drei Spielen. | Einheitliches Design, Highscore-Idee. |
Schritt-für-Schritt-Anleitung: HTML-Spiel veröffentlichbar machen
- Prüfe, ob die Startdatei genau index.html heißt.
- Prüfe, ob style.css im gleichen Ordner liegt.
- Prüfe, ob script.js im gleichen Ordner liegt.
- Öffne index.html durch Doppelklick im Browser.
- Teste alle Buttons und Funktionen.
- Entferne unnötige Dateien.
- Benenne den Projektordner sinnvoll.
- Erstelle eine kurze Anleitung als README oder als Abschnitt auf der Startseite.
- Lade den Ordner nur hoch, wenn keine persönlichen Daten enthalten sind.
- Nutze für einfache Veröffentlichungen eine Plattform wie GitHub Pages oder Netlify.
- Prüfe nach dem Hochladen, ob die Seite online korrekt angezeigt wird.
- Kopiere den Link in den Projektsteckbrief.
Werkstatt C: Arduino-Spiel
Geeignet für: Schüler:innen, die gerne praktisch bauen und ein physisches Spiel entwickeln möchten.
Typische Projekte: Reaktionsspiel, LED-Würfel, Geschicklichkeitsspiel, Simon-Says-Spiel, Licht-Sensor-Spiel.
Schritt-für-Schritt-Anleitung für ein Arduino-Reaktionsspiel
- Wähle ein Arduino-Board aus.
- Verbinde das Board mit dem Computer.
- Öffne die Arduino IDE oder den Arduino Cloud Editor.
- Schließe eine LED mit passendem Widerstand an.
- Schließe einen Button an.
- Schreibe oder kopiere einen einfachen Testcode für LED und Button.
- Lade den Code auf das Board.
- Prüfe, ob die LED leuchtet.
- Prüfe, ob der Button erkannt wird.
- Programmiere eine zufällige Wartezeit.
- Lasse die LED nach der Wartezeit aufleuchten.
- Messe, wie schnell der Button gedrückt wird.
- Gib ein Signal über LED oder Buzzer aus.
- Teste das Spiel mehrfach.
- Verbessere die Regeln.
- Dokumentiere den Aufbau mit Foto oder Skizze.
Beispiele für Arduino-Spiele
| Projekt | Material | Einfache Version | Erweiterung |
|---|---|---|---|
| Reaktionstest | LED, Button, Widerstand | LED leuchtet, Button drücken. | Reaktionszeit messen, Buzzer. |
| LED-Würfel | 6 LEDs, Button | Zufallszahl anzeigen. | Animation vor dem Ergebnis. |
| Simon Says | 4 LEDs, 4 Buttons, Buzzer | Reihenfolge nachdrücken. | Längere Reihen, Punkte. |
| Draht-Parcours | Draht, Kontakt, Buzzer | Kontakt löst Ton aus. | Zeitmessung, Fehlerzähler. |
| Lichtjäger | Lichtsensor, LED | Lichtwert verändert Anzeige. | Schwellenwerte, Punkte, Alarm. |
Arduino-Prompt
<syntaxhighlight lang="text"> Ich möchte ein einfaches Arduino-Reaktionsspiel bauen.
Bauteile: - Arduino-Board - 1 LED - 1 Button - 1 Buzzer - Widerstände - Breadboard - Jumper-Kabel
Spielidee: Nach einer zufälligen Wartezeit leuchtet die LED. Dann muss man so schnell wie möglich den Button drücken. Der Buzzer gibt ein Signal, wenn man richtig gedrückt hat.
Bitte gib mir: 1. Eine einfache Erklärung des Aufbaus. 2. Eine Pin-Belegung. 3. Einen einfachen Arduino-Code. 4. Eine Erklärung des Codes für Anfänger:innen. 5. Ideen, wie man das Spiel schwieriger machen kann. </syntaxhighlight>
Werkstatt D: Komplexere Website oder App-Prototyp
Geeignet für: sehr starke Schüler:innen, ältere Schüler:innen oder Gruppen mit Erfahrung.
Typische Projekte: Quiz-App, Spielesammlung, Lern-App, Highscore-Webseite, Escape-Room-Web-App, Spielgenerator.
Empfohlene Tools: Codex, Google Antigravity, ChatGPT, Gemini, HTML, CSS, JavaScript, optional React.
Schritt-für-Schritt-Anleitung für Codex oder Antigravity
- Beschreibe das Projektziel in maximal fünf Sätzen.
- Lege fest, welche Funktionen unbedingt nötig sind.
- Lege fest, welche Funktionen nur Bonus sind.
- Bitte das Tool zuerst um einen Entwicklungsplan.
- Prüfe, ob der Plan einfach genug ist.
- Bitte danach um eine erste Minimalversion.
- Teste die Minimalversion.
- Notiere Fehler und fehlende Funktionen.
- Bitte das Tool gezielt um kleine Verbesserungen.
- Teste nach jeder Änderung erneut.
- Achte auf verständliche Dateinamen.
- Achte darauf, dass das Projekt lokal gestartet werden kann.
- Lasse eine kurze README-Datei erstellen.
- Bereite die Präsentation mit Screenshots oder Live-Demo vor.
Beispiele für komplexere Projekte
| Projekt | Grundidee | Mindestversion | Fortgeschrittene Version |
|---|---|---|---|
| Quiz-App | Fragen beantworten und Punkte sammeln. | Eine Kategorie, zehn Fragen. | Kategorien, Auswertung, lokaler Highscore. |
| Lernspiel-Plattform | Mehrere Lernspiele auf einer Startseite. | Menü mit drei Spielen. | Fortschritt, Feedback, Designsystem. |
| Escape-Web-App | Mehrere Rätsel führen zum Ziel. | Drei Rätsel nacheinander. | Inventar, Codes, Hinweisfunktion. |
| Highscore-Spiel | Spiel speichert Punktzahl im Browser. | Punkte und Neustart. | Local Storage, Namenseingabe, Rangliste. |
| Spielgenerator | Nutzer:innen geben Thema ein und erhalten Spielideen. | Zufallsgenerator mit Textbausteinen. | Kategorien, Export, Designvorlagen. |
Agenten-Prompt für komplexere Projekte
<syntaxhighlight lang="text"> Du bist mein Coding-Agent für ein Schülerprojekt.
Projektziel: [Projektziel einfügen]
Zielgruppe: Schüler:innen, die ein verständliches und vorführbares Projekt entwickeln möchten.
Bitte erstelle zuerst einen einfachen Entwicklungsplan.
Wichtig: - Beginne mit einer Minimalversion. - Verwende verständliche Dateinamen. - Erstelle keine unnötig komplizierte Architektur. - Schreibe kurze Kommentare in den Code. - Erkläre, wie das Projekt lokal gestartet wird. - Erstelle am Ende eine kurze README. - Frage nicht nach vielen Zusatzfunktionen, sondern entscheide sinnvoll für einen ersten Prototyp.
Nach dem Plan sollst du die erste funktionierende Version erstellen. </syntaxhighlight>
Projekttag 3: Fertigstellen, präsentieren und reflektieren
Ziel des dritten Tages: Die Projekte werden fertiggestellt, gesichert, gegebenenfalls veröffentlicht, präsentiert und reflektiert. Wichtig ist nicht Perfektion, sondern ein funktionierender Stand, eine klare Erklärung und eine bewusste Reflexion des KI-Einsatzes.
Ablauf Tag 3
| Zeit | Phase | Inhalt | Ergebnis |
|---|---|---|---|
| 08:00–08:20 | Zielklärung | Jede Gruppe entscheidet, was heute Pflicht und was Bonus ist. | Realistischer Fertigstellungsplan |
| 08:20–09:30 | Finalisierung | Bugs beheben, Design verbessern, Spielende ergänzen. | Finale Version |
| 09:30–10:00 | Sicherung oder Veröffentlichung | Dateien sichern, Link erstellen, Arduino-Aufbau vorbereiten. | Vorführbares Produkt |
| 10:00–10:15 | Pause | Kurze Unterbrechung. | Erholung |
| 10:15–11:00 | Präsentation vorbereiten | Projektkarte, Rollenverteilung, Kurzvortrag. | Präsentation steht |
| 11:00–12:15 | Game Gallery | Alle testen die Projekte der anderen. | Feedback und Würdigung |
| 12:15–12:45 | Reflexion | KI-Nutzung, Probleme, Lernerfolg, Grenzen. | Bewusster Abschluss |
| 12:45–13:00 | Abschlussrunde | Auszeichnungen, Highlights, Ausblick. | Projektabschluss |
Schritt-für-Schritt-Anleitung: Fertigstellen
- Öffne die letzte funktionierende Version.
- Teste das Spiel einmal vollständig.
- Notiere alle Fehler.
- Entscheide, welche Fehler wirklich noch behoben werden müssen.
- Verzichte auf neue große Funktionen, wenn die Grundversion noch unsicher ist.
- Ergänze eine kurze Anleitung im Spiel.
- Ergänze einen Startbildschirm, falls möglich.
- Ergänze einen Game-over-Bildschirm, falls möglich.
- Prüfe, ob Punkte, Timer oder Spielende korrekt funktionieren.
- Prüfe, ob die Steuerung verständlich ist.
- Speichere die finale Version.
- Erstelle eine Sicherheitskopie.
- Bereite die Vorführung vor.
Schritt-für-Schritt-Anleitung: Game Gallery vorbereiten
- Öffne dein fertiges Spiel.
- Prüfe, ob es ohne Erklärung gestartet werden kann.
- Schreibe eine kurze Spielanleitung.
- Erstelle eine Projektkarte.
- Entscheide, wer das Spiel erklärt.
- Entscheide, wer beim Testen hilft.
- Lege fest, was andere Schüler:innen ausprobieren sollen.
- Bereite einen Feedbackbogen vor.
- Teste die Präsentation einmal mit einer anderen Gruppe.
- Verbessere unklare Stellen.
Projektkarte
| Bereich | Inhalt |
|---|---|
| Titel des Spiels | |
| Team | |
| Verwendete Tools | |
| Spielziel | |
| Steuerung | |
| Wichtigste Funktion | |
| Schwierigste Stelle | |
| KI hat geholfen bei | |
| Das haben wir selbst entschieden | |
| Das würden wir als Nächstes verbessern |
Feedbackbogen für die Game Gallery
| Feedbackfrage | Rückmeldung |
|---|---|
| Was funktioniert besonders gut? | |
| Was hat Spaß gemacht? | |
| Was war noch unklar? | |
| Wo gab es noch Fehler? | |
| Welche Erweiterung wäre spannend? |
Reflexionsfragen
- Was war unsere ursprüngliche Spielidee?
- Was funktioniert in der finalen Version?
- Was funktioniert noch nicht perfekt?
- Wobei hat KI besonders geholfen?
- Welche KI-Antwort war falsch, unpassend oder zu kompliziert?
- Welche Entscheidung haben wir bewusst selbst getroffen?
- Welche Code-Stelle verstehen wir jetzt besser?
- Was würden wir beim nächsten Prompt anders machen?
- Was haben wir über Programmieren gelernt?
- Was haben wir über den Umgang mit KI gelernt?
Bewertung oder Würdigung
Die Projekttage eignen sich besonders für eine kriterienorientierte Würdigung statt für eine reine Note. Bewertet werden sollte nicht nur das fertige Produkt, sondern auch der Entwicklungsprozess.
| Kriterium | Erfüllt | Teilweise erfüllt | Noch offen |
|---|---|---|---|
| Das Spiel oder die Anwendung ist lauffähig. | |||
| Das Spielziel ist verständlich. | |||
| Die Steuerung funktioniert. | |||
| Das Projekt wurde getestet und verbessert. | |||
| Mindestens eine eigene Erweiterung wurde eingebaut. | |||
| Der KI-Einsatz wurde dokumentiert. | |||
| Die Gruppe kann wichtige Code-Stellen erklären. | |||
| Die Präsentation ist verständlich. |
Mögliche Auszeichnungen
- Beste Spielidee
- Beste Steuerung
- Bestes Design
- Beste technische Lösung
- Beste Verbesserung
- Bester KI-Einsatz
- Bestes Debugging
- Beste Präsentation
- Publikumspreis
- Mutigster Versuch
- Kreativste Fehlermeldungslösung
- Bestes Teamwork
- Beste Erklärung für Anfänger:innen
Konkrete Projektideen
| Projekt | Schwierigkeit | Geeignet für | Erweiterungen |
|---|---|---|---|
| Klick den Kreis | Sehr leicht | p5.js-Einstieg | Timer, Punkte, kleinere Ziele, Highscore |
| Fangspiel | Leicht | p5.js | Gegner, Level, Leben, Sound |
| Reaktionsspiel | Leicht | p5.js oder Arduino | Zufallszeit, Bestenliste, Fehlstart |
| Quizspiel | Leicht bis mittel | HTML, CSS, JavaScript | Kategorien, Punkte, Feedback |
| Escape-Room-Seite | Mittel | HTML und JavaScript | Codes, mehrere Seiten, Rätselketten |
| Labyrinth | Mittel | p5.js | Wände, Ziel, Gegner, Zeitlimit |
| Ausweichspiel | Mittel | p5.js | Hindernisse, Geschwindigkeit, Level |
| Arduino-Simon-Says | Mittel | Arduino | mehrere LEDs, mehrere Buttons, Tonfolge |
| Spielesammlung | Schwer | HTML, CSS, JavaScript | Startseite, mehrere Minispiele, Menü |
| Lern-App | Schwer | Codex, Google Antigravity | Quiz, Fortschritt, Feedback, lokale Speicherung |
| Mathe-Monster | Leicht bis mittel | HTML oder p5.js | Richtige Ergebnisse besiegen Monster |
| Vokabel-Rennen | Leicht bis mittel | HTML, JavaScript | Richtige Antworten bewegen Spielfigur nach vorne |
| Nachhaltigkeits-Challenge | Mittel | HTML, CSS, JavaScript | Entscheidungen verändern Punkte für Umwelt, Geld und Zeit |
| Stadtflucht | Mittel bis schwer | p5.js | Hindernisse, Sammelobjekte, Kartenabschnitte |
| KI-Quizshow | Schwer | Codex, Google Antigravity | Kategorien, Joker, Moderationstexte, Auswertung |
Differenzierung
- Schüler:innen mit wenig Erfahrung verändern zuerst bestehende Spiele.
- Schüler:innen mit mittlerer Erfahrung ergänzen Funktionen wie Punkte, Timer oder Hindernisse.
- Schüler:innen mit hoher Erfahrung entwickeln eigene Spielmechaniken.
- Sehr starke Schüler:innen bauen mehrseitige Webprojekte oder App-Prototypen.
- Praktisch orientierte Schüler:innen können mit Arduino arbeiten.
- Sprachlich schwächere Schüler:innen können mit Promptvorlagen arbeiten.
- Kreative Schüler:innen können Gestaltung, Story, Figuren und Leveldesign übernehmen.
- Technisch starke Schüler:innen können Debugging und komplexere Logik übernehmen.
- Schüler:innen mit Präsentationsstärke können Anleitung, Projektkarte und Game Gallery vorbereiten.
- Schüler:innen mit Interesse an Gestaltung können Farben, Layout, Icons und Benutzerführung verbessern.
Konkreter Arbeitsauftrag für Schüler:innen
- Entwickelt ein eigenes Spiel oder eine interaktive Anwendung.
- Wählt ein passendes Tool.
- Erstellt zuerst eine einfache Version.
- Nutzt KI als Hilfe, aber entscheidet selbst.
- Testet euer Projekt regelmäßig.
- Verbessert euer Projekt Schritt für Schritt.
- Dokumentiert eure wichtigsten Prompts.
- Bereitet eine kurze Präsentation vor.
- Erklärt, was euer Spiel kann.
- Erklärt, wobei KI geholfen hat.
- Erklärt, was ihr selbst gelernt habt.
Pflichtanforderungen
- Das Projekt hat einen Titel.
- Das Projekt hat ein klares Ziel.
- Das Projekt ist testbar oder vorführbar.
- Das Projekt enthält mindestens eine selbst gewählte Veränderung.
- Die Gruppe kann die Grundidee erklären.
- Die Gruppe kann mindestens eine wichtige Code-Stelle erklären.
- Die Gruppe dokumentiert den KI-Einsatz.
- Die Gruppe präsentiert das Projekt in der Game Gallery.
Wahlaufgaben
- Ergänze einen Startbildschirm.
- Ergänze einen Game-over-Bildschirm.
- Ergänze ein Punktesystem.
- Ergänze einen Timer.
- Ergänze Level.
- Ergänze Sound.
- Ergänze eigene Grafiken.
- Ergänze eine Bestenliste.
- Ergänze eine Anleitung.
- Ergänze eine Veröffentlichung als Website.
- Ergänze eine Auswahl zwischen leichter und schwerer Schwierigkeit.
- Ergänze eine kleine Geschichte.
- Ergänze unterschiedliche Figuren.
- Ergänze eine Hilfefunktion.
- Ergänze eine zufällige Ereignisfunktion.
Abschlussprodukt
Am Ende der drei Projekttage soll jede Gruppe ein vorführbares Produkt haben. Das kann ein einfaches p5.js-Spiel, ein HTML-Spiel, eine interaktive Website, ein Arduino-Spiel oder eine komplexere Web-App sein. Entscheidend ist, dass das Projekt funktioniert, erklärt werden kann und der Entwicklungsprozess sichtbar wird.
Zentrale Botschaft
Gute Projekte entstehen nicht dadurch, dass KI alles erledigt. Gute Projekte entstehen, wenn Menschen gute Ideen entwickeln, kluge Fragen stellen, KI-Ergebnisse prüfen, Fehler verstehen, eigene Entscheidungen treffen und ihre Arbeit verbessern.
Kurzformel der Projekttage
Idee → Prompt → Code → Test → Fehler → Verbesserung → Präsentation → Reflexion
Schulfach+


aiMOOCs



aiMOOC Projekte


THE MONKEY DANCE





|
| <inputbox>
type=create break=no preload=MOOCit Vorlage default= width=30 placeholder= Dein MOOC Titel buttonlabel=MOOC erstellen </inputbox> |