RAGDOLL RIOT

Play

ragdoll-riot.vercel.app on desktop or phone. Nothing to install.

What's in the ring

Three-hit combo	Punch three times fast. The third punch is an uppercut that launches.
Kick	Sends them flying. A flying body knocks down anyone it hits: that's a STRIKE.
Juggle	Hit enemies while they're airborne for bonus points.
Live ropes	Launch enemies into the electric ropes for a ZAP bonus. Get knocked in yourself and you get zapped too.
RIOT super	Every hit fills the RIOT meter. Full meter: press L and blast the whole ring off its feet.
Multiplier	Every 4 hits in a row raise it, up to ×10. Getting hit resets it.

Enemies

	Arrives	How to beat it
Grunt	Wave 1	A ! over its head means a swing is coming.
Runner	Wave 2	Fast and fragile. It jabs, then backs off.
Brute	Wave 3	Huge and slow. When you see the !, back off or jump.
Shield	Wave 4	Blocks punches from the front. Kick to break the guard, or hit it from behind.
The Bouncer	Every 5th wave	Too heavy to launch, and it pounds the floor. Jump the shockwaves.

Controls

Action	Keyboard / mouse	Touch
Move	A D / arrows	Left stick
Jump	W / Space	Flick the stick up
Punch	J / left click	Big button
Kick	K / right click	Small button
Super	L (when the meter is full)	SUPER button
Pause	P / Esc	‖ top right
How to play	H	HOW TO PLAY button

Screenshots

How it works

flowchart LR
  input["Input<br/>keys · mouse · touch"] --> shell
  subgraph shell ["Shell"]
    engine["Fixed-step engine<br/>60 Hz sim, any-Hz render"]
    juice["Juice<br/>hit-stop · shake · slow-mo"]
    sfx["Web Audio synth<br/>no sound files"]
  end
  shell --> game["Game rules<br/>waves · AI · combos · ropes · super"]
  game --> fighter["Fighters<br/>procedural poses, 2-bone IK"]
  fighter --> rig["Verlet rig<br/>11 points, 11 sticks"]
  game --> canvas["Canvas 2D<br/>cached background layer"]

• One rig, two modes. Upright fighters are posed procedurally with two-bone IK. A hit hands the same eleven points to a Verlet integrator, so launching a fighter is just "stop posing it": the body keeps the velocity its limbs already had, then flops with real weight.
• Fixed 60 Hz simulation, interpolated rendering. Physics stays stable at any refresh rate, and hit-stop and slow-mo work by scaling sim time, not by skipping frames.
• Two canvases. The arena backdrop is painted once per resize on its own layer; the main canvas only draws fighters and particles.
• No allocation in the loop. Particles come from a fixed pool, and the HUD only touches the DOM when a value changes.
• Every sound is synthesized with oscillators and filtered noise, and the audio context only starts on the first key or tap.
• Input is action-based with latched edges, so a tap that lands between two simulation steps (or during hit-stop) is never lost and never counted twice.

Performance

Measured with scripts/verify.mjs in headless Chrome on an M3 Pro: 480 frames at 1440×900, 2× pixel ratio, 12 ragdolls on screen.

Average frame	p95 frame	Frames over 17.5 ms
8.33 ms	8.40 ms	0

Tests

npm install   # Playwright, for the tests only
npm test

• scripts/verify.mjs (17 checks): loads on desktop and phone, touch controls only on touch, PLAY starts a run, 60 fps under load, an idle player reaches game over, instant restart, zero console errors.
• scripts/features.mjs (33 checks): How to Play and pause flows, the key legend, tips, the RIOT super, shield block and guard break, rope zaps, the boss's shockwaves and the phone controls.

Run it locally

git clone https://github.com/Waleee7/ragdoll-riot && cd ragdoll-riot
python3 -m http.server 5173   # then open http://localhost:5173

The game uses ES modules, so it needs a local server; opening index.html straight from disk won't load it. Add ?debug to the URL for an FPS overlay.

Project layout

index.html        screens, HUD and touch controls
style.css         layout, HUD and touch styles
js/main.js        boot
js/shell.js       title → play → game over flow, pause, how to play, key legend
js/engine.js      fixed-timestep loop
js/game.js        waves, enemy AI, combat, live ropes, RIOT super, boss, tips, HUD
js/fighter.js     attack specs, procedural poses, drawing
js/rig.js         Verlet ragdoll: 11 point-masses and distance constraints
js/juice.js       easing, shake, hit-stop, slow-mo, flash, zoom punch
js/particles.js   pooled sparks, dust, rings and popup text
js/audio.js       Web Audio sound synth
js/input.js       keyboard, mouse and touch (floating stick) mapped to actions
js/storage.js     localStorage wrapper that survives private mode
scripts/          headless browser tests (Playwright)

Credits

Made by Joshua Dare with Claude Code · GitHub

© 2026 Joshua Dare. All rights reserved. The source is public to read and learn from; it isn't licensed for reuse.