Super Star Car - Carreras Juego

Utilice Three.js para generar un **juego con enfoque móvil** con el tema "**Super Star Car: F1 Mobile Arcade**". Lea primero los siguientes requisitos detallados de diseño del juego y luego genere el código en consecuencia: ### 1. Recursos y Entorno * **Estilo Visual:** Estilo de "Simulación Arcade" de alta saturación. El mundo debe verse vibrante con un enfoque en la velocidad. * **Recurso Principal (El Coche):** Un coche de carreras de estilo F1 con ruedas descubiertas. Use una malla *low-poly* elegante (aprox. 1000-1500 tris) con `MeshStandardMaterial` para crear un efecto de pintura metálica y brillante (que se asemeje a la librea de Red Bull en la referencia: azul oscuro con acentos amarillos/rojos). * **La Pista:** Un circuito de carreras cerrado con texturas de asfalto gris, franjas distintivas rojas y blancas (bandas de vibración) en las curvas y terreno de césped verde *low-poly*. * **Detalles del Entorno:** Use un Skybox simple (cielo azul con nubes) para simular el horizonte. Use *sprites* de cartel simple (planos que siempre miran hacia la cámara) para multitudes o árboles distantes para ahorrar rendimiento de la GPU móvil. * **Efectos Visuales:** Renderizadores de estela simple para las luces traseras, sistemas de partículas para el humo de los neumáticos al derrapar y simulación de desenfoque de movimiento (o líneas de velocidad) a altas velocidades. * **Optimización Móvil:** Use *object pooling* para las partículas. Limite las sombras en tiempo real solo al coche del jugador. ### 2. Requisitos de Audio * **Banda Sonora (BGM):** Pista de rock electrónico o tecno de alta energía y ritmo rápido que se reproduzca en bucle de manera continua para mantener la adrenalina. * **Efectos de Sonido (SFX):** * **Motor:** Un chillido de motor de F1 agudo que cambia de tono según la velocidad/RPM del coche. * **Neumáticos:** Sonido de chirrido que se activa cuando la velocidad lateral del coche supera un cierto umbral (derrape/giro brusco). * **UI:** un "clic" nítido para los botones, y un pitido digital de "cuenta atrás" (3... 2... 1... YA). * **Impacto:** Un "golpe" metálico al chocar con barreras u otros coches. ### 3. Ciclo de Juego * **Mecánica Principal:** El jugador compite contra 3-5 oponentes de IA (con lógica simple de búsqueda de ruta que sigue las curvas spline de la pista) en una carrera de 3 vueltas. * **Progresión:** Completar una carrera otorga "Dinero". * **Sistema de Mejoras:** Implementar una interfaz de garaje simple entre carreras donde los jugadores puedan gastar Dinero para mejorar la "Velocidad Máxima" (límite de velocidad), la "Aceleración" (par motor) o el "Manejo" (radio de giro). * **Condición de Victoria:** Terminar entre los 3 primeros para desbloquear la siguiente pista u obtener moneda extra. * **Condición de Fracaso:** Terminar último o no completar la vuelta dentro de un límite de tiempo (temporizador arcade opcional). ### 4. Controles e Interacción Móvil * **Orientación:** El **Modo Apaisado** es obligatorio. * **Controles Táctiles (Diseño de la UI):** * **Pulgar Izquierdo:** Dos botones grandes y semitransparentes (Flecha Izquierda / Flecha Derecha) o un deslizador horizontal virtual para la dirección. * **Pulgar Derecho:** Dos botones grandes: "Acelerador" (más grande, con tinte verde) y "Freno/Marcha Atrás" (más pequeño, con tinte rojo). * **Alternar Cámara:** Un botón pequeño con icono en la esquina superior derecha para cambiar entre "Cámara de Seguimiento en Tercera Persona" y "Cámara en Primera Persona". * **Reaparición:** Un icono de "Reiniciar" en la esquina superior izquierda (en caso de que el coche vuelque o quede atascado), distinto del menú de pausa. * **Retroalimentación:** * **Háptica:** Activar `navigator.vibrate(50)` en colisiones o al conducir fuera de la pista (sobre hierba). * **Visual:** Ligero efecto de sacudida de cámara al conducir a velocidad máxima o en colisiones. Los botones de la UI deben reducirse ligeramente al ser presionados para dar una confirmación visual del toque. Genera un juego de rol en el navegador inspirado en *A Link to the Past* con un giro **cyberpunk** y **misterioso**. **Premisa central:** Eres un **desfragmentador de memoria**, un mercenario que navega por el **Grid**, una realidad digital superpuesta a una ciudad en ruinas. Tu herramienta principal es el **Nexus-Deck**, un dispositivo que te permite manipular objetos y recuerdos digitalizados. **Mecánicas clave:** 1. **Dos realidades:** Cambia entre la **Ciudad Física** (entorno pixel art en 2D, plataformas, puzles) y el **Grid** (visualización de vectores brillantes, caminos ocultos, enemigos de datos). 2. **Nexus-Deck:** Interfaz estilo línea de comandos para comandos como `SCAN`, `FORCE`, `JACK`, `DECRYPT`. 3. **Fragmentos:** Recoge **Fragmentos de Memoria** para desbloquear habilidades del deck y revelar la historia. 4. **Enemigos:** **Corruptores** (glitches en el Grid), **Guardianes** (IA de seguridad) y **Cazadores de Datos** (otros mercenarios). **Tono visual y narrativo:** * **Arte:** Pixel art detallado con paletas de neón (`#00ff9d`, `#ff0080`, `#2900ff`) para el Grid. La ciudad es oscura, lluviosa. * **Historia:** No lineal. Los **Fragmentos de Memoria** (textos, logs de audio, imágenes estáticas) cuentan la historia de forma fragmentada. * **Interfaz:** HUD minimalista inspirado en terminales antiguas. Fuente monoespaciada. **Estructura técnica inicial (ejemplo en código):** ```html <div id="game-container"> <canvas id="world-canvas" width="640" height="480"></canvas> <div id="nexus-hud" class="terminal-style"> <p>> COMANDO: <span id="cmd-input">_</span></p> <p>> ESTADO GRID: <span class="status" data-status="stable">ESTABLE</span></p> </div> </div> ``` ```css .terminal-style { font-family: 'Courier New', monospace; color: #00ff9d; background-color: #0a0a12; } .status[data-status="stable"] { color: #00ff9d; } .status[data-status="critical"] { color: #ff0080; } ``` **Objetivo para el jugador:** Encuentra el **Núcleo Primario**, la memoria original del Grid, para decidir si **reiniciar** el sistema o **corromperlo** para tu beneficio.