Crimson Royale
A turn-based card battle game with a dark casino aesthetic. Players duel with Marvel-inspired hero cards, spending mana to build a board, attack enemy cards, and reduce the opposing avatar to 0 HP. Features a WebGPU-rendered 3D casino board, multiplayer via Socket.IO, MySQL-backed persistence, and a local scripted AI opponent.
Gallery
Notes
A turn-based card battle game where Marvel-inspired heroes clash on a WebGPU-rendered casino board.
Tech Stack
| Layer | Technology | |-------|------------| | Frontend | HTML, CSS, Vanilla JavaScript | | 3D Board | WebGPU + WGSL | | Audio | Web Audio API | | Server | Node.js + Express | | Database | MySQL 8.0 | | Realtime | Socket.IO | | Auth | bcryptjs + express-session |
Game Features
- 25 HP, 10 max mana, 30-card decks with 5-card hands and 3-slot fields
- Combat system with card-vs-card and direct avatar attacks
- Mana progression starting at 3, capping at 10
- Turn timer (25s) and match timer (4 min) with Sudden Death mechanics
- Scripted AI opponent ("The House") that plays and attacks intelligently
- Multiplayer with server-authoritative match state, matchmaking queue, pause/resume, and forfeit
- Elo ranking (+25 win / -15 loss) and leaderboard
- WebGPU 3D board with WGSL shaders, camera controls, and card/avatar render rings
- Per-tab sessions allowing two users in the same browser for local multiplayer testing