Cómo migrar Arkanoid de C++ a TypeScript con OpenCode y desplegarlo en Workers de Cloudflare

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.

El proceso de Migración Autónoma

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.

Figura 11: Plataforma de Workers en Cloudflare

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

• Repositorio original y migrado: https://github.com/Carluve/arkanoidcpp2ts
• Juega online ahora mismo: https://cbcb0820.arkanoid-5s6.pages.dev/

Espero que os haya gustado este "experimento". A seguir hackeando, y nos vemos en la nube - o mejor dicho, en el Edge -.

¡Saludos!

Autor: Carlos Luengo,  Senior Account Executive en Cloudflare. 

Contactar con Carlos Luengo