← Alle Klicktafeln

Klicktafel · Informatik · Spiele-AG · ab Klasse 5

Ein Spiel mit KI bauen

Die Schul-KI AIS.chat schreibt euch ein Spiel. Aber im Chat steht nur Text. Hier lernt ihr den Weg vom Text im Chat zu einer Datei, die auf eurem Rechner als Spiel läuft: Prompt, kopieren, speichern, öffnen, testen, verbessern.

Einstieg

Ein Spiel ist nur Text

Auftrag: Schaut zu, wie die KI schreibt. Entscheidet euch dann für eine Antwort.

Die KI schreibt gerade …

0 Zeichen

Links steht der Text, den die KI geschrieben hat. Was müsst ihr tun, damit das Spiel auf eurem Rechner läuft?

Station 1 · Überblick

Sechs Schritte vom Chat zum Spiel

Auftrag: Vermutet bei jedem Schritt zuerst: Was kann hier schiefgehen? Tippt dann auf „Stolperstelle“.

1

Idee und Prompt

Spiel planen und der KI genau sagen, was sie bauen soll.

2

KI antwortet

Prompt in AIS.chat senden und warten, bis die Antwort fertig ist.

3

Code kopieren

Nur den Code-Kasten kopieren, von Anfang bis Ende.

4

Als Datei speichern

In den Editor einfügen und als spiel.html speichern.

5

Im Browser öffnen

Doppelklick auf die Datei. Der Browser startet das Spiel.

6

Testen und zurückmelden

Spielen, Fehler finden, der KI genau beschreiben. Dann wieder ab Schritt 2.

Station 2 · Schritt 1

Erst planen, dann prompten

Auftrag: Wählt in jeder Zeile einen Baustein. Lest dann den Prompt: Warum stehen unten so viele Regeln?

Spielart

Figur

Einsammeln

Gefahr

Eine Datei: Dann müsst ihr nur eine Datei speichern.

Nichts aus dem Internet: Das Spiel läuft auch ohne Netz und schickt keine Daten weg.

Vollständiger Code: Sonst müsst ihr Stücke zusammenbauen.

Tippen: So läuft das Spiel auch am iPad und am Board.

Euer Prompt

Station 3 · Schritt 2

Prompt rein, Code raus

Auftrag: Lasst die KI zweimal antworten. Schaut jedes Mal auf die letzte Code-Zeile: Ist der Code vollständig?

AIS.chat (vereinfacht)Sprachmodell ▾

Hier erscheint gleich euer Prompt und die Antwort der KI.

Verschiedene Modelle: AIS.chat hat Modelle mehrerer Anbieter. Welches antwortet, stellt die Lehrkraft ein. Größere schreiben meist bessere Spiele, kleinere sind schneller. Jedes Modell baut ein anderes Spiel.

  1. 1

    Link oder QR-Code von der Lehrkraft öffnen. Keine Namen in den Prompt schreiben.

  2. 2

    Prompt einfügen (Strg+V, am Mac ⌘+V) und senden.

  3. 3

    Warten, bis die Antwort ganz fertig ist.

Woran erkennt ihr, dass der Code vollständig ist?

Station 4 · Schritt 3

Nur den Code, aber den ganzen

Auftrag: Was gehört in die Datei? Tippt auf A, B oder C und schaut, was markiert wird. Entscheidet euch dann.

Gern! Hier ist dein Spiel „Krabbenkutter“. Speichere den Code als HTML-Datei und öffne sie im Browser:

htmlKopieren

Viel Spaß! Das Tempo kannst du oben im Code ändern.

Tipp: Nehmt den Knopf zum Kopieren oben am Code-Kasten. Markiert ihr von Hand: von <!DOCTYPE html> bis </html>, ohne Zeilen mit ```.

Station 5 · Schritt 4

Aus Text wird eine Datei

Auftrag: Vermutet zuerst: Warum klappt es nicht mit Word? Wählt dann euer Gerät und macht die Schritte nach.

  1. Start öffnen, Editor eintippen, Editor starten.

  2. Code einfügen: Strg+V.

  3. Datei → Speichern unter.

  4. Dateityp: Alle Dateien (*.*). Dateiname: spiel.html. Codierung: UTF-8.

  5. Speichern, zum Beispiel auf dem Desktop.

Merke: Die Endung .html sagt dem Rechner: Diese Datei öffnet der Browser.

Station 6 · Schritt 5

Welche Datei wird ein Spiel?

Auftrag: Vier Kinder haben gespeichert. Entscheidet bei jeder Datei: Startet ein Doppelklick das Spiel?

spiel.html

spiel.html.txt

spiel.rtf

spiel.docx

So öffnet ihr das Spiel

  • Doppelklick auf spiel.html: Der Browser startet das Spiel.
  • Öffnet sich ein Editor: Rechtsklick → Öffnen mit → Browser (z. B. Edge, Chrome, Safari).

Komische Zeichen wie ä oder � statt ä? Beim Speichern UTF-8 wählen. Im Code muss <meta charset="utf-8"> stehen.

Windows-Tipp: Im Explorer unter Ansicht die Dateinamenerweiterungen einblenden. Dann seht ihr die echte Endung.

Station 7 · Schritt 6

Testen und genau zurückmelden

Auftrag: Spielt eine Runde und hakt ab, was klappt. Wählt dann die Nachricht, die der KI am meisten hilft.

Testliste

Nach der Antwort: neuen Code wieder ganz kopieren, die alte Datei überschreiben (gleicher Name), im Browser neu laden (F5, am Mac ⌘+R).

Der Kutter fährt rechts aus dem Bild. Welche Nachricht hilft der KI am meisten?

Station 8 · Abkürzung

Die Spielkiste: testen ohne Editor

Auftrag: Fügt euren Code ein und drückt „Testen“. Lest die Hinweise. Klappt alles, sichert das Spiel als Datei.

  • Die Spielkiste prüft den Code und zeigt das Spiel rechts. Der Code bleibt auf diesem Gerät.
  • Tasten wirken, wenn ihr einmal ins Spiel getippt habt.
.html

Station 9 · Für Ältere

Andere KI, andere Spiele

Auftrag für Ältere: Gebt denselben Prompt AIS.chat und Duck.ai. Prüft beide Spiele mit der Testliste: Welches ist besser?

AIS.chatDuck.ai
Zugangüber die Schule, Link oder QR-Code von der Lehrkraftim Browser, ohne Anmeldung
Alterfür die Schule gedachtab 13 Jahren, unter 18 mit Erlaubnis der Eltern
Modellemehrere Anbieter, die Lehrkraft stellt das Modell einmehrere ohne Abo, selbst wählbar; die stärksten nur mit Abo
DatenServer in der EU, kein Training mit euren Eingabenohne IP-Adresse an Firmen wie OpenAI und Anthropic, kein Training, dort Löschung spätestens nach 30 Tagen

Bessere Spiele: Im Test für diese Klicktafel (Oktober 2026) bauten die Modelle von Duck.ai bessere Spiele als jedes Modell in AIS.chat. Die Modelle wechseln oft. Darum lohnt es sich, selbst zu vergleichen.

Mit Vorschau: Manche KI-Werkzeuge zeigen das Spiel gleich im Chat an. Dann fällt das Speichern weg.

Immer gleich: Auch gute KI macht Fehler. Testen und genau zurückmelden bleibt eure Aufgabe.

Abschluss

Check: Bringt den Weg in die richtige Reihenfolge

Auftrag: Tippt die Schritte in der richtigen Reihenfolge an. Löst dann auf.

Wie so ein Spiel innen gebaut ist

Deichschaf: Sprung und Schwerkraft Hausmeister-Flucht: drei Spuren Pausenkiosk: Ereignisse per KI

Hinweise für Lehrkräfte

Jahrgang und Zeit

Spiele-AG oder Informatik ab Klasse 5, Station 9 ab etwa 13 Jahren. 45 Minuten: Einstieg, Stationen 1 bis 6, jedes Team erzeugt und speichert ein Spiel. 90 Minuten: dazu testen, zwei Verbesserungsrunden (Station 7), Ältere vergleichen AIS.chat und Duck.ai (Station 9).

Lernziele

  • Einen Prompt mit Spielidee und Anforderungen an den Code formulieren.
  • Antworttext und Code unterscheiden und den Code vollständig kopieren.
  • Code als reinen Text mit der Endung .html speichern und im Browser öffnen.
  • Ein KI-Spiel mit einer Testliste prüfen und Fehler genau zurückmelden.
  • Wissen, dass verschiedene Modelle verschieden gute Ergebnisse liefern.

Typische Fehlvorstellungen

  • „Das Spiel ist im Chat gespeichert.“ Richtig ist: Im Chat steht nur Text. Die Datei entsteht erst beim Speichern.
  • „Was die KI schreibt, funktioniert.“ Richtig ist: KI-Code hat oft Fehler und muss getestet werden.
  • „Den Dateinamen sehe ich ja.“ Richtig ist: Windows blendet Endungen oft aus, spiel.html.txt wirkt wie spiel.html.
  • „Jedes Schreibprogramm geht.“ Richtig ist: Word, Pages und Notiz-Apps speichern Formatierungen mit.

Vorbereitung

  • In AIS.chat ein Lernszenario anlegen (ein leeres Lernszenario gibt einen freien Chat) und per QR-Code oder Link teilen. Freigaben gelten nur eine begrenzte Zeit.
  • Das Modell für das Lernszenario stellt die Lehrkraft ein; Schülerinnen und Schüler können es nicht wechseln.
  • Ein ganzes Spiel ist eine lange Antwort und verbraucht viel vom monatlichen Kontingent. Reicht es nicht, kann man es erweitern lassen.
  • An Windows-Rechnern die Dateinamenerweiterungen einblenden und einen Speicherort festlegen.
  • Für iPads und Rechner ohne Editor: Spielkiste (Station 8). Sie läuft im Browser, lädt nichts aus dem Internet und speichert nichts im Browser.

Datenschutz

Keine Namen oder persönlichen Daten in Prompts. AIS.chat meldet pseudonym über das Schulportal an. Duck.ai ist laut Anbieter erst ab 13 Jahren erlaubt, unter 18 mit Erlaubnis der Eltern; für den Unterricht braucht es die Freigabe der Schule.

An der Tafel

Adresse mit #tafel startet den Tafelmodus, #tafel-9 die Spielkiste. → / Bild↓ weiter, ← / Bild↑ zurück, Esc beendet. Hat ein Spiel den Fokus, wirken die Pfeiltasten im Spiel; dann die Knöpfe unten nutzen.