Migración completa de un juego clásico Arkanoid escrito en C++ con SFML hacia TypeScript + HTML5 Canvas, desplegado en Cloudflare Pages mediante Vibe Coding.
Jugar ahora: cbcb0820.arkanoid-5s6.pages.dev
Este repositorio contiene dos versiones del juego Arkanoid (estilo Breakout):
- Versión original en C++ — Usa la librería gráfica SFML para renderizado de escritorio.
- Versión web en TypeScript — Usa HTML5 Canvas, Vite y se despliega en Cloudflare Pages.
La migración fue realizada en una sola sesión de Vibe Coding usando OpenCode + Claude Opus vía Cloudflare AI Gateway.
arkanoidcpp2ts/
├── main.cpp # Código fuente C++ original (SFML)
├── images/ # Assets originales del juego
│ ├── background.jpg
│ ├── ball.png
│ ├── block01.png … block05.png
�� └── paddle.png
├── prompt/ # Prompt de migración y capturas del proceso
│ ├��─ prompt-migracion.md
│ └── *.png
├── web/ # Proyecto TypeScript (Vite)
│ ├── src/
│ │ ├── main.ts # Bootstrap (equivale a main() en C++)
│ │ ├── game.ts # Game loop, update, render, HUD
│ │ ├── ball.ts # Entidad Ball (posición, velocidad, hitboxes)
│ │ ├── paddle.ts # Entidad Paddle (movimiento, bounds)
│ │ ├── brick.ts # Grid de bloques 10×10
│ │ ├── collision.ts # AABB intersection (FloatRect::intersects)
│ │ ├── input.ts # InputManager (reemplaza SFML Keyboard)
│ │ ├── assets.ts # Carga async de imágenes (reemplaza SFML Texture)
│ │ └── types.ts # Interfaces, CONFIG, GamePhase
│ ├── public/images/ # Assets copiados para el build web
│ ├── index.html
│ ├── package.json
│ ├── tsconfig.json # TypeScript strict: true
│ └── wrangler.toml # Configuración Cloudflare Pages
├── LICENSE
└── README.md
- Ventana de juego de 520 x 450 px (responsiva, preserva aspect ratio)
- 100 bloques distribuidos en una cuadricula 10 x 10 con 5 texturas de colores
- Pelota con movimiento y rebote en paredes y bloques (split-axis AABB)
- Paleta controlada con las teclas izquierda/derecha del teclado
- Velocidad de la pelota aleatoria al rebotar contra la paleta
- HUD con puntuacion y vidas
- Pantallas de titulo, Game Over y victoria
- Delta-time normalizado: la fisica corre igual a cualquier refresh rate
| Concepto C++ (SFML) | Equivalente TypeScript (Web) |
|---|---|
RenderWindow + setFramerateLimit(60) |
<canvas> + requestAnimationFrame + delta-time |
while (app.isOpen()) |
Game.loop() con rAF recursivo |
Texture::loadFromFile() |
loadAssets() — Promise<HTMLImageElement> |
Sprite + setPosition / draw |
ctx.drawImage() en Canvas 2D |
FloatRect::intersects() |
aabbIntersects() — AABB pura |
Keyboard::isKeyPressed() |
InputManager con Set<string> via keydown/keyup |
srand(time(0)) + rand()%5+2 |
Math.random() + Math.floor() |
Sprite block[1000] |
BrickData[] con flag alive |
# Instalar SFML en macOS (Homebrew)
brew install sfml
# Compilar
g++ main.cpp -o arkanoid -lsfml-graphics -lsfml-window -lsfml-system
# Ejecutar
./arkanoidcd web
npm install
npm run dev # Servidor local Vite → http://localhost:5173
npm run build # Build de produccion → web/dist/cd web
npm run deploy # build + wrangler pages deploy- Conectar el repositorio en Cloudflare Dashboard → Pages → Connect to Git
- Build command:
cd web && npm install && npm run build - Build output directory:
web/dist
La migracion fue ejecutada de forma autonoma por un agente de IA en una sola sesion. El prompt completo y las capturas del proceso estan documentados en prompt/prompt-migracion.md.
| Fase | Descripcion | Estado |
|---|---|---|
| 1 | Analisis y documentacion del codigo C++ original | Completado |
| 2 | Scaffold del proyecto Vite + TypeScript | Completado |
| 3 | Migracion de la logica de juego a TypeScript | Completado |
| 4 | Implementacion del renderizado con Canvas API | Completado |
| 5 | Despliegue en Cloudflare Pages con Wrangler | Completado |
- Lenguaje: TypeScript (strict mode)
- Build: Vite
- Rendering: HTML5 Canvas 2D API
- Deploy: Cloudflare Pages + Wrangler CLI
- Metodologia: Vibe Coding con OpenCode + Claude Opus via Cloudflare AI Gateway
El codigo C++ original esta basado en el trabajo de:
- Kttra/RetroGamesCplus — Coleccion de juegos retro implementados en C++ con SFML.
Este proyecto esta licenciado bajo los terminos de la GNU General Public License v3.0.
Ver el archivo LICENSE para mas detalles.