Du kannst mit KI ein spielbares Spiel machen, ohne eine einzige Zeile Code zu schreiben: Gemini zeichnet die Bilder, Claude macht daraus ein Spiel, und du spielst es im Browser. Die erste spielbare Version des Spiels unten war in unter 10 Minuten fertig. Für so etwas hat man früher ein paar Wochen gebraucht.
Das ist das Spiel, von dem ich rede. Klick einmal hinein und spiel los: Linksklick schießt, Rechtsklick wirft eine Granate. In der oberen Leiste gibt es einen Vollbild-Knopf.
Die Idee: Eine KI zeichnet, eine andere baut
Eine Chat-KI schreibt den Code für ein kleines Spiel richtig gut, aber sie kann dir keine düstere Ruinenstadt, eine Zombie-Horde und einen Laser-Turm in einem einheitlichen Stil zeichnen. Eine Bild-KI zeichnet das alles, aber sie kann die Bilder nicht bewegen. Also habe ich zwei Werkzeuge genommen und jedem die Aufgabe gegeben, die es am besten kann.
- Gemini hat die Bilder gezeichnet: den Hintergrund, die Zombies und die Waffen.
- Claude hat diese Bilder genommen, in einzelne Teile zerschnitten, die Szene gebaut und die Level gemacht.
Du bist nicht an diese zwei gebunden. Jede KI, die Bilder macht, kann zeichnen, und jede Chat-KI, die Code schreibt, kann bauen. ChatGPT und Gemini können auch den Code-Teil schreiben, und für einfachere Spiele aus schlichten Formen und Farben reichen sie völlig. Die Bilder sind es, die ein Spiel wie ein richtiges Spiel aussehen lassen.
Was du brauchst
- Eine KI, die Bilder macht. Ich habe Gemini benutzt.
- Eine Chat-KI, die Code schreibt. Ich habe Claude benutzt, ChatGPT oder Gemini gehen aber auch.
- Den Chrome-Browser. Du musst keine Programme installieren.
Du kannst kostenlos anfangen, aber kostenlose Tarife haben Tageslimits für Bilder und Nachrichten, und die Regeln unterscheiden sich von Tarif zu Tarif. Viele Bild-Tools erlauben die kommerzielle Nutzung der Bilder nur im Bezahltarif, lies also nach, was in deinem steht, wenn du das Spiel teilen oder verkaufen willst. In diesem Beitrag geht es darum, wie man schnell ein Spiel mit KI macht, er ist keine Rechtsberatung.
Als Hosting, also den Ort im Internet, an dem das Spiel liegt, damit jeder es öffnen kann, habe ich meine eigene Website genutzt, genau die, auf der du das hier liest. Das kannst du mit deiner eigenen Seite auch machen, und es gibt weitere Möglichkeiten, die ich weiter unten erkläre.
Wenn du noch keine Website hast, brauchst du zuerst ein Hosting. Ein einfacher Weg ist Bluehost. Das ist ein Hosting-Anbieter, dessen KI-Baukasten Hosting mit einer fertigen Startseite verbindet, sodass du dir die leere Seite sparst, und bei den meisten Hosting-Tarifen kannst du eigene Dateien hochladen, zum Beispiel eine einzelne Spieldatei. Schau vor der Entscheidung auf deren Seite nach den aktuellen Tarifen und Preisen, denn Angebote ändern sich.
Schritt 1: Das Spiel festlegen, dann die Bild-KI um Bilder bitten
Bevor du irgendetwas zeichnest, überlege dir, was für ein Spiel du willst. Ein Tower-Defense-Spiel, bei dem du eine Mauer gegen Feinde hältst, einen Weltraum-Shooter, ein Labyrinth, ein Kartenspiel? Und wie soll es aussehen: eine dunkle Ruinenstadt, ein heller Wald, das Weltall? Welche Figuren brauchst du: einen Helden, ein paar Feinde, einen Boss? Das musst du nicht alles allein entscheiden. Frag zuerst die KI nach Ideen, und du bekommst in Sekunden ein paar.
Du kannst mit einer Anfrage wie dieser anfangen: „Ich möchte ein einfaches Spiel machen, das im Browser läuft, in einer einzigen HTML-Datei. Gib mir fünf Spielideen, die leicht zu bauen sind. Sag mir zu jeder in einem Satz, was der Spieler tut, wie der Hintergrund aussehen würde und von welchen Figuren oder Objekten ich Bilder bräuchte.“
Such dir die Idee aus, die dir am besten gefällt, ändere, was du willst, und schon weißt du genau, welche Bilder du anfordern musst. Ein einfaches Spiel braucht drei Arten: einen Hintergrund, die Feinde und die Waffen. Bitte um jede einzeln, und bitte immer um denselben Stil, damit alles zusammenpasst. So sieht eine Anfrage aus, die funktioniert.
Für den Hintergrund habe ich etwas in dieser Art verlangt: „Zeichne einen Spielhintergrund aus der Vogelperspektive für ein Basis-Verteidigungsspiel: oben eine rissige Ruinenstraße, unten eine starke Metallmauer mit einem Tor. Dunkler, düsterer Pixel-Art-Stil, breites 16:9-Bild, ohne Text und ohne Figuren.“
Für die Feinde: „Zeichne ein Sprite-Blatt von einem grünen Cyber-Zombie in sechs Posen: zwei beim Gehen, eine mit ausgestreckten Armen, eine beim Angriff und zwei weitere. Dieselbe Figur und dieselbe Größe in jeder Pose, von vorn gesehen, mit deutlichem Abstand zwischen den Posen, auf einem einfarbigen grauen Hintergrund. Derselbe Pixel-Art-Stil wie der Hintergrund.“
Und für die Waffen und Effekte: „Zeichne einen Sci-Fi-Geschützturm in sechs Einzelbildern, ruhend und schießend, ein leuchtendes Lasertor, eine Explosion in vier Einzelbildern und einen blauen Energieblitz. Derselbe Pixel-Art-Stil, auf einem einfarbigen grauen Hintergrund.“
Eine Sache habe ich gelernt: Wenn du um einen „transparenten Hintergrund“ bittest, malen viele Bild-Tools ein falsches grau-weißes Schachbrett ins Bild, als gehörte es zur Zeichnung. Eine einfarbige Fläche funktioniert besser. Claude kann sie danach entfernen.
Schritt 2: Die Bilder an die Chat-KI geben
Öffne Claude, hänge die Bilder an und beschreibe das Spiel mit einfachen Worten. Du musst nicht wissen, wie ein Spiel funktioniert. Sag, was du sehen und tun willst, und überlass den Code der KI. Zum Beispiel:
„Hier sind drei Bilder: ein Hintergrund, ein Zombie-Sprite-Blatt und ein Turm-Blatt. Schneide die Blätter selbst in einzelne Bilder und mach daraus ein Browser-Spiel in einer einzigen Datei. Ein Turm unten verteidigt eine Mauer gegen Zombies, die in 10 Wellen kommen. Der Turm zielt mit der Maus und schießt mit der linken Taste, die rechte Taste wirft eine Granate. Für jeden Zombie gibt es Credits, mit denen man Upgrades kauft. Füge Soundeffekte und einen Boss in Welle 5 und 10 hinzu. Mach einen Startbildschirm und einen Bildschirm für Sieg oder Spielende.“
Bei mir hat Claude die Blätter in Teile geschnitten, den Hintergrund platziert, die Szene gebaut und die Level geschrieben. Ein paar Minuten später ließ sich die erste Version schon spielen. Danach habe ich noch mehr Zeit in Extras gesteckt, das ist Schritt 4.
Schritt 3: Spielen, ohne etwas zu speichern
Claude zeigt viele Antworten direkt im Chat in einer Vorschau. Kommt dein Code dagegen von ChatGPT oder Gemini, gibt es einen noch schnelleren Weg: AI Code Harvester, unsere kostenlose Chrome-Erweiterung, findet den Code in der Antwort, und der Knopf Anzeigen startet ihn live in einem neuen Tab. Du speicherst keine Datei und kopierst nichts hin und her.
Damit ist Harvester ein starkes Extra für alles, was im Browser laufen kann, ohne Dateien zu speichern: ein Spiel, ein kleines Tool, ein Seitenentwurf. Du fragst, drückst Anzeigen, schaust dir das Ergebnis an, bittest um eine Änderung und schaust wieder. Es funktioniert auf den Seiten von ChatGPT und Gemini, und unsere Anleitung HTML-Code aus ChatGPT oder Gemini ausführen und die Seite live ansehen erklärt es Schritt für Schritt.
Schritt 4: Verbessere es mit einer Bitte nach der anderen
Die erste Version ist nie die letzte, und genau das macht Spaß. Nach der ersten Version habe ich das Spiel mit einfachen Bitten verändert, eine nach der anderen. Einige davon:
- „Zeig kleine Tastenbuchstaben am Bildschirmrand, mit einem kurzen Text, damit der Spieler weiß, welche Taste was kauft.“
- „Füge einen Soldaten hinzu, der von allein Granaten auf den nächsten Zombie wirft.“ Für ihn habe ich Claude neue Bilder von Gemini gegeben.
- „Füge einen automatischen Turm hinzu, der von selbst zielt und schießt, aber langsamer als der Hauptturm.“
- „Zombies sollen nur Energie verlieren, wenn ich sie am Körper oder am Kopf treffe, nicht an den Beinen.“
- „Füge einen Pause-Knopf in der oberen linken Ecke und einen Vollbild-Knopf hinzu.“
- „Mach die letzte Welle viel größer.“
Die Regel, die am meisten Zeit spart: Bitte um eine Änderung, teste sie und bitte dann um die nächste. Wenn etwas kaputtgeht, sag „mach die letzte Änderung rückgängig“. Die KI weiß, was sie getan hat, und kann es reparieren.
Teste es auf deinem eigenen Computer, bevor du es online stellst
Bevor du das Spiel teilst, probiere es zu Hause aus, wo niemand die Fehler sieht. So ein Spiel ist eine Webseite, und dein Computer kann sie ohne Server öffnen.
- Speichere den Code als eine Datei, zum Beispiel
game.html. Wenn das Spiel Bilder aus einem Ordner nutzt, lass den Ordner neben der Datei liegen. Oder bitte die KI: „Pack die Bilder in die Datei, damit es nur eine einzige Datei ist.“ Dann kann nichts verloren gehen. - Doppelklick auf die Datei. Sie öffnet sich in deinem Browser.
- Klick einmal ins Spiel und benutze dann die Tasten. Der Browser braucht diesen ersten Klick, bevor das Spiel die Tastatur hören kann.
- Prüfe alles: Maus und Tasten, Sound, Vollbild, Pause und ob man das Spiel bis zum Ende durchspielen kann.
- Behebe, was nicht stimmt, indem du der KI genau sagst, was du gesehen hast.
Wenn es funktioniert, stell es online, damit andere spielen können. Dafür brauchst du Webhosting, das ist einfach ein Platz im Internet, der deine Dateien speichert und ihnen eine Adresse gibt. Eine einzelne Spieldatei läuft bei fast jedem Anbieter, auch bei kostenlosen. Unsere Anleitung Wo die von KI erstellte Webseite veröffentlichen geht die Möglichkeiten in einfachen Worten durch. Auf unserer eigenen Seite nutzen wir Firebase Hosting.
Um das Spiel in einer Seite deiner eigenen Website zu zeigen, füge es so ein:
<iframe src="https://yoursite.com/game.html" width="1024" height="572" allow="fullscreen"></iframe>Der Teil allow="fullscreen" erlaubt den Spielern, den Vollbild-Knopf zu benutzen. Wenn du eine neue Version hochlädst und trotzdem noch die alte siehst, drück Strg+F5, damit der Browser sie frisch lädt.
Es gibt keine Grenze
Sobald die Basis steht, ist alles Weitere nur eine Bitte entfernt: ein neuer Feind, ein neuer Hintergrund für das nächste Level, ein härterer Boss, eine andere Waffe, eine ganz neue Spielart. Für einen neuen Look bitte die Bild-KI um einen weiteren Satz Bilder und gib sie der Chat-KI. Wofür früher ein Team und Wochen Arbeit nötig waren, braucht man heute einen Abend und etwas Fantasie.
Gut zu wissen, bevor du loslegst
- Die KI macht Fehler. Etwas wird beim ersten Mal nicht klappen. Beschreibe, was du siehst, und frag noch einmal, das ist normal.
- Die erste Version geht schnell, der Feinschliff dauert länger. Die erste spielbare Version meines Spiels hat unter 10 Minuten gedauert. Die Extras kamen danach.
- Solche Spiele sind für Maus und Tastatur gemacht. Für ein Handy bitte die KI um Touch-Steuerung.
- Die Regeln für Bilder sind unterschiedlich. Prüfe, was dein Bild-Tool und dein Tarif erlauben, bevor du ein Spiel verkaufst oder bewirbst.
Was du mit dem Spiel machst, entscheidest du
Wenn das Spiel fertig ist, entscheidest du selbst, was damit passiert. Teile es in sozialen Netzwerken, schick den Link an Freunde, stell es auf deine eigene Website oder behalte es nur für dich. Es gibt keine richtige Antwort, und der Spaß liegt darin, dass du es gemacht hast.
FAQ
Ja. Du beschreibst das Spiel mit einfachen Worten, die KI schreibt den Code, und du testest das Ergebnis und bittest um Änderungen. Du musst den Code nicht verstehen, nur sagen, was du sehen willst.
Du kannst kostenlos anfangen, aber kostenlose Tarife haben Tageslimits für Bilder und Nachrichten, und ein größeres Spiel kann im Gratistarif mehr als einen Tag dauern. Viele Bild-Tools erlauben die kommerzielle Nutzung der Bilder außerdem nur im Bezahltarif, schau also in deinen Tarif.
Jede KI, die Bilder macht, kann sie zeichnen, und jede Chat-KI, die Code schreibt, kann das Spiel bauen. Ich habe Gemini für die Bilder und Claude für das Spiel benutzt. ChatGPT und Gemini können den Code auch schreiben.
Für ein einfaches Spiel aus Formen und Farben ja. Für ein Spiel mit richtiger Grafik brauchst du Bilder von einer Bild-KI, die du dann der Chat-KI gibst, damit sie sie ins Spiel einbaut.
Ja. So ein Spiel ist meistens eine einzige HTML-Datei, die bei fast jedem Webhoster läuft, auch bei kostenlosen. Du kannst es auch mit einem Iframe in einer Seite zeigen.
Solche Spiele sind für Maus und Tastatur gebaut. Wenn du es auf dem Handy willst, bitte die KI, eine Touch-Steuerung einzubauen.
Das hängt von den Regeln der Tools ab, die du für Bilder und Code benutzt hast, und sie unterscheiden sich nach Tarif. Dieser Beitrag gibt keine Rechtsberatung, lies also die Bedingungen deiner Tools, bevor du ein Spiel verkaufst oder bewirbst.
AI Code Harvester — Kostenlos, lokal, kein Konto
Von GetPlugzz. Nur lokale Verarbeitung: nichts wird hochgeladen, nichts wird verfolgt.
