Cómo construimos un juego de navegador viral en una tarde, y tú también puedes hacerlo
Tienes una tienda Shopify. Conoces el esfuerzo: publicar fotos de productos, escribir descripciones, perseguir el algoritmo. Cada plataforma quiere más contenido, más interacción, más razones para que la gente comparta el nombre de tu marca.
¿Y si pudieras construir un juego de navegador personalizado, con la marca de tu tienda, en una sola tarde? No es una hipótesis. Lo hicimos. Aquí te explicamos cómo.
La línea de tiempo que no debería ser posible
Día 1, 2:35 PM - Primer commit. Un proyecto TypeScript en blanco.
Día 1, 9:15 PM - Un juego de lucha totalmente jugable al estilo Mortal Kombat: dos dinosaurios dibujados proceduralmente, oponente de IA, banda sonora, efectos de impacto, seguimiento de victorias a través de Cloudflare Workers y una tabla de clasificación en vivo. Desplegado en Cloudflare Pages.
Día 2, 12:00 PM - Estilo pixel art cuadriculado afinado. Efectos de partículas en cada golpe. El combate se siente satisfactorio.
Día 2, 3:20 PM - "¿Qué tal si hacemos una versión de Elon vs Nikita?" Veinte minutos después: /elonvsnikita está en vivo. El mismo motor de juego, nueva ruta, imágenes de cabezas intercambiadas por cuerpos de dinosaurios, seguimiento de victorias separado. Un nuevo ángulo viral a partir de un solo archivo de configuración.
Día 2, 6:21 PM - Audio móvil corregido, botón de compartir añadido, alternador de sonido pulido. Hecho.
22 commits. ~28 horas de reloj. Un desarrollador. Un agente de IA.
La herramienta: OpenCode
OpenCode es un agente de codificación de IA basado en terminal. Describes lo que quieres. Escribe el código, ejecuta las pruebas, toma capturas de pantalla de tu juego en un navegador real, evalúa los aspectos visuales e itera, todo en un bucle.
Esto no es "la IA genera código base y tú lo arreglas durante tres horas". Esto es:
Tú: "Haz los dinosaurios 1.5 veces más grandes"
Agente: *edita 6 archivos, escala la física, escala los umbrales de la IA,
arregla el error de volteo introducido por el cambio de escala,
ejecuta la verificación de tipos, ejecuta las pruebas, toma una captura de pantalla, confirma que se ve bien*
Tú: "Envíalo"
El tiempo de respuesta de los cambios visuales es de segundos. Dices "mueve los dientes 4 píxeles hacia arriba", edita el código gráfico, Vite se recarga en caliente, el agente hace una captura de pantalla del resultado y te lo muestra. Si está mal, lo corrige. Sin cambiar de pestaña. Sin buscar píxeles en las herramientas de desarrollo. El ciclo de retroalimentación es instantáneo.
¿Por qué juegos? ¿Por qué ahora?
1. Contenido de video infinito
Graba tu juego. Eso es todo. Cada pelea es diferente. Cada nocaut es un clip. Cada "¿ELON vs NIKITA - ¿QUIÉN GANA?" es un TikTok, un Reel, un Short.
No estás montando fotos de productos. No estás escribiendo guiones. Presionas grabar y el juego genera contenido para ti. El oponente de IA crea drama por sí mismo: remontadas, momentos cercanos, KOs perfectos. Cada sesión es material.
Un solo juego te ofrece clips únicos infinitos sin repetirte nunca.
2. SEO que realmente funciona
Un juego de navegador en tudominio.com/jugar es:
- Una razón para obtener backlinks (blogs de juegos, Reddit, foros)
- Una razón para aumentar el tiempo de permanencia (la gente se queda y juega)
- Una URL de marca que es divertida de compartir
- Una página única que Google no ha visto mil veces
Nuestro juego reside en dinokombat.radiantartshop.com. Cada sesión de juego, cada vez que se comparte, cada mensaje de texto de "mira esto" lleva el dominio de la marca. En la parte inferior de cada pantalla aparece RADIANTARTSHOP.COM en una animación brillante de arcoíris. No es un anuncio, es parte de la estética del juego.
3. La viralidad está incorporada
El botón de compartir utiliza la API de Web Share en móviles (hoja de compartir nativa) con un respaldo de portapapeles en escritorio. La URL incluye parámetros UTM. La tabla de clasificación crea competencia. El juego es intrínsecamente compartible porque es divertido.
Y cuando algo se vuelve tendencia (Elon vs Nikita, cualquier disputa entre celebridades, cualquier meme), puedes adaptar el juego en veinte minutos. Nueva ruta, nuevos nombres, nuevas imágenes de cabezas. El mismo motor. Un nuevo momento viral.
La arquitectura (es más simple de lo que crees)
Frontend: Vite + TypeScript + PixiJS (renderizado de lienzo)
Backend: Cloudflare Workers + Hono (API) + D1 (tabla de clasificación)
Despliegue: Cloudflare Pages (frontend) + Workers (API)
Costo: Prácticamente gratis en el nivel gratuito de Cloudflare
El juego completo tiene ~8,000 líneas de TypeScript. Sin React. Sin framework. Solo un lienzo, un bucle de juego y gráficos procedimentales. Los dinosaurios se dibujan a partir de rectángulos, sin hojas de sprites, sin tubería de activos, sin necesidad de un artista.
La variante "Elon vs Nikita" es un archivo de configuración de 71 líneas y un segundo punto de entrada HTML. El sistema de configuración del juego significa que cualquier nueva variante es:
- Añadir un objeto de configuración (nombres, colores, imágenes de cabezas, claves de estadísticas)
- Añadir una página HTML que importe el punto de entrada alternativo
- Añadir una línea a la configuración de compilación de Vite
- Desplegar
Eso es todo. Veinte minutos incluyendo las pruebas.
Los momentos clave
"Espera, ¿simplemente... funciona en móvil?"
Cloudflare Pages lo sirve globalmente. Los controles táctiles se detectan automáticamente. El lienzo se adapta a cualquier pantalla. El audio móvil fue la única parte complicada (los navegadores bloquean la reproducción automática), y el agente descubrió el patrón exacto de manejo de gestos para que funcionara en iOS y Android.
"¿Puedo crear una nueva versión para cualquier tema de tendencia?"
Sí. El motor del juego es lo constante. El tema es un cambio de configuración. Cuando ocurra la próxima disputa en internet, puedes tener tudominio.com/lo-que-sea-contra-quien-sea en vivo antes de que los memes alcancen su punto máximo. Ventaja de ser el primero en los momentos virales, con la URL de tu marca integrada en cada compartición.
"¿Cada pelea es contenido diferente?"
El oponente de IA utiliza la toma de decisiones probabilística con retrasos de reacción basados en fotogramas. No hay dos peleas iguales. Graba unas cuantas sesiones y tendrás una semana de contenido de formato corto sin necesidad de edición.
"¿El agente hizo el bucle de iteración visual por mí?"
OpenCode toma capturas de pantalla a través de Playwright, evalúa el resultado y se autocorrige. Cuando movimos los dientes del gráfico de la mandíbula al gráfico de la cabeza (para que los dientes superiores se mantuvieran fijos con el hocico), el agente:
- Identificó los sistemas de coordenadas de ambos contenedores padre
- Convirtió las posiciones entre espacios locales usando matemáticas de pivote/posición
- Realizó la edición
- Tomó una captura de pantalla del resultado
- Notó que la alineación estaba unos píxeles desplazada
- La corrigió
- Volvió a tomar una captura de pantalla
- Confirmó que era correcta
Todo en un solo turno de conversación. El ciclo de retroalimentación visual que normalmente le llevaría a un desarrollador docenas de ciclos de guardar-actualizar-entrecerrar los ojos, ocurrió automáticamente.
Lo que realmente enviarías
Imagina que vendes juguetes de dinosaurios. O ropa urbana. O literalmente cualquier cosa.
-
tutienda.com/jugar- Un juego de lucha de marca con tus mascotas - Graba peleas → publica diariamente en TikTok/Reels/Shorts
- "Supera la puntuación más alta y gana un código de descuento" → compromiso + captura de correo electrónico
- Cada vez que se comparte lleva tu dominio → impresiones de marca gratuitas
- Google indexa una página interactiva única → impulso de SEO
- Variantes estacionales (Halloween, Black Friday) → contenido fresco sin nuevos activos
El juego no necesita ser complicado. Necesita ser lo suficientemente divertido como para compartirlo una vez. Ese es el listón. Y un juego de lucha bien ajustado con efectos de impacto satisfactorios y una IA que ofrece una verdadera pelea supera ese listón fácilmente.
Empieza
Todo este proyecto (el motor del juego, el sistema de configuración, el pipeline de despliegue de Cloudflare, el flujo de trabajo de iteración visual) está disponible como una implementación de referencia.
¿Quieres acceso al repositorio? Deja "Dino Kombat" en un comentario a continuación. Te guiaré para bifurcarlo, cambiarle la apariencia para tu marca y desplegarlo en tu dominio.
La pila es gratuita (nivel gratuito de Cloudflare). Las herramientas son gratuitas (OpenCode es de código abierto). El único costo es una tarde de tu tiempo, y un agente de IA que escribe más rápido de lo que puedes describir lo que quieres.
