Matter.js Ragdoll Physics Game Example

1,199 iroger7

<!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>

CSS

Matter.js Ragdoll Physics Game Example

Recommended