Hola a todos los lectores de
El lado del mal. Soy
Carlos Luengo, recientemente he comenzado una nueva etapa profesional y acabo de aterrizar en
Cloudflare como
Senior Account Executive. Charlando el otro día con
Chema Alonso sobre las capacidades de la parte developers, me lanzó el guante:
"¿Sabes lo que molaría, Carlos? Ahora que le estas dando mucho al Vibe Coding porque nunca has programado podías probar a ver cómo migrar aplicaciones "Legacy" pesadas y meterlas en el ecosistema de Workers de Cloudflare. Molaría hacerlo con los juegos Retro. Ya sabes Gaming + Vibe Coding + IA + Workers. Mola todo, ¿no?".
Y bueno, pues el resto ya lo vais aquí, reto aceptado.
Figura 1: Cómo migrar Arkanoid de C++ a TypeScript
con OpenCode y desplegarlo en Workers de Cloudflare
El objetivo del laboratorio de hoy es coger un código clásico y monolítico escrito en C++, en este caso, un clon del mítico Arkanoid que casi cada programador ha hecho una vez en su vida, y migrarlo por completo a TypeScript para que corra de forma nativa en la web y desplegarlo en la infraestructura Serverless de Cloudflare Workers en Cloudflare Pages. La inspiración para esta locura vino de una iniciativa muy chula de Seb Grubb.
La magia de OpenCode y el Unified Billing de Cloudflare AI Gateway
En pleno
2026, no iba a ponerme a traducir punteros y bucles de memoria de
C++ a mano. Para hacer el trabajo sucio hemos utilizado
OpenCode, una herramienta brutal para lanzar
Agentes de IA autónomos. Pero aquí viene lo interesante de la arquitectura que hemos montado:
Figura 2: Arrancando OpenCode desde la terminal.
En lugar de pelearnos con mil
APIs distintas, hemos conectado
OpenCode a través del
AI Gateway de Cloudflare. Esto es una pasada porque, gracias al
Unified Billing (facturación unificada),
Cloudflare te permite hacer inferencia accediendo a una barbaridad de modelos del mercado de
OpenAI, Anthropic, Meta, etcétera, centralizando el coste, la observabilidad y el control de
rate limits en un solo panel. Para esta migración, hemos elegido darle caña a la bestia de
Claude Sonnet 4.6.
Figura 3: Configurando los proveedores.
Fijaos cómo nos conectamos al
end-point de
Anthropic pasando directamente por la pasarela de
Cloudflare AI Gateway.
Figura 4: Seleccionando el “modelo" Claude (Anthropic)
servido a través de Cloudflare AI Gateway.
Una vez preparado el entorno, abrimos la sesión en el repositorio donde teníamos nuestro triste código en
C++. Le lanzamos el
Prompt maestro a
Sonnet 4.6 indicándole que analice los archivos originales, monte un andamiaje con
Vite en
TypeScript puro, correlacione las lógicas de colisión vectorial y convierta el pintado a
HTML5 Canvas.
Figura 5: Espacio de trabajo listo en OpenCode para meter el prompt maestro.
El Prompt para conseguir la migración no es muy complejo, así que si quieres probar tú directamente todo el proceso, te lo dejo por aquí, para que solo tengas que copiar, pegar y adaptar a tu juego.
Actúa como un Ingeniero de Software Principal y Experto en Desarrollo de Videojuegos, especializado en C++, TypeScript, HTML5 Canvas y arquitecturas de despliegue en Cloudflare.
Tu objetivo es migrar de forma autónoma, completa y sin requerir intervención humana el juego "Arkanoid" escrito en C++ (ubicado en este repositorio/directorio) a una aplicación web moderna en TypeScript.
### 1. CONTEXTO Y PILA TECNOLÓGICA (TECH STACK)
- *Origen:* Código C++ (Lógica de juego, física, gestión de memoria manual, bucles nativos).
- *Destino:* TypeScript estricto (strict: true).
- *Renderizado:* HTML5 <canvas> API (o WebGL si la complejidad del C++ lo requiere, pero prefiere Canvas 2D para Arkanoid por simplicidad).
- *Entorno de Construcción:* Vite (rápido, moderno y compatible con TS).
- *Despliegue:* Cloudflare Pages (se requerirá configuración de build).
### 2. REGLAS ESTRICTAS DE AUTONOMÍA
- NO te detengas para pedirme permiso a menos que falte un archivo crítico.
- Analiza todos los archivos C++ del repositorio primero. Lee los .h, .hpp y .cpp para entender la arquitectura (entidades como Paddle, Ball, Bricks, GameState, Collision).
- Escribe, crea y modifica los archivos directamente en el entorno de trabajo.
- Si encuentras librerías de C++ (como SDL2, SFML o Raylib), abstrae sus llamadas y reemplázalas por sus equivalentes nativos en la Web (por ejemplo: eventos del DOM para inputs, requestAnimationFrame para el Game Loop, API de Audio Web para sonido).
### 3. PLAN DE EJECUCIÓN PASO A PASO (Ejecuta en orden):
*PASO 1: Análisis y Scaffold del Proyecto Web*
- Inicializa un nuevo proyecto con Vite y TypeScript puro (Vanilla TS).
- Crea el package.json, tsconfig.json (con modo estricto) y vite.config.ts.
- Instala las dependencias necesarias (npm install o el gestor que use el entorno).
- Crea un index.html con un <canvas id="gameCanvas"></canvas> que ocupe de manera responsiva el espacio de la ventana sin deformar el aspect ratio.
*PASO 2: Migración de Core y Entidades*
- Traduce las clases y structs de C++ a Clases o Interfaces de TypeScript.
- Implementa la física vectorial y la detección de colisiones (AABB, círculo-rectángulo) manteniendo la matemática exacta del C++ original.
- Tipa todo explícitamente. NO uses any.
*PASO 3: Game Loop y Control de Tiempo*
- En C++, el bucle probablemente use while(running) y cálculos con Delta Time.
- En TypeScript, implementa una clase GameEngine o similar que utilice window.requestAnimationFrame.
Aquí os dejo el primer vídeo donde se ve al agente de
OpenCode en acción. Fijaos cómo explora el repositorio, entiende la arquitectura antigua y empieza a escupir los nuevos archivos
.ts de forma autónoma.
Figura 6: El agente analizando el código C++
e implementando el scaffolding del proyecto.
Tras un rato de "
magia", el código base ya está portado. El siguiente paso es empaquetarlo y prepararlo para la plataforma moderna. El asistente automáticamente configuró el entorno de compilación y preparó la estructura de directorios
(/dist) compatible con los estándares web.
Figura 7: Resumen de los comandos generados por la IA para el despliegue local y en Cloudflare Pages, con los 25 archivos modificados.
En este segundo vídeo, podéis ver la fase de
Build. La
IA ejecuta los comandos de terminal por nosotros, arregla las dependencias, compila el código
TypeScript a
JavaScript puro y configura las instrucciones de enrutamiento estático (creando el archivo
_redirects y tocando el
package.json) para que el ecosistema de
Cloudflare entienda qué tienen que servir.
Figura 8 Generando la compilación con Vite y
ajustando los parámetros para Cloudflare Pages.
Fijaos que si pulsamos en contexto podemos ver el coste completo de migrar el juego de C++ a TS, tan solo han sido 0.67$.
Despliegue Global: De C++ al Edge en segundos
Llegamos al final del experimento. Una vez que la aplicación web estaba ensamblada y libre de errores, solo quedaba publicarla.
Figura 9: Comprobando credenciales con la CLI de Cloudflare y procesando el wrangler
A través del propio terminal gestionado por el agente, lanzamos la autenticación de Wrangler (npx wrangler whoami) y el comando de deploy.
Figura 10: ¡Boom! Despliegue completado, subido a la red global y generando la URL final.
La Propuesta de Valor
Chema Alonso me pedía ver esto por una razón. En el mundo real empresarial estamos rodeados de deudas técnicas monolíticas. La propuesta de valor de
Cloudflare en estos escenarios es revolucionaria: pasas de mantener código ineficiente en servidores caros, a refactorizarlo masivamente con
IA y empujarlo directamente al
Edge.
Al desplegar en
Cloudflare Pages apoyado por
Cloudflare Workers, el juego ya no corre en un servidor centralizado. Se sirve desde el centro de datos más cercano a la casa del usuario que lo abra aprovechando la potencia de la
red mundial Anycast de Cloudflare, con latencia ultra-baja,
protección contra ataques DDoS y WAF integrado por defecto. Y todo ello gobernado por nuestro
AI Gateway de Cloudflare que hace de puente seguro y unificado para los modelos generativos.
El Resultado
¿Queréis probar el resultado de esta migración autónoma? Podéis
jugar al Arkanoid migrado que ya está volando en la red de Cloudflare, y revisar todo el código que se ha generado con
Vibe-Coding en el
repositorio de GitHub.
Figura 12: Chema Alonso probando el Arkanoid en Cloudflare
Espero que os haya gustado este "
experimento". A seguir hackeando, y nos vemos en la nube - o mejor dicho, en el
Edge -.
¡Saludos!
Sigue El lado del mal en Telegram
Chema Alonso en Threads
Chema Alonso en Mastodon
Chema Alonso en BSKY
Chema Alonso en Linkedin
DragonJAR
8.8 Chile
Ekoparty
e-Hack MX 
AREA 51 
Comunidad Dojo Panamá 
ARPAHE SOLUTIONS 
