Matter.js Ragdoll Physics Game Example

Open In Editor Publish Your Code

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Ragdoll Physics Game</title>  
      
    <script src="https://cdn.jsdelivr.net/npm/matter-js@0.19.0/build/matter.min.js"></script>  
    <style>  
        html, body {  
            margin: 0;  
            padding: 0;  
            background: #232323;  
            color: #fff;  
            font-family: Arial, sans-serif;  
            overflow: hidden;  
        }  
        #gameCanvas {  
            display: block;  
            background: #141619;  
        }  
        #spawnBtn {  
            position: absolute;  
            top: 16px;  
            right: 24px;  
            z-index: 10;  
            padding: 12px 18px;  
            background: #0a85ff;  
            color: #fff;  
            border: none;  
            border-radius: 8px;  
            font-size: 1rem;  
            cursor: pointer;  
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);  
        }  
        #spawnBtn:active {  
            background: #0765bc;  
        }  
    </style>  
</head>  
<body>  
      
    <button id="spawnBtn" aria-label="Spawn Ragdoll and Objects">Spawn</button>  
      
    <canvas id="gameCanvas" width="1100" height="700"></canvas>

// Create engine and world  
    const engine = Engine.create();  
    const world = engine.world;

// Setup canvas  
    const canvas = document.getElementById('gameCanvas');  
    const width = canvas.width;  
    const height = canvas.height;

// Create renderer  
    const render = Render.create({  
        canvas: canvas,  
        engine: engine,  
        options: {  
            width: width,  
            height: height,  
            wireframes: false,  
            background: '#222',  
            pixelRatio: window.devicePixelRatio  
        }  
    });

Render.run(render);

// Create runner  
    const runner = Runner.create();  
    Runner.run(runner, engine);

// --- World Boundaries (walls, ceiling, floor) ---  
    const wallThickness = 40;

// Floor  
    const floor = Bodies.rectangle(width/2, height + wallThickness/2, width, wallThickness, { isStatic: true, render: { fillStyle: '#333' } });  
    // Ceiling  
    const ceiling = Bodies.rectangle(width/2, -wallThickness/2, width, wallThickness, { isStatic: true, render: { fillStyle: '#333' } });  
    // Left wall  
    const leftWall = Bodies.rectangle(-wallThickness/2, height/2, wallThickness, height, { isStatic: true, render: { fillStyle: '#333' } });  
    // Right wall  
    const rightWall = Bodies.rectangle(width + wallThickness/2, height/2, wallThickness, height, { isStatic: true, render: { fillStyle: '#333' } });

World.add(world, [floor, ceiling, leftWall, rightWall]);

// --- Ragdoll Creation Function ---  
    function createRagdoll(x, y) {  
        // Sizes  
        const headRadius = 24;  
        const chestW = 28, chestH = 48;  
        const upperArmW = 14, upperArmH = 32;  
        const lowerArmW = 12, lowerArmH = 32;  
        const upperLegW = 16, upperLegH = 38;  
        const lowerLegW = 14, lowerLegH = 34;

// Parts  
        const head = Bodies.circle(x, y - chestH - headRadius, headRadius, { density: 0.001, restitution: 0.4, friction: 0.2, label: 'head', render: { fillStyle: "#e5c07b" } });  
        const chest = Bodies.rectangle(x, y, chestW, chestH, { density: 0.002, restitution: 0.3, friction: 0.2, label: 'chest', render: { fillStyle: "#c678dd" } });

// Arms  
        const upperArmL = Bodies.rectangle(x - chestW/2 - upperArmW/2, y - chestH/4, upperArmW, upperArmH, { density: 0.001, label: "upperArmL", render: { fillStyle: "#61afef" } });  
        const lowerArmL = Bodies.rectangle(x - chestW/2 - upperArmW/2, y + upperArmH/2, lowerArmW, lowerArmH, { density: 0.0009, label: "lowerArmL", render: { fillStyle: "#61afef" } });

const upperArmR = Bodies.rectangle(x + chestW/2 + upperArmW/2, y - chestH/4, upperArmW, upperArmH, { density: 0.001, label: "upperArmR", render: { fillStyle: "#61afef" } });  
        const lowerArmR = Bodies.rectangle(x + chestW/2 + upperArmW/2, y + upperArmH/2, lowerArmW, lowerArmH, { density: 0.0009, label: "lowerArmR", render: { fillStyle: "#61afef" } });

// Legs  
        const upperLegL = Bodies.rectangle(x - chestW/4, y + chestH/2 + upperLegH/2, upperLegW, upperLegH, { density: 0.001, label: "upperLegL", render: { fillStyle: "#98c379" } });  
        const lowerLegL = Bodies.rectangle(x - chestW/4, y + chestH/2 + upperLegH + lowerLegH/2, lowerLegW, lowerLegH, { density: 0.0009, label: "lowerLegL", render: { fillStyle: "#98c379" } });

const upperLegR = Bodies.rectangle(x + chestW/4, y + chestH/2 + upperLegH/2, upperLegW, upperLegH, { density: 0.001, label: "upperLegR", render: { fillStyle: "#98c379" } });  
        const lowerLegR = Bodies.rectangle(x + chestW/4, y + chestH/2 + upperLegH + lowerLegH/2, lowerLegW, lowerLegH, { density: 0.0009, label: "lowerLegR", render: { fillStyle: "#98c379" } });

// Constraints (joints) with breakable limits  
        function breakableConstraint(bodyA, bodyB, options) {  
            // Add a custom property for break force  
            return Constraint.create(Object.assign({}, options, {  
                bodyA, bodyB,  
                render: { visible: false },  
                label: "breakable"  
            }));  
        }

// Joints  
        const constraints = [  
            // Head to chest  
            breakableConstraint(head, chest, { pointA: { x: 0, y: headRadius }, pointB: { x: 0, y: -chestH/2 }, stiffness: 0.7, length: 2 }),  
            // Left shoulder  
            breakableConstraint(upperArmL, chest, { pointA: { x: 0, y: -upperArmH/2 }, pointB: { x: -chestW/2, y: -chestH/4 }, stiffness: 0.6, length: 2 }),  
            // Left elbow  
            breakableConstraint(upperArmL, lowerArmL, { pointA: { x: 0, y: upperArmH/2 }, pointB: { x: 0, y: -lowerArmH/2 }, stiffness: 0.6, length: 2 }),  
            // Right shoulder  
            breakableConstraint(upperArmR, chest, { pointA: { x: 0, y: -upperArmH/2 }, pointB: { x: chestW/2, y: -chestH/4 }, stiffness: 0.6, length: 2 }),  
            // Right elbow  
            breakableConstraint(upperArmR, lowerArmR, { pointA: { x: 0, y: upperArmH/2 }, pointB: { x: 0, y: -lowerArmH/2 }, stiffness: 0.6, length: 2 }),  
            // Chest to upper legs  
            breakableConstraint(chest, upperLegL, { pointA: { x: -chestW/4, y: chestH/2 }, pointB: { x: 0, y: -upperLegH/2 }, stiffness: 0.6, length: 2 }),  
            breakableConstraint(chest, upperLegR, { pointA: { x: chestW/4, y: chestH/2 }, pointB: { x: 0, y: -upperLegH/2 }, stiffness: 0.6, length: 2 }),  
            // Knees  
            breakableConstraint(upperLegL, lowerLegL, { pointA: { x: 0, y: upperLegH/2 }, pointB: { x: 0, y: -lowerLegH/2 }, stiffness: 0.6, length: 2 }),  
            breakableConstraint(upperLegR, lowerLegR, { pointA: { x: 0, y: upperLegH/2 }, pointB: { x: 0, y: -lowerLegH/2 }, stiffness: 0.6, length: 2 }),  
        ];

// Make a composite ragdoll  
        const ragdoll = Composite.create({ label: 'ragdoll' });  
        Composite.add(ragdoll, [head, chest, upperArmL, lowerArmL, upperArmR, lowerArmR, upperLegL, lowerLegL, upperLegR, lowerLegR]);  
        Composite.add(ragdoll, constraints);

World.add(world, ragdoll);

return { composite: ragdoll, constraints: constraints };  
    }

// --- Helper: Spawn random object shapes ---  
    function spawnRandomShape(x, y) {  
        const shapes = [  
            () => Bodies.rectangle(x, y, 40, 40, { restitution: 0.5, render: { fillStyle: "#e06c75" } }),  
            () => Bodies.circle(x, y, 18, { restitution: 0.9, render: { fillStyle: "#d19a66" } }),  
            () => Bodies.polygon(x, y, 3 + Math.floor(Math.random() * 4), 28, { restitution: 0.7, render: { fillStyle: "#56b6c2" } })  
        ];  
        const body = shapes[Math.floor(Math.random() * shapes.length)]();  
        World.add(world, body);  
    }

// --- Break constraints if force exceeds threshold ---  
    Events.on(engine, 'afterUpdate', function () {  
        // Iterate over all composites  
        world.composites.forEach(composite => {  
            if (composite.label === 'ragdoll') {  
                // Check each constraint for excessive force  
                composite.constraints.forEach(constraint => {  
                    if (constraint.label === "breakable" && constraint.bodyA && constraint.bodyB) {  
                        // Calculate force on constraint  
                        const posA = Matter.Constraint.pointAWorld(constraint);  
                        const posB = Matter.Constraint.pointBWorld(constraint);  
                        const dist = Vector.magnitude(Vector.sub(posA, posB));  
                        const breakLength = (constraint.length || 0) + 35; // 35px slack  
                        if (dist > breakLength) {  
                            // Remove constraint from world and composite  
                            Composite.remove(composite, constraint);  
                            World.remove(world, constraint);  
                        }  
                    }  
                });  
            }  
        });  
    });

// --- Mouse drag support ---  
    const mouse = Mouse.create(render.canvas);  
    const mouseConstraint = MouseConstraint.create(engine, {  
        mouse: mouse,  
        constraint: {  
            stiffness: 0.2,  
            render: { visible: false }  
        }  
    });  
    World.add(world, mouseConstraint);

// --- Spawn button functionality ---  
    const spawnBtn = document.getElementById('spawnBtn');  
    spawnBtn.onclick = () => {  
        // Spawn ragdoll near the top middle  
        createRagdoll(width/2 + (Math.random() - 0.5) * 200, 100 + Math.random() * 30);  
        // Spawn random shapes  
        for (let i = 0; i < 2; ++i) {  
            spawnRandomShape(180 + Math.random() * (width-360), 60 + Math.random() * 80);  
        }  
    };

// Spawn the initial ragdoll and some objects  
    createRagdoll(width/2, 130);  
    for (let i = 0; i < 3; ++i) {  
        spawnRandomShape(220 + i*130, 100);  
    }

// --- Responsive resize (optional, can be disabled if fixed size is preferred) ---  
    // window.addEventListener('resize', () => {  
    //     render.canvas.width = window.innerWidth;  
    //     render.canvas.height = window.innerHeight;  
    //     Render.lookAt(render, { min: { x: 0, y: 0 }, max: { x: render.canvas.width, y: render.canvas.height } });  
    // });

</script>  
      
</body>  
</html>

Matter.js Ragdoll Physics Game Example

Recommended

Stargazer Javascript Game

HTML Button Code Example

Street Fighter II Turbo HTML5 Game Emulator

HTML

CSS

JS

Recommended

Stargazer Javascript Game

HTML Button Code Example

Street Fighter II Turbo HTML5 Game Emulator

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS