💡 La Experiencia Física: Carnets con QR para Entrar al Juego
El objetivo de Clevergy Game no era simplemente compartir una URL en Slack, sino crear un momento memorable y tangible durante el retreat de empresa.
- Carnets físicos personalizados: Cada integrante del equipo recibió un carnet físico de alta calidad impreso con su avatar, cargo y un código QR único.
- Acceso directo por QR: Al escanear el QR con la cámara del móvil, la ruta (
/<nombre-personaje>) abría automáticamente el juego en el navegador con su propio personaje ya seleccionado y desbloqueado, listo para jugar sin menús ni registros obligatorios. - Generador de identificadores: Se construyó una utilidad en
/qr.htmlpara generar los 18 carnets y códigos QR del equipo listos para imprimir.
Los carnets físicos personalizados y su vinculación directa con el juego
🗺️ Los 4 Mundos Jugables
El juego reúne cuatro experiencias completamente diferentes, accesibles desde el selector de mundos o cargadas bajo demanda en chunks optimizados:
1. Mundo 1 · La Oficina (Plataformas 2.5D)
Ambientado en el emblemático Google for Startups Campus Madrid (la fábrica neomudéjar de Moreno Nieto, con la Almudena y el Palacio Real de fondo).
- Mecánicas de salto avanzadas: Salto de altura variable, coyote time, búfer de entrada, salto en pared, pisotón contra enemigos, bloques interrogante, plataformas atravesables y sillas que se hunden.
- 18 Héroes con habilidades únicas: Cada miembro del equipo cuenta con su superpoder personalizado (ej. Alejandro con puñetazo y planeo; José Luis imprime plataformas 3D flotantes temporales; Paloma vuela manteniendo pulsado el salto; Silvia activa un dash con invulnerabilidad).
- Jefe final: EMAIL CHAIN en el auditorio del Demo Day, lanzando ondas de choque y oleadas de correos.
Mundo 1: Plataformas en Google for Startups Campus Madrid
2. Mundo 2 · Coworking Fight (3D estilo Smash)
Hasta 4 luchadores combatiendo simultáneamente en la azotea del CINK Coworking, con las Cuatro Torres de Madrid en el horizonte.
- Sistema de porcentaje de daño (Knockback): Sin barra de vida; los golpes aumentan el porcentaje acumulado. A mayor daño, más lejos sale despedido el rival al recibir un impacto hasta cruzar la zona de eliminación (3 vidas).
- Movimientos: Combos direccionales, golpes fuertes laterales, ataques aéreos, súper salto de rescate (
▲ + Especial) y escudo protector que se desgasta y rompe. - Objetos de oficina interactivos: Grapadoras y bombas de post-its arrojadizas, Boli Bic gigante con mayor pegada, café que reduce el daño acumulado en un -25% y modo Focus de invencibilidad temporal.
- Partidas contra CPU o multijugador online de hasta 4 jugadores simultáneos.
Mundo 2: Smash Bros en la azotea del coworking contra CPU o amigos
3. Mundo 3 · BoliBic Tag (Shooter 3D con Estética Libreta)
Laser tag en primera o tercera persona (renderizando al personaje como pegatina animada) por una recreación a escala del edificio de CINK Coworking en Infanta Mercedes (recepción de Victoria, oficinas de Clevergy, comedor y terraza).
- Look de libreta a bolígrafo: Render en dos pasadas con Three.js mediante shaders custom (
doodleRender.js): detecta iluminación y profundidad en un render target y dibuja trazos de boli BIC (azul, rojo, negro, verde) y texturas de papel rayado ancladas al espacio 3D. - Oleadas y Boss: Supera 5 rondas de emails, peticiones de calendario y "tienes 5 minutos" hasta derrotar al jefe INBOX INFINITO.
- Multijugador en tiempo real: Salas de hasta 6 jugadores mediante códigos de 5 letras con modos Cooperativo (todos contra las oleadas) o Todos contra Todos (deathmatch a 10 bajas).
Mundo 3: Three.js con shaders custom estilo libreta de boli BIC
4. Mundo 4 · Pantano de San Juan (Carreras 3D de Motos de Agua)
Circuito acuático estilo Mario Kart en el Pantano de San Juan de Madrid: presa, embarcaderos, boyas y pinares.
- Física de conducción y derrape: Aceleración automática, saltos con miniturbo tras derrape por niveles (chispas azules a naranjas) y velocidad sobre el oleaje.
- Objetos de oficina: Café turbo, email teledirigido al rival más cercano, reunión bloqueante, mancha de tinta cegadora y estrella Focus.
- Hasta 6 jugadores en simultáneo compitiendo por la vuelta rápida contra amigos o bots inteligentes.
Mundo 4: Carreras náuticas y derrapes con físicas arcade
🕹️ Sistema de Controles Adaptativo
Diseñado para funcionar al 100% en cualquier dispositivo sin necesidad de descargas ni tiendas de apps:
| Dispositivo | Modo | Esquema de Control |
|---|---|---|
| Móvil (Horizontal) | Pantalla ancha | Joystick virtual flotante adaptativo a la izquierda + abanico de botones de libreta a la derecha. |
| Móvil (Vertical) | Clásico Retro | Deck virtual estilo Game Boy (deckNav.js) con cruceta D-Pad táctil, botón A y botón B. |
| PC / Portátil | Teclado & Ratón | WASD / Flechas para mover, Espacio saltar, J ataque, K poder especial, M música. |
| Mando de Consola | Gamepad API | Detección nativa de mandos de PlayStation, Xbox y Switch compatibles por Bluetooth/USB. |
🛠️ Arquitectura Técnica y Stack
Todo el proyecto fue concebido para ser extremadamente rápido, ligero y autosuficiente sobre la infraestructura edge de Cloudflare:
clevergy-game/
├── index.html # Portada, selección de mundos, ranking y Game Boy deck
├── functions/api/ # Cloudflare Pages Functions (D1 Leaderboard, Auth, TURN)
│ ├── auth/google.js # Verificación serverless de tokens JWT de Google
│ ├── leaderboard.js # Puntuaciones, tiempos y récords por mundo en D1
│ └── turn-credentials.js # Generación de credenciales Cloudflare Realtime TURN
├── schema.sql # Definición de tablas SQLite en Cloudflare D1
├── src/
│ ├── main.js # Enrutador, precarga condicional de chunks Three.js
│ ├── config/ # Estadísticas de los 18 personajes y configuración de mundos
│ └── doodle/ # Motor 3D a boli, shaders GLSL, WebRTC (doodleNet.js)
1. Desarrollo con Claude Opus 5.5 y Antigravity
El juego fue programado iterativamente utilizando Claude Opus 5.5 y el entorno agéntico de Antigravity. Desde el primer prototipo en un archivo HTML monolítico hasta la modularización completa del motor gráfico en Three.js con shaders custom, el refactor de físicas 2.5D y la integración del multijugador WebRTC.
2. Base de Datos Serverless con Cloudflare D1
Se implementó un esquema relacional ligero en Cloudflare D1 (clevergy-game-db) sin costes fijos de servidor:
leaderboard: Guarda las marcas de cada jugador (tiempo, score, bajas, muertes, personaje utilizado y mundo) indexadas para consultas instantáneas de ranking global.users: Gestiona el perfil del usuario, progreso desbloqueado y vinculación de cuenta mediante Google OAuth.
3. Multijugador P2P y Cloudflare Realtime TURN
Para que el multijugador cooperativo y competitivo funcionara a la perfección entre teléfonos móviles en diferentes redes WiFi o datos 4G/5G, se resolvió el reto de las NATs estrictas:
- WebRTC + PeerJS: Comunicación directa de baja latencia entre el anfitrión y los clientes (
doodleNet.js). - Cloudflare Realtime TURN: La función
/api/turn-credentialsse conecta a la API de Cloudflare Calls (rtc.live.cloudflare.com) para expedir credenciales efímeras seguras válidas por 24 horas. Esto permite rutear paquetes de juego por la red Anycast global de Cloudflare cuando la conexión directa P2P está bloqueada por firewalls o redes móviles.
4. Autenticación con Google
Inicio de sesión opcional con Google Identity Services. La Cloudflare Function valida criptográficamente la firma del ID Token contra los servidores de Google, garantizando que los récords del leaderboard pertenezcan al usuario verificado.
📹 Gameplay en Vídeo
Demostración en vídeo del juego, físicas y selección de personajes
🚀 Enlaces del Proyecto
- 🌐 Web en Producción: clevergy-game.pages.dev
- 📖 Artículo de la Historia: ¿Cómo creé Clevergy Game?