Matter.js Ragdoll Physics Game Demo

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ragdoll Game</title>
  <style>
    body { margin: 0; overflow: hidden; background: #e0e0e0; }
    #controls {
      position: fixed; top: 10px; left: 10px; z-index: 2;
      display: flex; flex-direction: column; gap: 10px;
    }
    #spawnBtn {
      position: fixed; top: 10px; right: 10px; z-index: 2;
      padding: 8px 16px; font-size: 16px; background: #4caf50; color: #fff; border: none; border-radius: 5px; cursor: pointer;
    }
    button { padding: 8px 16px; font-size: 16px; border-radius: 5px; border: none; cursor: pointer; }
    canvas { background: #fff; display: block; }
  </style>
</head>
<body>
  <div id="controls">
    <button onclick="spawnRagdoll()">Ragdoll</button>
    <button onclick="spawnSword()">Sword</button>
    <button onclick="spawnBox()">Box</button>
  </div>
  <button id="spawnBtn" onclick="spawnShapes()">Spawn Shapes</button>
  <canvas id="world"></canvas>
  
  <script src="https://cdn.jsdelivr.net/npm/matter-js@0.19.0/build/matter.min.js"></script>
  <script>
    const { Engine, Render, World, Bodies, Body, Constraint, Mouse, MouseConstraint, Composite } = Matter;

const engine = Engine.create();
    const world = engine.world;
    const canvas = document.getElementById('world');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

const render = Render.create({
      canvas: canvas,
      engine: engine,
      options: {
        width: window.innerWidth,
        height: window.innerHeight,
        wireframes: false,
        background: '#fff'
      }
    });

Render.run(render);
    Engine.run(engine);

// Ground
    World.add(world, [
      Bodies.rectangle(window.innerWidth / 2, window.innerHeight, window.innerWidth, 40, { isStatic: true })
    ]);

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

// Helper: Spawn Ragdoll
    function spawnRagdoll() {
      // Simple stick-figure ragdoll with constraints
      const x = 200 + Math.random() * 200;
      const y = 100;
      // Body parts
      const head = Bodies.circle(x, y, 20, { density: 0.01, restitution: 0.7 });
      const torso = Bodies.rectangle(x, y + 60, 20, 60, { density: 0.01 });
      const leftArm = Bodies.rectangle(x - 30, y + 60, 40, 12, { density: 0.005 });
      const rightArm = Bodies.rectangle(x + 30, y + 60, 40, 12, { density: 0.005 });
      const leftLeg = Bodies.rectangle(x - 10, y + 120, 12, 40, { density: 0.005 });
      const rightLeg = Bodies.rectangle(x + 10, y + 120, 12, 40, { density: 0.005 });

// Constraints (joints)
      const constraints = [
        Constraint.create({ bodyA: head, pointA: {x:0, y:20}, bodyB: torso, pointB: {x:0, y:-30}, stiffness: 0.5, length: 0, render: { visible: false } }),
        Constraint.create({ bodyA: torso, pointA: {x:-10, y:-20}, bodyB: leftArm, pointB: {x:20, y:0}, stiffness: 0.5, length: 0, render: { visible: false } }),
        Constraint.create({ bodyA: torso, pointA: {x:10, y:-20}, bodyB: rightArm, pointB: {x:-20, y:0}, stiffness: 0.5, length: 0, render: { visible: false } }),
        Constraint.create({ bodyA: torso, pointA: {x:-7, y:30}, bodyB: leftLeg, pointB: {x:0, y:-20}, stiffness: 0.5, length: 0, render: { visible: false } }),
        Constraint.create({ bodyA: torso, pointA: {x:7, y:30}, bodyB: rightLeg, pointB: {x:0, y:-20}, stiffness: 0.5, length: 0, render: { visible: false } }),
      ];

World.add(world, [head, torso, leftArm, rightArm, leftLeg, rightLeg, ...constraints]);
    }

// Helper: Spawn Sword
    function spawnSword() {
      const x = 300 + Math.random() * 200;
      const y = 100;
      const sword = Bodies.rectangle(x, y, 80, 10, { density: 0.02, restitution: 0.2, render: { fillStyle: '#444' } });
      World.add(world, sword);
    }

// Helper: Spawn Box
    function spawnBox() {
      const x = 400 + Math.random() * 200;
      const y = 100;
      const box = Bodies.rectangle(x, y, 40, 40, { density: 0.01, restitution: 0.6, render: { fillStyle: '#8bc34a' } });
      World.add(world, box);
    }

// Spawn Cube, Circle, Triangle
    function spawnShapes() {
      const x = 100 + Math.random() * (window.innerWidth - 200);
      const y = 100;
      // Cube
      const cube = Bodies.rectangle(x, y, 40, 40, { restitution: 0.7, render: { fillStyle: '#f44336' } });
      // Circle
      const circle = Bodies.circle(x + 60, y, 20, { restitution: 0.7, render: { fillStyle: '#2196f3' } });
      // Triangle (polygon with 3 sides)
      const triangle = Bodies.polygon(x + 120, y, 3, 30, { restitution: 0.7, render: { fillStyle: '#ffeb3b' } });

World.add(world, [cube, circle, triangle]);
    }

// Ragdoll destruction logic (rip apart with force)
    Matter.Events.on(engine, 'beforeUpdate', function() {
      Composite.allConstraints(world).forEach(constraint => {
        // Check force on constraint
        if (constraint.bodyA && constraint.bodyB) {
          const dx = (constraint.bodyA.position.x + (constraint.pointA?.x||0)) - (constraint.bodyB.position.x + (constraint.pointB?.x||0));
          const dy = (constraint.bodyA.position.y + (constraint.pointA?.y||0)) - (constraint.bodyB.position.y + (constraint.pointB?.y||0));
          const dist = Math.sqrt(dx*dx + dy*dy);
          if (dist > 80) { // threshold to "rip apart"
            World.remove(world, constraint);
          }
        }
      });
    });

window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      render.options.width = window.innerWidth;
      render.options.height = window.innerHeight;
    });
  </script>
</body>
</html>

Matter.js Ragdoll Physics Game Demo

Recommended

answer game

Retro JavaScript Ping Pong Game in HTML5 Canvas

HTML

CSS

JS

Recommended

answer game

Retro JavaScript Ping Pong Game in HTML5 Canvas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS