Ein Spiel mit KI erstellen: Key Room Schritt für Schritt
Ein echtes Browser-Spiel zum Ausprobieren und Herunterladen: mit Screenshots, Beispiel-Prompts, Code-Erklärung und geprüften Spielregeln.
Direkt spielbar und als HTML-Datei herunterladbar.
Echte Screenshots aus unserem eigenen Beispiel.
Konkrete Prompts und überprüfbare Änderungen.
Aufbau und Ergebnis
Unser Beispiel Key Room besteht aus einer einzigen HTML-Datei. Eine blaue Figur bewegt sich durch einen Raum, sammelt drei goldene Schlüssel und erreicht die Ausgangstür. Hier zeigen wir das Ergebnis und erklären die Bausteine, damit du es selbst verändern kannst.
Der Code wurde für Findbest mit dem Codex-Agenten erstellt und anschliessend im Browser durchgespielt. Geprüft wurden Wandkollision, einmaliges Einsammeln, die gesperrte Tür, der Sieg, Neustart und die Richtungstasten in einer mobilen Ansicht. Das ist ein begrenzter Funktionstest dieses Beispiels, kein Vergleich verschiedener KI-Modelle.
Das fertige Beispiel ausprobieren
Key Room ist unser eigenes, lauffähiges Beispiel aus HTML, CSS und JavaScript. Die Bilder unten sind echte Screenshots dieses Beispiels, keine generierten Produktansichten.
Keine Installation und kein Konto nötig. Das Beispiel sendet keine Netzwerkanfragen und verwendet keine KI-API. Der Quellcode steht unter der MIT-Lizenz, die in der Datei enthalten ist.
Geprüfte Spielregeln
| Prüfung | Erwartetes Ergebnis | Browserprüfung |
|---|---|---|
| Wand | Position bleibt gleich | Erfüllt |
| Schlüsselfeld erneut betreten | Kein doppelter Punkt | Erfüllt |
| Tür mit zwei Schlüsseln | Gesperrt | Erfüllt |
| Drei Schlüssel und Tür | Erfolgsmeldung | Erfüllt |
| Neustart | Startposition, 0 von 3 | Erfüllt |
Datei herunterladen und selbst starten
Klicke auf „HTML-Quellcode herunterladen“. Speichere die Datei als findbest-key-room.html und öffne sie per Doppelklick im Browser. Zum Bearbeiten öffnest du dieselbe Datei in einem Texteditor. Nach dem Speichern lädst du den Browser neu. Wenn nur Code angezeigt wird, prüfe, ob die Datei versehentlich auf .txt endet.
Zum Spielen klickst du zuerst ins Spielfeld. Pfeiltasten oder WASD bewegen die Figur um genau ein Feld. Auf dem Handy verwendest du die vier Richtungstasten. Die goldenen Rauten sind in diesem Lernbeispiel die Schlüssel.
Einen kleinen KI-Auftrag formulieren
Beschreibe zuerst Regeln und Grenzen. „Baue ein tolles Spiel“ überlässt zu viele Entscheidungen dem Assistenten. Dieser Beispiel-Prompt beschreibt ein Ergebnis, das du kontrollieren kannst. Er ist eine Vorlage für deinen Nachbau, kein wortgetreues Protokoll aller Entwicklungsschritte.
Praxisbeispiel aufklappen
Erstelle ein Browser-Spiel in einer HTML-Datei mit CSS und JavaScript. Nutze 14 Spalten und 8 Zeilen. Start: x=1, y=6. Drei Schlüssel: 3,5; 7,2; 11,5. Tür: 12,1. Aussenwände blockieren. Pfeiltasten, WASD und vier Bildschirmtasten steuern die Figur. Schlüssel dürfen nur einmal zählen. Die Tür bleibt bis zum dritten Schlüssel gesperrt. Ergänze Neustart. Keine externen Bibliotheken, Tracker oder Netzwerkanfragen. Erkläre die Funktionen.
Die drei Teile der Datei verstehen
HTML legt Spielfeld, Statusanzeige und Tasten an. CSS zeichnet das Raster und die Figuren. JavaScript verwaltet die Regeln. Im Code heisst das Spielfeld board. player speichert x und y. walls enthält gesperrte Koordinaten. keys enthält noch nicht eingesammelte Schlüssel.
Ein JavaScript-Set hält jede Koordinate nur einmal. Beim Einsammeln entfernt keys.delete die Position. draw zeichnet danach den Zustand neu. Es gibt keine ständig laufende Animationsschleife: Das Bild ändert sich bei einer Eingabe. Die MDN-Quellen erklären Set und CSS Grid unabhängig von unserem Beispiel.
Eine Änderung vornehmen
Suche nach initialKeys. Ändere 3,5 zu 2,4, speichere und lade neu. Der erste Schlüssel sollte nun ein Feld weiter links und höher liegen. Die Koordinaten beginnen links oben bei 0,0. Setze einen Schlüssel nicht in eine Wand.
Für eine neue Wand ergänze nach dem Aufbau der vorhandenen Wände: walls.add("7,4");. Prüfe, ob alle Schlüssel und die Tür erreichbar bleiben. Bewahre eine Kopie der funktionierenden Datei auf.
Praxisbeispiel aufklappen
Verschiebe nur den ersten Schlüssel von 3,5 nach 2,4. Ändere keine anderen Regeln. Zeige mir die betroffene Stelle und beschreibe, wie ich die Änderung überprüfe.
Fehler mit einem Gegenbeispiel melden
Laufe in eine Aussenwand. Betritt ein eingesammeltes Schlüsselfeld erneut. Gehe mit zwei Schlüsseln zur Tür. Starte nach dem Sieg neu. Unsere Browserprüfung hat diese Fälle durchlaufen: Die Wand blockiert, der Schlüssel zählt nicht doppelt, die Tür bleibt zunächst zu und Neustart setzt den Zähler zurück.
Wenn deine Version abweicht, gib dem Assistenten Eingabe, Erwartung und tatsächliches Ergebnis.
Praxisbeispiel aufklappen
Ich sammle einen Schlüssel, gehe zurück und wieder auf dieselbe Position. Erwartet: weiterhin 1 von 3. Tatsächlich: 2 von 3. Prüfe ausschliesslich das Einsammeln und erkläre die Korrektur.
Dein eigenes Spiel daraus machen
Ändere zuerst Farben, Namen und Wände. Erweitere danach eine Regel, etwa einen vierten Schlüssel. Dafür musst du auch Gesamtzahl und Anzeige anpassen. Erst wenn die bisherigen Tests funktionieren, kommt die nächste Funktion hinzu.
Das Beispiel enthält keine Speicherung, keinen Mehrspieler-Modus, keinen Ton und keine Pfadsuche. Die Grafiken entstehen aus CSS. Den eigenen Findbest-Code kannst du gemäss der enthaltenen MIT-Lizenz verwenden und bearbeiten.
Dein Nachbau
Was du brauchst
Ein aktueller Browser und ein einfacher Texteditor. Für Änderungen mit KI zusätzlich ein Assistent, der Code als Text ausgeben kann. Das fertige Beispiel benötigt kein Konto, keine Engine, keinen Server und keinen API-Schlüssel.
- HTML-Datei herunterladen und öffnen.
- Eine funktionierende Kopie sichern.
- Eine Position oder Regel bearbeiten.
- Neuladen und den erwarteten Unterschied prüfen.
- Wand, doppelte Aufnahme, Tür und Neustart erneut testen.
Beispiel für deinen Start
Erkläre move(dx,dy) aus dieser Datei. Zeige die Positionsprüfung, das Einsammeln und die Türbedingung. Ändere noch keinen Code.
Das solltest du beachten
Ein Lernspiel, kein vollständiges kommerzielles Spiel oder Roblox-Projekt. Browserprüfung auf Desktop und in einer mobilen Ansicht; keine vollständige Geräte- oder Barrierefreiheitsprüfung.
Weiterlesen
Eine KI-Welt ist noch kein fertiges Spiel
Project Genie als Beispiel: So unterscheidest du eine erkundbare Welt von einem überprüfbaren Spielprototyp.
Unity: Mit KI ein kleines 3D-Spiel erstellen – Ablauf und Kosten
Vom ersten C#-Auftrag bis zum spielbaren Sammellevel: So setzt du KI gezielt ein, prüfst das Ergebnis und hältst die Ausgaben im Blick.
Unreal Engine mit KI: Ein 3D-Abenteuer mit Blueprints planen und bauen
So hilft dir KI bei Blueprint-Logik, Levelgestaltung und Fehlersuche – mit einem kleinen Projekt, konkreten Prompts und einer ehrlichen Kostenrechnung.
War dieser Artikel hilfreich?
Deine Rückmeldung hilft uns, die Beiträge zu verbessern.
Bewertungen gelten je Sprachversion. Mehrfachstimmen werden begrenzt; die Anzahl entspricht nicht zwingend einzelnen Personen. Datenschutz