---

💡 The Physical Experience: QR Badges for Instant In-Game Access

The core idea behind Clevergy Game was not merely pasting a link into Slack, but crafting a memorable, tangible experience during the company retreat.

1. Custom printed badges: Every team member received a physical, high-quality badge featuring their character avatar, company role, and a custom QR code.
2. Instant QR launch: Scanning the QR code with any smartphone camera redirected directly to /<character-name>, instantly launching the browser game with their personalized hero already unlocked and selected—zero signup or tedious menus required.
3. Badge generator tool: A dedicated helper at /qr.html was created to batch-generate all 18 team cards and print-ready QR codes.

---

🗺️ The 4 Playable Worlds

The game features four completely distinct game genres, accessible via the world selector and loaded on demand in separate chunks:

1. World 1 · The Office (2.5D Platformer)

Set in the iconic Google for Startups Campus Madrid (the Neo-Mudéjar brick building on Calle Moreno Nieto, with the Royal Palace and Almudena Cathedral in the background).

• Polished platformer mechanics: Variable jump heights, coyote time, jump buffering, wall jumping, enemy stomping, question blocks, drop-through platforms, and sinking folding chairs.
• 18 Team Heroes with unique abilities: Every teammate has their own custom superpower (e.g., Alejandro with punch + glide; José Luis prints floating 3D platforms; Paloma flies while holding jump; Silvia performs an invulnerable dash).
• Boss fight: EMAIL CHAIN inside the Demo Day auditorium, firing shockwaves and endless email volleys.

2. World 2 · Coworking Fight (3D Smash Brawler)

Up to 4 fighters battling simultaneously on the rooftop of CINK Coworking, framed by Madrid's Four Towers skyline.

• Knockback percentage system: No traditional health bars; attacks increase the opponent's cumulative percentage. The higher the damage, the further they fly until crossing the elimination boundary (3 lives).
• Combat moves: Directional tilts, aerial moves, super recovery jump (▲ + Special), and a breakable energy shield.
• Office item pickups: Throwable staplers and post-it bombs, oversized Bic Pen for heavy hits, coffee that recovers -25% damage, and invincible Focus mode.
• CPU bots or real-time online brawling for up to 4 players.

3. World 3 · BoliBic Tag (3D Ballpoint Notebook Shooter)

A first-person or third-person laser tag shooter (rendering characters as animated sticker cutouts) inside a 3D recreation of CINK Coworking in Infanta Mercedes (Victoria's reception desk, Clevergy private office, dining area, and terrace).

• Ballpoint pen notebook aesthetic: Two-pass render pipeline in Three.js using custom GLSL shaders (doodleRender.js): captures world lighting and depth in an offscreen target, rendering crosshatch pen strokes (Bic blue, red, black, green) and lined paper grain.
• Wave defense & Boss: Survive 5 waves of calendar invitations, emails, and "do you have 5 minutes?" pings to battle INFINITE INBOX.
• Real-time multiplayer: 6-player rooms using 5-letter codes featuring Co-op wave survival and Free-For-All deathmatch (first to 10 frags).

4. World 4 · Pantano de San Juan (3D Jet Ski Racing)

An arcade water racing circuit inspired by Mario Kart located in Madrid's San Juan reservoir: dam, docks, navigation buoys, and pine forests.

• Arcade physics & drifts: Auto-acceleration, hop drifts with multi-stage mini-turbos (blue to orange sparks), and wave handling.
• Office power-up boxes: Turbo coffee, homing email, meeting schedule blocker, blinding ink blot, and Focus star.
• Up to 6 simultaneous players racing for the fastest lap against peer opponents or intelligent AI bots.

---

🕹️ Responsive Cross-Device Controls

Built to run smoothly on any device without downloads or app store hurdles:

Device	Mode	Control Scheme
Mobile (Landscape)	Widescreen	Floating left thumbstick + right notebook action button cluster.
Mobile (Portrait)	Retro Handheld	Virtual Game Boy deck (deckNav.js) with responsive D-Pad, A, and B buttons.
Desktop / Laptop	Keyboard & Mouse	WASD / Arrows to move, Space to jump, J attack, K special, M toggle audio.
Game Controllers	Gamepad API	Plug-and-play Bluetooth/USB support for PlayStation, Xbox, and Nintendo Switch pads.

---

🛠️ Technical Architecture & Stack

The entire system was architected to be blazingly fast, lightweight, and completely serverless on Cloudflare's edge network:

clevergy-game/
├── index.html              # Landing, world select, leaderboard modal, Game Boy deck
├── functions/api/          # Cloudflare Pages Functions (D1 Leaderboard, Auth, TURN)
│   ├── auth/google.js      # Serverless Google JWT token cryptographic verification
│   ├── leaderboard.js      # High scores, lap times, and kill stats stored in D1
│   └── turn-credentials.js # Cloudflare Realtime TURN dynamic credential issuance
├── schema.sql              # Cloudflare D1 SQLite database schema
├── src/
│   ├── main.js             # Route handling and Three.js dynamic chunk imports
│   ├── config/             # Stats for all 18 characters and world metadata
│   └── doodle/             # 3D doodle engine, GLSL shaders, WebRTC networking

1. AI-Driven Development with Claude Opus 5.5 and Antigravity

The game was developed and iterated using Claude Opus 5.5 alongside Antigravity. From initial single-file HTML game concepts to full modularization of Three.js engines, custom shaders, 2.5D physics engines, and WebRTC multiplayer netcode.

2. Serverless Edge Database with Cloudflare D1

An edge relational SQLite database was configured on Cloudflare D1 (clevergy-game-db):

• leaderboard: Records completion times, scores, kills, deaths, character choice, and world index, optimized with indexes for zero-latency ranking displays.
• users: Persists player accounts, unlocked game progression, and Google OAuth credentials.

3. P2P Multiplayer & Cloudflare Realtime TURN

To deliver lag-free co-op and PvP across smartphones on heterogeneous mobile carrier data and firewalled WiFi networks:

• WebRTC + PeerJS: Direct peer-to-peer data transport for minimal input latency (doodleNet.js).
• Cloudflare Realtime TURN: The /api/turn-credentials endpoint invokes Cloudflare Calls (rtc.live.cloudflare.com) to generate short-lived ICE credentials (valid 24h). This relays game packets through Cloudflare's global Anycast backbone whenever strict symmetric NATs or corporate firewalls prevent direct P2P handshakes.

4. Google Authentication

Optional sign-in powered by Google Identity Services. Cloudflare Functions verify ID token signatures against Google's public key JWKS endpoints, guaranteeing verified leaderboard submissions.

---

📹 Video Gameplay Demonstration

---

🚀 Project Links

• 🌐 Live Game: clevergy-game.pages.dev
• 📖 Behind the Scenes Story: How I built Clevergy Game