Spiel mit ChatGPT erstellen: Die Ein-Datei-Methode

Am einfachsten erstellst du ein Spiel mit ChatGPT, wenn du dir eine einzige HTML-Datei schreiben lässt, sie speicherst und im Browser öffnest. Du installierst nichts und kannst im selben Chat weitermachen, bis die Datei zu lang wird.

Eine HTML-Datei ist eine Webseite, die jeder Browser ohne Hilfe öffnet, und ein ganzes kleines Spiel passt hinein. Laut OpenAIs Hilfeartikel zu Canvas, Stand 2. November 2026, wird HTML- und React-Code in einer abgeschotteten Umgebung angezeigt, damit du das Ergebnis siehst. Manche Vorschauen müssen dafür erst Dateien von außen laden. Hast du diese Vorschau, nutze sie. Wenn nicht, tut es die gespeicherte Datei genauso.

Wie funktioniert die Ein-Datei-Methode?

1. Bitte um das Spiel als eine einzige Datei.
2. Kopiere die Antwort in einen einfachen Texteditor und speichere sie als soup-rush-1.html.
3. Öffne die Datei per Doppelklick und spiel.
4. Sag ChatGPT in normalen Worten, was nicht stimmt. „Der Topf blinkt rot, aber die Punkte sinken nicht“ hilft viel mehr als „mach das heil“.
5. Speichere jede bessere Fassung unter einer neuen Nummer: soup-rush-2.html und so weiter.

Schritt 5 lassen viele weg, dabei rettet genau er dein Spiel.

Beispiel: Soup Rush

Soup Rush ist erfunden. Zutaten fahren auf einem Band, und du sortierst sie in drei Töpfe, bevor sie herunterfallen. Die ersten Runden im Chat könnten so aussehen.

Runde 1. Du bittest um Band und Töpfe, alles als bunte Kreise. Es läuft auf Anhieb.

Runde 2. Du wünschst dir Bestellungen: Jeder Topf will bestimmte Zutaten, eine falsche verdirbt ihn. Verdorbene Töpfe werden grau. Gefällt dir, also speicherst du Fassung 2.

Runde 3. Das Band soll alle 30 Sekunden schneller werden. Passt. Fassung 3.

Runde 6. Du bittest um eine schönere Punkteanzeige, und die sieht auch toll aus. Dann fällt dir auf, dass das Band nicht mehr schneller wird. ChatGPT hat die ganze Datei neu geschrieben und die Beschleunigung dabei verloren. Niemand hatte darum gebeten, und in der Antwort stand kein Wort davon.

Das ist der typische Fehler beim Arbeiten im Chat. Weil du Fassung 5 aufgehoben hast, kannst du beide öffnen, den Unterschied sehen und das fehlende Stück zurückholen. Ohne nummerierte Dateien müsstest du eine Funktion aus dem Gedächtnis beschreiben und hoffen.

Wann reicht eine Datei nicht mehr?

Zieh weiter, wenn du diese Zeichen siehst:

• Antworten brechen ab, oder ChatGPT schreibt „der Rest bleibt gleich“.
• Jede Reparatur macht etwas aus einer früheren Runde kaputt.
• Du möchtest echte Bilder und Töne in eigenen Dateien.

Dann brauchst du ein Werkzeug, das direkt an deinen Dateien arbeitet. Innerhalb von ChatGPT ist Codex der nächste Schritt. Unsicher, welche Größe für dein Spiel passt? Die Mechanik-Seiten zeigen, wie sich kleine Teile zusammensetzen.

Das sagst du deiner KI

Bau mein Spiel als eine einzige HTML-Datei, in der alles enthalten ist: keine weiteren Dateien, keine Bilder, keine Downloads von außen. Ich speichere sie und öffne sie per Doppelklick.

Das Spiel: [zwei Sätze über dein Spiel].

Skizziere das Spiel vor jedem Code in Mermaid: alles, was gerade los sein kann, mit Pfeilen dafür, was wohin führt. Führ mich dann in Worten durch eine ganze Runde und sag mir, wo sie hängen bleiben könnte. Warte auf mein OK und bau genau das. Ändert sich das Spiel später, ändere zuerst das Diagramm.

Schick bei jeder neuen Fassung die ganze Datei, nie „der Rest bleibt gleich“. Schreib darüber, was du geändert und was du nicht angefasst hast. Zitiere zu jeder Änderung den Satz von mir, der sie verlangt hat. Hast du etwas entfernt oder umgeschrieben, worum ich nicht gebeten habe, sag das und sag warum.

Du kannst die Datei von hier aus nicht spielen. Behaupte also nicht, dass sie funktioniert. Nenn mir stattdessen die genauen Schritte zum Ausprobieren und was ich bei jedem sehen sollte.

Oder spar dir das und schließ den MCP an: Dann findet deine KI das alles von selbst.MCP anschließen

ChatGPT kann dein Spiel nicht spielen, eine Zeichnung aber sehr wohl durchgehen. Das Diagramm ist also seine beste Chance, einen Fehler vor dir zu finden. Mermaid ist Text, der bei mermaid.live zum Bild wird.

So prüfst du es

• Schalte das WLAN aus und öffne die Datei. Sie sollte trotzdem starten. Tut sie das nicht, hängt sie an etwas von außen.
• Vergleiche mit der letzten Fassung. Öffne beide und spiel je eine Minute. Was fehlt, ist deine erste Aufgabe.
• Geh die genannten Schritte genau durch. Siehst du etwas anderes, füge das in den Chat ein.
• Halte die Liste neben deine Bitte. Eine Änderung ohne einen Satz von dir dahinter braucht eine Begründung.
• Fahr das Diagramm mit dem Finger ab. Jeden Pfeil solltest du im Spiel auslösen können.