Monster Mayhem

Context

Monster Mayhem is a browser-based tabletop game inspired by King of Tokyo, with its own monsters and Energy City setting. Players choose four monsters, roll six dice, and fight for control of the city. The game ends when a monster reaches 20 points or is the last one standing.

From rules to a playable game

We built the playable rules first: players can keep or reroll dice, collect energy, heal, attack, enter and hold the city, and buy cards. Keeping the rules separate from the interface lets us test game decisions independently of the visual effects.

Original identity and world

We created the Monster Mayhem logo, monster artwork, board print, and card designs around a retro papercraft look. Petrol teal, warm cream, amber, bold outlines, and cut-paper shapes give the game a distinct tabletop identity. Flat monster illustrations become standees in a 3D arena with buildings, pylons, and a central energy reactor.

Interface, motion, and sound

React and TypeScript connect the title screen, monster selection, turn controls, shop, and player statistics. Three.js renders the board, Rapier gives the dice their tumbling physics, and Web Audio provides effects and chiptune music. Scratches, recoil, floating rewards, and celebrations make each action easier to read. The rules determine dice results; animation presents them.

AI and visual development

The project's asset manifest records ImageGen as the generator for its character illustrations. We adapted those illustrations into standees and a consistent game world. The gameplay rules run locally without an AI model.

Testing and scope

We tested the rules and interactions in small steps, inspected desktop and mobile layouts, and kept reduced-motion and graphics fallbacks available. The default game seats players together in one browser. An online-room module exists behind configuration but is not enabled in the default build.

Reflection

Monster Mayhem brought game rules, interface design, 3D interaction, sound, and original artwork into one coherent experience. Separating decisions from presentation made it possible to refine the feel of play without changing the outcome of a roll.