Google Feud – Rate Googles Autovervollständigung - Puzzle Spiel

Bitte verwende Three.js, um ein **mobile-first Spiel** mit dem Thema "**Google Feud: 3D Trivia Challenge**" zu generieren. Bitte lies zuerst die folgenden detaillierten Spiel-Design-Anforderungen und generiere dann den Code entsprechend: ### 1. Assets & Umgebung * **Visueller Stil**: Minimalistisch, sauber und hell, imitierend das klassische Google-Suche-Erscheinungsbild, aber in einem 3D-Raum. * **Farbpalette**: Verwende die ikonischen Markenfarben: Blau (#4285F4), Rot (#EA4335), Gelb (#FBBC05) und Grün (#34A853) vor einem reinweißen Hintergrund. * **3D-Elemente**: * **Das Spielbrett**: Erstelle statt einer flachen Liste ein "Game-Show"-artiges 3D-Brett (ähnlich *Family Feud*), das in der Mitte schwebt. Es soll 10 rechteckige Felder haben, die sich um 180 Grad drehen, wenn eine richtige Antwort aufgedeckt wird. * **Fehlversuche**: Verwende 3D rote "X"-Modelle, die von oben fallen oder mit einem Kamera-Wackel-Effekt erscheinen, wenn der Spieler falsch rät. * **Performance**: Verwende einfache Geometrien (BoxGeometry, PlaneGeometry) für das Brett, um 60fps auf Mobilgeräten zu gewährleisten. Keine komplexen Texturen nötig; verlasse dich auf Vertex-Farben oder einfache Materialien. * **Beleuchtung**: Weiches Umgebungslicht mit einem gerichteten Licht, um subtile Schatten vom Antwortbrett zu werfen und ihm Tiefe zu verleihen. ### 2. Audio-Anforderungen * **Hintergrundmusik (BGM)**: Ein leichtes, nachdenkliches Jazz- oder Fahrstuhlmusik-Stück (in Schleife), das nicht ablenkt. * **Soundeffekte (SFX)**: * **Richtige Antwort**: Ein befriedigendes "Ding!" oder Glockengeräusch. * **Falsche Antwort**: Ein Summer-Sound (klassischer Game-Show-"eh-ehhh!"-Ton). * **Karten-Umdrehen**: Ein "Woosh"- oder mechanisches Klickgeräusch, wenn sich ein Antwortfeld dreht. * **Tippen**: Leise Tastaturklickgeräusche, wenn der Nutzer mit dem Eingabefeld interagiert. ### 3. Gameplay-Schleife * **Phase 1: Kategorieauswahl**: Das Spiel beginnt mit 4 schwebenden 3D-Buttons, die Kategorien repräsentieren (Kultur, Personen, Namen, Fragen). Der Spieler tippt auf einen, um zu starten. * **Phase 2: Die Anfrage**: Ein unvollständiger Suchbegriff erscheint oben (z. B. "Warum macht mein Hund..."). * **Phase 3: Raten**: * Der Spieler tippt eine Vermutung in ein HTML-Overlay-Eingabefeld. * **Logik**: Der Code benötigt ein Mock-Datenbank-Array mit Fragen und Antworten (z. B. Frage: "Warum ist mein...", Antworten: ["Internet so langsam", "Kot grün", "Katze starrt mich an"]). * **Erfolg**: Wenn die Vermutung übereinstimmt (Fuzzy Match), klappt das entsprechende Feld auf dem 3D-Brett um, um die Antwort zu enthüllen, und Punkte werden vergeben (basierend auf Suchvolumen/Ranking 1-10). * **Misserfolg**: Wenn die Vermutung falsch ist, erscheint ein rotes "X". * **Spielende**: Die Runde endet nach 3 Fehlversuchen (Verlust) oder nach dem Räumen des Bretts (Gewinn). Ein "Nochmal spielen"-Button erscheint. ### 4. Mobile Steuerung & Interaktion * **Ausrichtung**: **Hochformat** für Mobilgeräte bevorzugt (um das Aufpoppen der Tastatur zu ermöglichen, ohne das Spielfeld zu verdecken). * **Eingabemethode**: * Verwende ein standardmäßiges HTML-`<input>`-Element, das auf der Canvas am unteren Bildschirmrand überlagert ist. Es muss sauber gestylt sein. * Stelle sicher, dass die 3D-Szene sich verkleinert/verschiebt, wenn die mobile Tastatur geöffnet wird, damit das Brett nicht verdeckt wird. * **Touch-Interaktionen**: * Auf 3D-Kategorie-Buttons tippen, um sie auszuwählen. * Füge einen "Aufgeben"- oder "Ich komme nicht weiter"-Button in der UI hinzu. * **Feedback**: * **Haptisches Feedback**: Löse eine kurze Vibration (`navigator.vibrate(200)`) bei einer falschen Antwort/einem Fehlversuch aus. * **Visuelles Feedback**: Schüttele die Kamera leicht (Bildschirm-Wackeln), wenn ein Fehlversuch eintritt. Erstelle ein textbasiertes, interaktives Detektiv-Abenteuer-Spiel. **Genre:** Noir-Mysterium **Einstellung:** Eine verregnete, düstere Großstadt (Cyberpunk-Ästhetik) **Spielmechanik:** Kommandozeilen-Schnittstelle, verzweigende Narrative, Rätsellösung, Inventarsystem **Auszug aus dem Spiel:** ``` Willkommen in Neo-Avalon, Detektiv. Der ewige Regen wäscht die Sünden der Stadt nie ganz weg. Geben Sie einen Befehl ein, um zu beginnen. > INVENTAR: - Abgenutzter Trenchcoat - Halbleere Whiskyflasche - Datenchip (beschädigt) STANDORT: Ihr Büro, 4. Stock. Der Neon-Schein von außen flackert. ``` **Anforderungen:** 1. Die Handlung muss auf den Entscheidungen des Spielers basieren. 2. Implementiere ein `VERB (OBJEKT)` Parser-System. z.B. `NIMM (DATENCHIP)`, `BEFRAGE (VERDÄCHTIGEN)`. 3. Behalte einen persistenten Spielstatus (Ort, Inventar, Bekanntschaften). 4. Füge versteckte Hinweise und mehrere Enden ein. 5. Die Atmosphäre muss düster und immersiv bleiben. **Technische Hinweise:** - Verwende JavaScript für die Spiel-Logik. - Die Spieler-Eingabe erfolgt über ein `<input>` Feld. - Die Ausgabe wird in einem `<div id="game-output">` angezeigt. - Speichere den Spielstatus mit `localStorage`. **Start-Code-Snippet:** ```html <!DOCTYPE html> <html> <head> <title>Neo-Avalon Noir</title> <style> body { background-color: #0a0a12; color: #c0c0c0; font-family: monospace; } #game-output { white-space: pre-wrap; margin-bottom: 1em; } #user-input { background: #1a1a2e; color: #00ffcc; border: 1px solid #444; } </style> </head> <body> <div id="game-output"></div> <input type="text" id="user-input" autofocus /> <script> // Spielstatus-Objekt let gameState = { location: "büro", inventory: ["Abgenutzter Trenchcoat", "Halbleere Whiskyflasche", "Datenchip (beschädigt)"], knownSuspects: [] }; // ... weitere Logik hier ... </script> </body> </html>