Back to Rolling Mayhem

README

<p align="center"> <img src="docs/images/screenshot-title.png" alt="Rolling Mayhem" width="700"/> </p>

<p align="center"> A 3D marble racing game built with Three.js and Cannon-es physics, featuring 6 levels of increasing difficulty, glassmorphism UI, and a dynamic starfield background. </p>

<p align="center"> <img src="https://img.shields.io/badge/Three.js-0.161-blue?logo=three.js" alt="Three.js"/> <img src="https://img.shields.io/badge/TypeScript-5.9-blue?logo=typescript" alt="TypeScript"/> <img src="https://img.shields.io/badge/Vite-7.2-purple?logo=vite" alt="Vite"/> <img src="https://img.shields.io/badge/Physics-cannon--es-green" alt="cannon-es"/> </p>


Quick Start

bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Open http://localhost:5173 and press any key to start.

Controls

KeyAction
WASD / Arrow KeysMove marble
SpaceJump
MouseRotate camera
RRestart level

Levels

The game features 6 levels, each with a unique theme, skybox, and set of mechanics:

#NameTimeFeatures
1Practice Run45sGentle ramps, wide paths
2The Valley75sElevation changes, open terrain
3The Vortex60sSpiral bowl, center hole drop
4The Slalom65sBanked S-curves, downhill racing
5The Gauntlet75sTilted tiles, escalators, half-pipes
6The Fortress90sTurrets, water, trampolines, portals
<p align="center"> <img src="docs/images/screenshot-gameplay.png" alt="Level Gameplay" width="700"/> </p>

<p align="center"> <img src="docs/images/screenshot-action.png" alt="Action Shot" width="700"/> </p>

Game Elements

  • Checkpoints - Save your progress and earn bonus time
  • Escalators - Green tiles that push your marble forward
  • Banked turns - Angled surfaces to maintain speed through curves
  • Turrets - Shoot projectiles you need to dodge
  • Water hazards - Fall in and lose a life
  • Trampolines - Bounce across gaps
  • Portals - Teleport between two points
  • Collectibles - Extra lives, shields, and time bonuses

Documentation

For detailed gameplay tips and strategy, see the User Guide.

Tech Stack

  • Three.js - 3D rendering with orthographic isometric camera
  • cannon-es - Physics simulation (gravity, collisions, forces)
  • TypeScript - Type-safe game logic
  • Vite - Dev server and bundler
  • Web Audio API - Procedural sound effects and background music

Building

bash
# Production build
npm run build

# Preview production build
npm run preview

The built output goes to dist/ and can be served by any static file host.

License

ISC

© 2026 Jonathan Leahy · v0.8.5