All case studies

DEV3 Technologies · own product

Suryaveer vs Krodh: three superhero games, two engines, one testable core

Our free superhero game suite: a Three.js boss-fight arena, a Phaser 3 beat ’em up and a Three.js open-world city in one web app, with code-built characters and bots that verify every boss fight is winnable.

Industry
Games & interactive

Live project preview

DEV3 Technologies · own product — screenshots
Open live demo
The hub: Suryaveer, Krodh and three games, with portraits rendered from the real 3D models

The hub: Suryaveer, Krodh and three games, with portraits rendered from the real 3D models

The challenge

The brief asked for three very different games around one hero and one villain: a 3D one-on-one fighter with elemental stances and quick-time events, a classic side-scrolling beat ’em up, and an open-world city where the hero protects civilians from a rampaging giant. They had to share one look and one save, run on laptops and phones, download quickly and contain no licensed assets. The boss fights also had to stay winnable but challenging as the numbers were tuned.

Our solution

We built the suite as one Vite and TypeScript app with a DOM hub. Each game is code-split, so Three.js or Phaser loads only when that game starts. Every game has the same shape: a pure, deterministic rules engine with no DOM, and a renderer that only draws the engine’s state and turns input into engine calls.

Key design decisions

  • Fixed-step, seeded engines. All three engines advance at exactly 1/60 s and draw randomness from a seed stored in the state, so a fight can be replayed exactly. Vitest drives the engines directly, without a browser.
  • Bots as balance tests. A bot that reads only on-screen tells (wind-ups and shockwave rings) must beat Krodh on at least two of four seeds, and an idle player must lose. A second bot must clear all three beat ’em up stages. Tuning those tests is how we arrived at Krodh’s 1,900 HP, health regeneration and the dodge dash.
  • Characters built in code. Suryaveer and Krodh are jointed 3D rigs made from primitives with toon shading and inverted-hull outlines, posed procedurally for every move. The beat ’em up uses matching 2D jointed figures baked to textures, and the hub portraits are rendered from the real 3D models at start-up.
  • Design for the lure. In the city, a strike makes Krodh chase the hero, and strikes count triple once he is pinned in a park or construction site. Strikes in busy blocks cause collateral damage. The best play is to lead him away from people, not just to hit him harder.
  • Readable 3D on any screen. The arena camera frames both fighters, the city camera pulls in front of towers that would hide the hero, and a beacon and pointer always show where Krodh is. Phones get a joystick and buttons, and a quality preset turns off shadows on slower devices.

Architecture

src/art holds the 3D rigs, props and 2D fighters. src/core holds the Three.js environment, input, synthesised audio, the save and the PRNG. src/games holds the arena, brawler and city engines with their renderers, and src/ui the hub, modals and portrait rendering.

Results

The suite ships as a free download and a playable demo. By the numbers, counted from the source and test runs:

  • 3 games in one app: a 3-phase boss fight with 4 stances, 3 beat ’em up stages, and a 100-block procedural city with 3 mission types
  • Bots beat Krodh on at least 2 of 4 seeds and clear all 3 beat ’em up stages on every test run
  • 40 Vitest tests and 7 Playwright browser tests, including a high-DPI display and a phone in landscape
  • About 520 KB gzipped, with zero image, model or audio files

Play the browser demo or get the free source code on the DEV3 marketplace. Suryaveer is an original hero and a fan tribute to classic Indian TV superheroes.

Related case studies