Wie wir in einem Nachmittag ein virales Browserspiel entwickelt haben – und Sie können das auch
Sie betreiben einen Shopify-Store. Sie kennen das Prozedere: Produktfotos posten, Bildunterschriften schreiben, dem Algorithmus hinterherjagen. Jede Plattform will mehr Content, mehr Engagement, mehr Gründe für Leute, Ihren Markennamen zu teilen.
Was wäre, wenn Sie in nur einem Nachmittag ein individuelles Browsergame – gebrandet auf Ihren Store – erstellen könnten? Keine Hypothese. Wir haben es gemacht. Hier ist wie.
Der Zeitplan, der nicht möglich sein sollte
Tag 1, 14:35 Uhr - Erster Commit. Ein leeres TypeScript-Projekt.
Tag 1, 21:15 Uhr - Ein vollständig spielbares Kampfspiel im Mortal Kombat-Stil: zwei prozedural gezeichnete Dinosaurier, KI-Gegner, Soundtrack, Treffereffekte, Gewinnverfolgung über Cloudflare Workers und eine Live-Bestenliste. Bereitgestellt auf Cloudflare Pages.
Tag 2, 12:00 Uhr - Blockiger Pixel-Art-Stil eingestellt. Partikeleffekte bei jedem Treffer. Der Kampf fühlt sich befriedigend an.
Tag 2, 15:20 Uhr - „Was, wenn wir eine Elon vs. Nikita-Version machen?“ Zwanzig Minuten später: /elonvsnikita ist live. Gleiche Spiel-Engine, neue Route, Kopfbilder auf Dinosaurierkörper ausgetauscht, separate Gewinnverfolgung. Ein völlig neuer viraler Winkel aus einer einzigen Konfigurationsdatei.
Tag 2, 18:21 Uhr - Mobiles Audio behoben, Teilen-Button hinzugefügt, Sound-Umschalter optimiert. Fertig.
22 Commits. ~28 Stunden reine Arbeitszeit. Ein Entwickler. Ein KI-Agent.
Das Tool: OpenCode
OpenCode ist ein terminalbasierter KI-Code-Agent. Sie beschreiben, was Sie wollen. Er schreibt den Code, führt die Tests aus, macht Screenshots Ihres Spiels in einem echten Browser, bewertet die Optik und iteriert – alles in einer Schleife.
Das ist nicht „KI generiert Boilerplate und Sie beheben es drei Stunden lang.“ Das ist:
Sie: "Machen Sie die Dinosaurier 1,5x größer"
Agent: *bearbeitet 6 Dateien, skaliert die Physik, skaliert die KI-Schwellenwerte,
behebt den Facing-Flip-Bug, den die Skalierungsänderung eingeführt hat,
führt Typecheck aus, führt Tests aus, macht einen Screenshot, bestätigt, dass es richtig aussieht*
Sie: "Schicken Sie es ab"
Die Bearbeitungszeit für visuelle Änderungen beträgt Sekunden. Sie sagen „Zähne um 4 Pixel nach oben verschieben“, er bearbeitet den Grafikcode, Vite lädt heiß neu, der Agent macht einen Screenshot des Ergebnisses und zeigt es Ihnen. Wenn es falsch ist, korrigiert er es. Kein Alt-Tab. Keine Pixelsuche in den Devtools. Der Feedback-Loop ist sofortig.
Warum Spiele? Warum jetzt?
1. Unendlicher Videoinhalt
Nehmen Sie Ihr Spiel auf. Das ist alles. Jeder Kampf ist anders. Jeder Knockout ist ein Clip. Jedes „ELON vs. NIKITA – WER GEWINNT?“ ist ein TikTok, ein Reel, ein Short.
Sie inszenieren keine Produktfotos. Sie schreiben keine Skripte. Sie drücken auf Aufnahme und das Spiel generiert Inhalte für Sie. Der KI-Gegner erzeugt von selbst Dramatik – Comebacks, knappe Entscheidungen, perfekte KOs. Jede Session ist Filmmaterial.
Ein einziges Spiel liefert Ihnen unendlich viele einzigartige Clips, ohne sich jemals zu wiederholen.
2. SEO, das tatsächlich funktioniert
Ein Browsergame unter ihredomain.com/play ist:
- Ein Grund für Backlinks (Gaming-Blogs, Reddit, Foren)
- Ein Grund für Verweildauer (Leute bleiben und spielen)
- Eine gebrandete URL, die Spaß macht zu teilen
- Eine einzigartige Seite, die Google nicht schon tausendmal gesehen hat
Unser Spiel befindet sich unter dinokombat.radiantartshop.com. Jede Spielsitzung, jedes Teilen, jede „schau mal hier“-SMS trägt die Markendomain. Am unteren Rand jedes Bildschirms steht RADIANTARTSHOP.COM in einer leuchtenden Regenbogenanimation. Es ist keine Werbung – es ist Teil der Ästhetik des Spiels.
3. Viralität ist eingebaut
Der Teilen-Button verwendet die Web Share API auf Mobilgeräten (natives Share-Sheet) mit einer Clipboard-Fallback-Funktion auf dem Desktop. Die URL enthält UTM-Parameter. Die Bestenliste erzeugt Wettbewerb. Das Spiel ist von Natur aus teilbar, weil es Spaß macht.
Und wenn etwas im Trend liegt – Elon vs. Nikita, jeder Promi-Streit, jedes Meme – können Sie das Spiel in zwanzig Minuten anpassen. Neue Route, neue Namen, neue Kopfbilder. Gleiche Engine. Neuer viraler Moment.
Die Architektur (Es ist einfacher, als Sie denken)
Frontend: Vite + TypeScript + PixiJS (Canvas-Rendering)
Backend: Cloudflare Workers + Hono (API) + D1 (Bestenliste)
Bereitstellung: Cloudflare Pages (Frontend) + Workers (API)
Kosten: Praktisch kostenlos mit dem kostenlosen Cloudflare-Tarif
Das gesamte Spiel besteht aus ca. 8.000 Zeilen TypeScript. Kein React. Kein Framework. Nur ein Canvas, eine Spielschleife und prozedurale Grafiken. Die Dinosaurier werden aus Rechtecken gezeichnet – keine Sprite-Sheets, keine Asset-Pipeline, kein Künstler erforderlich.
Die Variante „Elon vs. Nikita“ ist eine 71 Zeilen lange Konfigurationsdatei und ein zweiter HTML-Einstiegspunkt. Das Spiel-Konfigurationssystem bedeutet, dass jede neue Variante aus Folgendem besteht:
- Hinzufügen eines Konfigurationsobjekts (Namen, Farben, Kopfbilder, Statistikschlüssel)
- Hinzufügen einer HTML-Seite, die den alternativen Einstiegspunkt importiert
- Hinzufügen einer Zeile zur Vite-Build-Konfiguration
- Bereitstellen
Das war's. Zwanzig Minuten inklusive Testen.
Die Aha-Momente
"Moment, es funktioniert einfach auf Mobilgeräten?"
Cloudflare Pages stellt es global bereit. Touch-Steuerungen werden automatisch erkannt. Der Canvas passt sich an jede Bildschirmgröße an. Mobiles Audio war der einzige knifflige Teil (Browser blockieren Autoplay), und der Agent hat das genaue Gesture-Handling-Muster herausgefunden, um es auf iOS und Android zum Laufen zu bringen.
"Ich kann eine neue Version für jedes Trendthema erstellen?"
Ja. Die Game-Engine ist die Konstante. Das Theming ist ein Konfigurationsaustausch. Wenn der nächste Internetstreit passiert, können Sie ihredomain.com/wasauchimmer-vs-werauchimmer live schalten, bevor die Memes ihren Höhepunkt erreichen. First-Mover-Vorteil bei viralen Momenten, wobei Ihre Marken-URL in jedem Share enthalten ist.
"Jeder Kampf ist ein anderer Inhalt?"
Der KI-Gegner verwendet probabilistische Entscheidungsfindung mit framebasierten Reaktionsverzögerungen. Keine zwei Kämpfe verlaufen gleich. Nehmen Sie ein paar Sitzungen auf und Sie haben eine Woche lang Kurzvideos ohne Bearbeitung.
Der KI-Gegner verwendet probabilistische Entscheidungsfindung mit framebasierten Reaktionsverzögerungen. Keine zwei Kämpfe verlaufen auf die gleiche Weise. Nehmen Sie ein paar Sessions auf und Sie haben eine Woche lang Kurzvideos ohne Bearbeitung.
"Der Agent hat die visuelle Iterationsschleife für mich durchgeführt?"
OpenCode macht Screenshots über Playwright, bewertet das Ergebnis und korrigiert sich selbst. Als wir die Zähne von der Kiefergrafik zur Kopfgrafik verschoben (damit die oberen Zähne am Maul fixiert bleiben), hat der Agent:
- Die Koordinatensysteme beider übergeordneter Container identifiziert
- Positionen zwischen lokalen Räumen mithilfe von Pivot-/Positionsmathematik konvertiert
- Die Bearbeitung vorgenommen
- Einen Screenshot des Ergebnisses erstellt
- Bemerkt, dass die Ausrichtung um einige Pixel daneben lag
- Es behoben
- Erneut einen Screenshot erstellt
- Bestätigt, dass es korrekt war
Alles in einer Konversationsrunde. Die visuelle Feedbackschleife, die normalerweise einen Entwickler Dutzende von Speichern-Aktualisieren-Schielen-Zyklen gekostet hätte, geschah automatisch.
Was Sie tatsächlich veröffentlichen würden
Stellen Sie sich vor, Sie verkaufen Dinosaurier-Spielzeug. Oder Streetwear. Oder buchstäblich alles.
-
ihrstore.com/play- Ein gebrandetes Kampfspiel mit Ihren Maskottchen - Kampf-Screenshots aufnehmen → täglich auf TikTok/Reels/Shorts posten
- "Knacken Sie den Highscore und gewinnen Sie einen Rabattcode" → Engagement + E-Mail-Erfassung
- Jeder Share trägt Ihre Domain → kostenlose Markenimpressionen
- Google indiziert eine einzigartige interaktive Seite → SEO-Boost
- Saisonale Varianten (Halloween, Black Friday) → frische Inhalte ohne neue Assets
Das Spiel muss nicht kompliziert sein. Es muss lustig genug sein, um es einmal zu teilen. Das ist die Messlatte. Und ein gut abgestimmtes Kampfspiel mit befriedigenden Treffereffekten und einer KI, die einen echten Kampf liefert, überwindet diese Messlatte spielend.
Legen Sie los
Dieses gesamte Projekt – die Game-Engine, das Konfigurationssystem, die Cloudflare-Bereitstellungspipeline, der visuelle Iterations-Workflow – ist als Referenzimplementierung verfügbar.
Möchten Sie Zugriff auf das Repository? Schreiben Sie "Dino Kombat" in einen Kommentar unten. Ich werde Sie durch das Forken, das Re-Skinning für Ihre Marke und die Bereitstellung auf Ihrer Domain führen.
Der Stack ist kostenlos (Cloudflare Free Tier). Die Tools sind kostenlos (OpenCode ist Open Source). Die einzigen Kosten sind ein Nachmittag Ihrer Zeit – und ein KI-Agent, der schneller tippt, als Sie beschreiben können, was Sie wollen.
