Ein Spiel gevibed – Sushi Order Disorder 🍣
Am in KI & Machine Learning | 2 Kommentare »
Tags: KI, TypeScript
Ich weiß, ich weiß, es wird langweilig, aber ich habe mal wieder was gevibed und muss das kurz hier teilen. Sushi Order Disorder ist ein kleines Casual Game, bei dem bis zu 4 Spieler zusammen Sushi Bestellungen in einer chaotischen Sushi Küche abarbeiten müssen.
Ich wollte ein gemeinsames Spiel spielen, aber die zigste Mario Kart Session war langweilig. Deshalb kam spontan die Idee auf, ob man nicht ein eigenes Spiel viben könnte?
Zunächst haben meine Mitspieler und ich uns tagsüber überlegt, was uns für ein Spiel Spaß machen würde. Es sollte ein kooperatives Spiel sein, das man lokal an einem Rechner mit Tastatur und Gamepads spielen kann. Es sollte nur einen Bildschirm geben und keine Split-Screens wie bei Mario Kart. Wir haben verschiedene Ideen wie ein gemeinsames Space Invaders oder ein Tower Defence diskutiert, aber konnten uns nicht recht vorstellen, wie das sinnvoll als Kooperation gehen soll. Dann haben wir uns an ein Spiel erinnert, dass wir vor Jahren gemeinsam gespielt haben. Da musste man in einer Küche verschiedene Menüs kochen. Das war sehr hektisch, da man erst Zutaten holen, schneiden und braten musste. Inzwischen weiß ich wieder, wie das Spiel heißt: Overcooked bzw. die diversen Nachfolger.
Und damit war die Idee für Sushi Order Disorder geboren :-)
Ich habe dann OpenAI GPT-6 Sol gebeten, das Spielprinzip und die Regeln für meine Variante einer Sushi Küche auszuarbeiten. Damit hatte ich meine erste README.md mit den Spielregeln und dem Spielprinzip.
Anschließend habe ich GPT-6 Sol gebeten, mir einen Plan für die Implementierung auszuarbeiten. Die Vorgaben waren:
- lauffähig im Browser
- minimale externe Abhängigkeiten
- Unterstützung von Gamepads
- Typescript und passender Bundler
- Aufbau eines Test Harness zu Beginn der Implementierung
- Definition von Skills zur effizienten Implementierung
Heraus kam ein PLAN.md mit 13 Arbeitsschritten (Slices genannt) sowie eine AGENTS.md mit dem technischen Aufbau. Weiterhin hat GPT-6 noch einen Skill definiert, wie es eine Arbeitsschritt aus dem Plan umzusetzen hat.
Und dann konnte die Implementierung auch schon starten. Für die Implementierung habe ich den Coding Agent „Junie“ in PyCharm verwendet, da ich dort noch ein unverbrauchtes Token Budget hatte. Junie stehen diverse Modelle zur Verfügung und es hat für die Implementierung „Gemini 3.7 Flash“ mit „Medium effort“ benutzt. Der Prompt sah immer gleich aus:
Implementiere Slice G3 aus @file:PLAN.md
Nach jedem Slice habe ich das Spiel manuell getestet und Junie informiert, falls etwas nicht wie erwartet funktioniert. Tatsächlich waren aber nur wenige Nacharbeiten notwendig.
Junie hat auch alle Spielgrafiken selbst erzeugt. Das geht, weil die Grafiken SVG Dateien sind und damit auch nur zu generierender Text.
Tja, und dann war das Spiel auch schon fertig. Ich habe dann noch ein paar wenige Runden gedreht, damit das Spiel direkt bei GitHub gebaut und auf einer Website veröffentlicht wird.
Die Kosten für das Spiel betragen ca. 15€. Ich kann es nicht genau sagen, da der größte Teil von Junie erledigt wurde und mir ein monatliches Token Budget für Junie durch mein PyCharm Abo sowieso zur Verfügung steht.
Perfekt ist das Spiel nicht. Die Grafiken sind funktional, aber nicht professionell. Es gibt auch nur 1 Level und so richtig chaotisch oder schwierig ist das Spiel auch nicht. Aber das reine Spiel ist fehlerfrei, die Figuren bewegen sich sauber durch den Raum, Gegenstände wie der Kühlschrank blockieren den Laufweg und tatsächlich kann man für Spieler 3 und 4 ein Gamepad benutzen. Das finde ich alles sehr beeindrucken. Ich hätte es vermutlich nicht selbst schreiben können.
Sucht der geneigte Leser gerade Ablenkung und hat bereits TikTok für heute durchgescrollt, dann:
Viel Spaß beim Spielen!
Wurde nur HTML / JS / CSS verwendet oder ein Gaming-Framework?
Das ist reines HTML / Typescript/ CSS mit SVG Grafiken. Einzig für die Übersetzung der Oberfläche wird eine Typescript Bibliothek verwendet. Alles andere hat sich der Agent selbst ausgedacht bzw. anhand zahlreicher Beispiele im Netz zusammengebaut.