BennyKok/omg.dev

Erstelle ein Handy-Webspiel aus dem Kit

Die Vorlage web-game ist ein fertiges Spiel (Coin Dash) mit Vite + React + TypeScript. Deine Aufgabe ist es, die Regeln, die Ansicht, den Text und die Grafiken durch das Spiel des Benutzers zu ersetzen. Mobile First: ein Hochformat-Handy mit 390 x 844, ein Daumen. Desktop muss auch funktionieren.

Feste Regeln

1. Starte die Live-Vorschau, bevor du irgendetwas anderes tust (Build-Reihenfolge Schritt 1). Schreibe dann Code: plane in maximal 10 Zeilen, dann bearbeite. Eine Datei oder ein Feature pro Durchgang, dann bun run typecheck.
2. Baue niemals das nach, was das Kit bereits hat (Liste unten). Füge keine Spiel-Engine, keine UI-Bibliothek und kein @react-three/fiber hinzu.
3. Spielregeln sind reine Funktionen in src/games/<game>/logic.ts: kein React, DOM, Zeichnung, Date.now() oder Math.random(). Verwende seeded(seed). Der gleiche Seed muss das gleiche Spiel ergeben: Tägliche und Challenge-Runden hängen davon ab.
4. Kein Server, keine Anmeldung. Der Fortschritt bleibt in localStorage (das Kit erledigt das).
5. Jede Behauptung im Text muss mit dem übereinstimmen, was das Spiel tut.
6. Verifiziert bedeutet funktionierend gesehen: bun run check:play bestanden und du hast seine Screenshots in Handygröße angesehen. Ein HTTP 200 vom Live-Link ist kein Test. check:play ist kopflos und benötigt weder Desktop noch Browserfenster.

Was das Kit bereits tut (nicht neu bauen)

• Fest inkrementelle Schleife, Tastatur- und Touch-Eingabe (überall ziehen, Stick, Steuerkreuz, Lenken, Aktionsknöpfe, Multi-Touch, zwei Spieler, Maus ziehen am Computer), Kamera, Kollision, Pause bei Tab-Ausblendung.
• Eine Spiel-UI für 2D und 3D in src/ui/: Menü, HUD-Leiste (Punktestand-Anzeige, Herzen, Timer, Pause), Pause, Ergebnisse, Freischaltungen, Spielanleitung und FAQ, „Handy drehen“, Toasts, Router, gespeichertes Profil.
• Themes in src/ui/theme.ts: softCandy (Standard), glassNeon, cleanMinimal. ?theme=glassNeon zeigt eine Vorschau eines anderen.
• Bestpunktzahl und Freischaltungen; tägliche Herausforderung (Datum als Seed, Nummer ab Starttag, Serie); Challenge-Links ?c=<seed>&s=<score>&n=<name> mit bereinigten Parametern und „Du hast gewonnen / Du hast verloren“ plus „Zurückschicken“; Teilen mit navigator.share oder Zwischenablage-Kopie; Web Audio Sound nach dem ersten Antippen mit gespeichertem Stummschalten; Vibration, die stillschweigend fehlschlägt.
• track(name, data) mit game_open, game_start, game_over, play_engaged (45 s), share, challenge_open, daily_complete. Es protokolliert in der Konsole und sendet an omg-Analyse auf einer veröffentlichten Seite. useRun in play.tsx sendet sie; sende sie nicht erneut.
• 100dvh, Safe Areas, kein Scrollen oder Zoomen, Touch-Ziele von 48 px, reduzierte Bewegung.
• SEO aufgebaut aus src/app/about.ts: Titel, Beschreibung, Open Graph, Teilen-Bild, VideoGame- und FAQPage-Daten. Das Installationsmanifest kommt vom omg Vite-Plugin mit public/icons/.

Wähle 2D oder 3D

2D standardmäßig (etwa 100 KB gzip Script). 3D nur, wenn die Idee Tiefe benötigt; es fügt three.js hinzu (etwa 137 KB gzip), das geladen wird, während das Menü angezeigt wird, und niemals in einem 2D-Build. Wechsle mit der EINEN Zeile in src/app/view.ts, lösche dann die nicht verwendete View-Datei.

Wähle die Steuerung

Setze es einmal in src/app/about.ts, GAME.controls: kind, touchHint (Menü auf einem Handy) und keysHint (Menü auf einem Computer). play.tsx übergibt GAME.controls.kind an <TouchControls>. Die beiden Hinweise und howToPlay müssen genau diese Steuerung beschreiben. Schreibe niemals „Ziehen“ für ein Spiel mit Knöpfen oder „Tippe auf die Pfeile“ für ein Ziehspiel. check:ui und check:play schlagen bei einem Hinweis fehl, der eine andere Steuerung benennt.

Spiel	kind	Spieler tut	Regeln lesen
Schläger, Fangen, Runner, Spur-Ausweichen, Schleuder	drag	zieht überall auf dem Spielfeld	axisX/axisY; mit mode="absolute", dragTarget, damit der Schläger unter dem Finger sitzt
Top-Down, freie Bewegung, Twin-Stick	stick	bedient den Joystick mit dem Daumen, unten links	axisX/axisY
Gitterbewegungen: Labyrinth, Snake, Sokoban	dpad	tippt auf vier Pfeile	axisX/axisY oder wasTapped
Rennspiel, Spurwechsel mit zwei Tasten	steer	hält links oder rechts	axisX
Ein-Tippen: Flappy, Springen, Timing	buttons	tippt auf den Aktionsknopf	wasTapped(input, "p1", "a")

Füge Aktionsknöpfe mit buttons={[...]} bei jeder Art hinzu. axes="x" beschränkt ein Ziehen auf links und rechts. Die Tastatur funktioniert immer: Pfeiltasten oder WASD, Leertaste.

Build-Reihenfolge

1. Vorschau zuerst, bevor du eine Datei bearbeitest: Führe im Projektverzeichnis bun install aus, wenn node_modules fehlt. Starte bun run dev im Hintergrund (Port 5174). Rufe omg_expose_port mit Port 5174 auf, ohne expoGo. Sage dem Benutzer: „Die Vorschau ist in der Karte unten bereit. Sie aktualisiert sich, während ich baue.“ Vite lädt die Vorschau bei jedem Speichern ab hier neu. Wenn die Ersteinrichtungsschritte dies bereits getan haben oder Port 5174 bereits von diesem Dev-Server des Projekts verwendet wird, fahre mit Schritt 2 fort.
2. Plan: Kernschleife in einer Zeile, Steuerungsart (Tabelle oben), Gewinnen, Verlieren, Punktzahl und wie eine Runde endet (eine Uhr, Leben oder fallende Gegenstände). Schreibe es in README.md.
3. Regeln: Kopiere coin-dash/logic.ts nach src/games/<game>/logic.ts. Behalte createGame(players, seed), stepGame(game, input, dt), finalScore, events (für Sound), UNLOCKS, shareLine. Lese Eingaben mit axisX/axisY/wasTapped.
4. Ansicht: Kopiere view-2d.ts (Canvas: drawWorld, drawShadow, loadImage) oder view-3d.ts (three.js: createStage, chaseCamera, billboard, checkerTexture; gemeinsame Geometrie, Lambert-Materialien, Blob-Schatten, keine Schattenkarten). Zeichne das Kunst-Slot-Bild, wenn gesetzt, eine Platzhalterform, wenn nicht.
5. Verdrahtung: Ändere in src/app/play.tsx die Importe, die HUD-Zahlen, FEEDBACK (Sound pro Ereignis), die Knöpfe und die Zeile run.finish({...}). Behalte <TouchControls kind={GAME.controls.kind}>, <HudScore icon={ART.scoreIcon}>, run.step und run.finish.
6. Wörter: Fülle src/app/about.ts aus (Name, Titel mit Suchbegriffen, Beschreibung, Tagline, Steuerung, Starttag, Ausrichtung, Spielanleitung in 3 bis 5 Schritten, Tipps, 4 bis 6 FAQ).
7. Grafiken (erforderlich): Das Kit enthält Beispielgrafiken von Coin Dash, und diese dürfen nicht im Spiel des Benutzers landen. Wähle das Preset in theme.ts, oder verteile eines und setze die Farben des Kunden. Erstelle Bilder mit omg_generate_image in einem Stil (ein Blatt, in transparente PNGs geschnitten, das Spiel unter 3 MB) und ersetze jedes Element:
   • ART.hero (die Menügrafik unter dem Logo) und ART.scoreIcon (das HUD-Punktestand-Symbol) in src/app/art.ts. Lösche public/art/hero.svg und public/art/score.svg.
   • ART.items (eines pro Freischaltung) und ART.sprites.
   • public/icons/ (pwa-192x192.png, pwa-512x512.png, pwa-512x512-maskable.png, apple-touch-icon.png mit 180) und public/og.png (1200 x 630). Sieh dir dann die Screenshots von Menü, Spiel und Ergebnissen an: kein roter Runner, keine Münzen, keine Münz-Anzeige, es sei denn, das Spiel handelt von Münzen.
8. Prüfung: bun run typecheck, bun test, bun run check:ui, dann bun run check:play. check:play spielt eine Runde mit 390 x 844 und Touch: Menü, Spielen, deine Steuerung, Pause, Fortsetzen, Ergebnisse, Konsolenfehler, Beispielgrafiken. Öffne jedes PNG in .omg/ui-check/ und .omg/play-check/. Behebe jedes FEHLGESCHLAGEN und WARNUNG und führe sie dann erneut aus. Veröffentliche erst, wenn check:play bestanden ist.
9. Veröffentlichen: omg_deploy. Die erste Veröffentlichung benötigt public/omg-store/1.png bis 3.png (Menü, Spiel, Ergebnisse bei 390 x 844). Warte eine Minute, führe dann bun run check:play -- --url <Live-Link> aus und sieh dir seine Screenshots an. Berichte nur, was dort bestanden hat.

Bearbeite src/ui/, src/game/ und src/render/ nur, wenn ein Kit-Bug dich blockiert. Füge Helfer in deinem Spielordner hinzu.

Handyregeln

• Behalte das Viewport-Tag, styles.css, page.ts. Platziere HUD-Elemente innerhalb von <Hud>. Wichtige Steuerelemente bleiben in der unteren Hälfte.
• Kein setInterval, setTimeout oder Date.now() für die Spielzeit: zähle dt.
• Kein alert, confirm, prompt, externe Schriftarten oder Skripte.
• 3D: maximal ein paar hundert Meshes, verwende Geometrie und Materialien wieder, keine Nachbearbeitung, keine großen Texturen.
• Auf Handys sitzt die omg-Installationsleiste unter dem Spiel, und das Spiel wird zu einer Karte darüber. Verstecke oder verschiebe sie nicht.

Abschlussbericht

1. Live-Link. 2. Das Spiel in einem Satz. 3. Was wurde getestet und in welchen Größen, mit dem check:play-Ergebnis auf dem Live-Link. 4. Screenshots von Menü, Spiel und Ergebnissen. 5. Bekannte Probleme oder nächste Ideen (maximal 5). Gib an, ob 3D auf einem echten Handy getestet wurde.

Bereits gelernte Lektionen

• Ein Knopf am Ende einer seitlich scrollenden Zeile war außerhalb des Bildschirms und Spieler blieben hängen. check:ui lässt einen solchen Knopf fehlschlagen; halte wichtige Knöpfe auf dem Bildschirm bei 360 px.
• „Verifiziert“ wurde direkt nach einem Deployment behauptet, während die Live-Seite noch den alten Build auslieferte. Überprüfe nach einer kurzen Wartezeit erneut.
• Kopien eines Spiels drifteten von der Quelle ab. Baue aus einem Ordner; patche niemals eine Kopie.
• Fruit Catcher (22. Okt.) sagte „Ziehe nach links oder rechts, um den Korb zu bewegen“ über einem Paar Pfeiltasten; Ziehen tat nichts. Setze GAME.controls und lass check:play es treiben.
• Das gleiche Spiel wurde mit dem roten Runner, Münzen, Münz-Punktestand-Anzeige und Münz-App-Symbol des Kits ausgeliefert. Schritt 7 ersetzt alle; check:play schlägt bei jeder Beispieldatei fehl.
• Der Benutzer sah 5 Minuten lang keine Vorschau, weil der Port nie freigegeben wurde. Schritt 1 kommt vor jeder Bearbeitung.
• Der Agent schrieb „der Desktop-Browser lief nicht“ und überprüfte den Live-Link nur mit HTTP. check:play ist kopflos; führe es auf dem Live-Link aus.
• Anzeigen, die für ein neues benutzerdefiniertes Ereignis (play_engaged) optimiert waren, wurden eingestellt. Starte Anzeigen auf einem Standardziel, wechsle, sobald das Ereignis etwa 50 Mal pro Woche feuert.