BennyKok/omg.dev

Construye un juego web para móvil desde el kit

La plantilla web-game es un juego completo (Coin Dash) sobre Vite + React + TypeScript. Tu trabajo es reemplazar sus reglas, vista, texto y arte con el juego del usuario. Primero móvil: un teléfono en vertical de 390 x 844, un dedo. El escritorio también debe funcionar.

Reglas fijas

1. Inicia la vista previa en vivo antes de cualquier otra cosa (paso 1 del orden de construcción). Luego escribe código: planifica en un máximo de 10 líneas, después edita. Un archivo o una característica por turno, luego bun run typecheck.
2. Nunca reconstruyas lo que el kit ya tiene (lista abajo). No añadas un motor de juego, una biblioteca de interfaz de usuario ni @react-three/fiber.
3. Las reglas del juego son funciones puras en src/games/<game>/logic.ts: sin React, DOM, dibujo, Date.now() ni Math.random(). Usa seeded(seed). La misma semilla debe producir el mismo juego: las rondas diarias y de desafío dependen de ello.
4. Sin servidor, sin inicio de sesión. El progreso se guarda en localStorage (el kit lo hace).
5. Cada afirmación en el texto debe coincidir con lo que hace el juego.
6. Verificado significa que se ha visto funcionando: bun run check:play pasó y has mirado sus capturas de pantalla en tamaño de teléfono. Un HTTP 200 desde el enlace en vivo no es una prueba. check:play es headless y no necesita escritorio ni ventana de navegador.

Lo que el kit ya hace (no reconstruir)

• Bucle de paso fijo, entrada de teclado y táctil (arrastrar en cualquier lugar, joystick, pad direccional, volante, botones de acción, multitáctil, dos jugadores, arrastrar con el ratón en un ordenador), cámara, colisiones, pausa al ocultar la pestaña.
• Una interfaz de usuario para juegos 2D y 3D en src/ui/: menú, barra HUD (insignia de puntuación, corazones, temporizador, pausa), pausa, resultados, desbloqueos, Cómo jugar y FAQ, Gira tu teléfono, notificaciones, enrutador, perfil guardado.
• Temas en src/ui/theme.ts: softCandy (por defecto), glassNeon, cleanMinimal. ?theme=glassNeon previsualiza otro.
• Mejor puntuación y desbloqueos; desafío diario (semilla de fecha, número desde el día de lanzamiento, racha); enlaces de desafío ?c=<seed>&s=<score>&n=<name> con parámetros limpiados y "Has ganado / Has perdido" más "Enviar de vuelta"; compartir con navigator.share o copia al portapapeles; sonido Web Audio después del primer toque con silencio recordado; vibración que falla silenciosamente.
• track(name, data) con game_open, game_start, game_over, play_engaged (45 s), share, challenge_open, daily_complete. Registra en la consola y envía a la analítica de omg en una página publicada. useRun en play.tsx los envía; no los envíes de nuevo.
• 100dvh, áreas seguras, sin desplazamiento ni zoom, objetivos táctiles de 48 px, movimiento reducido.
• SEO construido desde src/app/about.ts: título, descripción, Open Graph, imagen para compartir, datos de VideoGame y FAQPage. El manifiesto de instalación viene del plugin de omg Vite con public/icons/.

Elige 2D o 3D

2D por defecto (aproximadamente 100 KB gzip de script). 3D solo cuando la idea necesita profundidad; añade three.js (aproximadamente 137 KB gzip), cargado mientras se muestra el menú y nunca en una compilación 2D. Cambia con la ÚNICA línea en src/app/view.ts, luego elimina el archivo de vista no utilizado.

Elige el control

Establécelo una vez en src/app/about.ts, GAME.controls: kind, touchHint (menú en un teléfono) y keysHint (menú en un ordenador). play.tsx pasa GAME.controls.kind a <TouchControls>. Las dos pistas y howToPlay deben describir ese mismo control. Nunca escribas "arrastrar" para un juego con botones, ni "toca las flechas" para un juego de arrastre. check:ui y check:play fallan si una pista menciona otro control.

Juego	kind	El jugador hace	Las reglas leen
Paleta, atrapar, corredor, esquivador de carriles, tirachinas	drag	arrastra en cualquier lugar del campo	axisX/axisY; con mode="absolute", dragTarget para que la paleta se coloque debajo del dedo
Vista superior, movimiento libre, doble stick	stick	pulsa el joystick, abajo a la izquierda	axisX/axisY
Movimientos en cuadrícula: laberinto, serpiente, sokoban	dpad	toca cuatro flechas	axisX/axisY o wasTapped
Carreras, cambio de carril con dos teclas	steer	mantiene izquierda o derecha	axisX
Un toque: flappy, salto, tiempo	buttons	toca el botón de acción	wasTapped(input, "p1", "a")

Añade botones de acción con buttons={[...]} en cualquier tipo. axes="x" limita un arrastre a izquierda y derecha. El teclado siempre funciona: flechas o WASD, Espacio.

Orden de construcción

1. Vista previa primero, antes de editar cualquier archivo: en el directorio del proyecto ejecuta bun install si falta node_modules. Inicia bun run dev en segundo plano (puerto 5174). Llama a omg_expose_port con el puerto 5174, sin expoGo. Dile al usuario: "La vista previa está lista en la tarjeta de abajo. Se actualiza mientras construyo." Vite recarga la vista previa en cada guardado de ahora en adelante. Si los pasos de primera ejecución ya hicieron esto, o el puerto 5174 ya está en uso por el servidor de desarrollo de este proyecto, continúa al paso 2.
2. Planifica: bucle principal en una línea, tipo de control (tabla anterior), ganar, perder, puntuación y cómo termina una ronda (un reloj, vidas o elementos que caen). Ponlo en README.md.
3. Reglas: copia coin-dash/logic.ts a src/games/<game>/logic.ts. Mantén createGame(players, seed), stepGame(game, input, dt), finalScore, events (para sonido), UNLOCKS, shareLine. Lee la entrada con axisX/axisY/wasTapped.
4. Vista: copia view-2d.ts (canvas: drawWorld, drawShadow, loadImage) o view-3d.ts (three.js: createStage, chaseCamera, billboard, checkerTexture; geometría compartida, materiales Lambert, sombras de mancha, sin mapas de sombras). Dibuja la imagen de la ranura de arte cuando esté configurada, una forma de marcador de posición cuando no.
5. Cablea: en src/app/play.tsx cambia las importaciones, los números del HUD, FEEDBACK (sonido por evento), los botones y la línea run.finish({...}). Mantén <TouchControls kind={GAME.controls.kind}>, <HudScore icon={ART.scoreIcon}>, run.step y run.finish.
6. Palabras: llena src/app/about.ts (nombre, título con palabras de búsqueda, descripción, eslogan, controles, día de lanzamiento, orientación, cómo jugar en 3 a 5 pasos, consejos, 4 a 6 FAQ).
7. Arte (obligatorio): el kit incluye el arte de muestra de Coin Dash, y no debe llegar al juego del usuario. Elige el preajuste en theme.ts, o extiende uno y establece los colores del cliente. Haz imágenes con omg_generate_image en un solo estilo (una hoja, recortada en PNG transparentes, el juego de menos de 3 MB) y reemplaza cada elemento:
   • ART.hero (el arte del menú debajo del logotipo) y ART.scoreIcon (el icono de puntuación del HUD) en src/app/art.ts. Elimina public/art/hero.svg y public/art/score.svg.
   • ART.items (uno por desbloqueo) y ART.sprites.
   • public/icons/ (pwa-192x192.png, pwa-512x512.png, pwa-512x512-maskable.png, apple-touch-icon.png a 180) y public/og.png (1200 x 630). Luego mira las capturas de pantalla del menú, juego y resultados: sin corredor rojo, sin monedas, sin insignia de monedas a menos que el juego trate sobre monedas.
8. Verifica: bun run typecheck, bun test, bun run check:ui, luego bun run check:play. check:play juega una ronda a 390 x 844 con táctil: menú, Jugar, tu control, pausa, reanudar, resultados, errores de consola, arte de muestra. Abre cada PNG en .omg/ui-check/ y .omg/play-check/. Arregla cada FALLO y ADVERTENCIA, luego ejecútalos de nuevo. No publiques hasta que check:play pase.
9. Publica: omg_deploy. La primera publicación necesita public/omg-store/1.png a 3.png (menú, juego, resultados a 390 x 844). Espera un minuto, luego ejecuta bun run check:play -- --url <enlace en vivo> y mira sus capturas de pantalla. Informa solo lo que pasó allí.

Edita src/ui/, src/game/ y src/render/ solo cuando un error del kit te bloquee. Añade ayudantes en tu carpeta de juego.

Reglas para teléfono

• Mantén la etiqueta viewport, styles.css, page.ts. Coloca los elementos del HUD dentro de <Hud>. Los controles importantes permanecen en la mitad inferior.
• Sin setInterval, setTimeout ni Date.now() para el tiempo del juego: cuenta dt.
• Sin alert, confirm, prompt, fuentes externas ni scripts.
• 3D: como máximo unos cientos de mallas, reutiliza geometría y materiales, sin postprocesado, sin texturas grandes.
• En teléfonos, la barra de instalación de omg se sitúa debajo del juego, y el juego se convierte en una tarjeta encima. No la ocultes ni la muevas.

Informe final

1. Enlace en vivo. 2. El juego en una frase. 3. Qué se probó y a qué tamaños, con el resultado de check:play en el enlace en vivo. 4. Capturas de pantalla del menú, juego y resultados. 5. Problemas conocidos o ideas siguientes (máximo 5). Di si el 3D se comprobó en un teléfono real.

Lecciones ya aprendidas

• Un botón al final de una fila que se desplaza lateralmente se salía de la pantalla y los jugadores se quedaban atascados. check:ui falla en ese botón; mantén los botones clave visibles a 360 px.
• Se afirmó "Verificado" justo después de un despliegue mientras el sitio en vivo aún servía la compilación anterior. Vuelve a comprobar tras una breve espera.
• Las copias de un juego se desviaban de la fuente. Construye desde una carpeta; nunca parchees una copia.
• Fruit Catcher (22 Oct) decía "Arrastra a izquierda o derecha para mover la cesta" sobre un par de botones de flecha; arrastrar no hacía nada. Configura GAME.controls y deja que check:play lo maneje.
• El mismo juego se publicó con el corredor rojo del kit, monedas, insignia de puntuación de monedas e icono de monedas. El paso 7 reemplaza todo; check:play falla con cualquier archivo de muestra.
• El usuario no vio vista previa durante 5 minutos porque el puerto nunca se expuso. El paso 1 viene antes de cualquier edición.
• El agente escribió "el navegador de escritorio no se estaba ejecutando" y comprobó el enlace en vivo solo con HTTP. check:play es headless; ejecútalo en el enlace en vivo.
• Los anuncios optimizados para un nuevo evento personalizado (play_engaged) se eliminaron. Inicia los anuncios con un objetivo estándar, cambia una vez que el evento se active unas 50 veces por semana.