About the Project
I wanted to try something a little different from the classic Hangman game. Instead of showing a static drawing, I made the hangman come alive using real-time 2D physics. Every missed guess adds a new body part to a physically simulated ragdoll, which is then affected by gravity and can swing, flop, or dangle as you move your cursor. This not only makes the game more visually interesting, but also adds a fun, interactive twist to a well-known classic.
The game is built using Next.js and React, with TypeScript for type safety and TailwindCSS for styling. The physics are powered by Matter.js, a 2D rigid body physics engine for the web.
Technical Details
Each part of the ragdoll (head, limbs, chest, etc.) is represented as a Matter.js Body, and connected together using Constraint objects to mimic joints. The ragdoll is constructed in stages—one for each incorrect guess—so the full body only appears if you run out of attempts.
The core logic for assembling the ragdoll looks something like this:
const head = Bodies.rectangle(...);
const chest = Bodies.rectangle(...);
// Limbs and handle definitions...
const headToChest = Constraint.create({ bodyA: head, bodyB: chest, ... });
// Other constraints...
return [
[ handle ],
[ rightLowerArm, handleToRightLowerArm ],
[ rightUpperArm, upperToLowerRightArm ],
[ chest, chestToRightUpperArm ],
// ... and so on for each stage
];
The simulation is rendered inside a React component, and the ragdoll follows your mouse cursor, making it feel dynamic and interactive. As the player makes mistakes, new parts and constraints are added to the simulation, and Matter.js takes care of the physics.
Try It Yourself!
You can play the game here, or check out the code on GitHub. Feel free to explore or fork! it's all open source.