Suryaveer vs Krodh – 3 Superhero HTML5 Games: 3D Arena Fighter, Beat ’Em Up & Open-World City (Three.js + Phaser)

Suryaveer vs Krodh is three complete superhero games in one web app, built by DEV3 Technologies with Three.js, Phaser 3 and TypeScript. Players pick a game from the hub; all three share one save and one settings panel.

Fan tribute. Suryaveer is an original hero inspired by classic Indian TV superheroes, in a maroon and gold suit with a sunflower chest emblem. The name, emblem and villain are our own. If you publish a version that uses a real show’s name or logo, get permission from the rights holder first.

Play it now: the browser demo is the full suite.

Free download: sign in to any DEV3 account and the full source code, documentation and deployment files are yours, including future updates.

The three games

• 3D Arena Fighter (Three.js): one on one with Krodh, the Green Titan, in a city plaza.
  • Four elemental stances: Fire Fists burn, Earth Armour halves damage, Air Shield is fast and evasive, and Solar Ray turns your kick into a ray.
  • Three-hit combos, a dodge dash and the Surya Chakra spin.
  • When your punch meets his charge, a fist-clash QTE starts.
  • Krodh charges, smashes, throws boulders and leaps across three phases. Rickshaws, taxis and pillars break apart, and he is stunned if he charges into one.
  • Every win is graded S to C.
• Arcade Beat ’Em Up (Phaser 3): three stages (City Street, Subway Tunnel, Rooftop Helipad).
  • Thugs in four looks and charging cyber-mutants, with at most two attacking at once.
  • Each stage ends with Krodh, who stomps out shockwaves and becomes enraged at half health.
  • Combo multipliers, flying kicks, samosa and lassi pickups, and a full-screen Power Blast. 3 lives, and stages unlock in order.
• City Protector (Three.js): a procedural 10 × 10-block city with a river, bridges, parks and construction sites.
  • Walk or fly. Krodh smashes the busiest towers, and every collapse raises the City Threat meter.
  • Strike him so he chases you, lure him into a park or construction site, and pin him with Ice Freeze or Earth Wall. Strikes there count triple.
  • Meanwhile, use the telekinesis beam to lift people off burning towers, catch falling debris and pull cars out of the river.
  • A minimap and a Krodh pointer keep you oriented.

Built to be modified

• Each game is a pure, deterministic TypeScript engine (fixed 60 Hz step, seeded RNG, no DOM) plus a renderer that only draws it. The tests include bots that beat Krodh in the arena and clear all three beat ’em up stages, so balance changes are checked on every commit.
• No image, model or audio files. The 3D heroes are jointed, toon-shaded rigs built from primitives with outlines. The 2D fighters are jointed vector figures baked to textures. Music and effects are synthesised with Web Audio.
• About 520 KB gzipped. Phaser and Three.js load only when their game starts.
• Phones get a virtual joystick and action buttons, and older devices get a fast 3D quality preset.

What's in the package

• Full TypeScript source, about 9,600 lines.
• 40 Vitest tests: combat maths, stances, the clash QTE, boss phases, winnability bots, determinism, beat ’em up zones and combos, city generation, the lure and safe-zone rules, and missions.
• 7 Playwright browser tests: every game, a 2× high-DPI screen and a phone in landscape.
• HTML documentation and installation guide, Vercel and Netlify configs, and a GitHub Actions CI workflow.

Requirements

• Node.js 18 or newer (20 LTS recommended) and npm, to build
• Any static hosting to run it: no server, database or API keys