Matter.js Physics: Ragdoll, Box, Weapon Playground

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Physics Playground: Ragdolls, Boxes & Weapons</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/matter-js@0.19.0/build/matter.min.js"></script>
  <style>
    :root {
      --accent: #4a90e2;
      --accent-dark: #357ab8;
      --bg: #24282f;
      --control-bg: rgba(36, 40, 47, 0.98);
      --btn-radius: 4px;
      --shadow: 0 2px 8px #000a;
      --focus: 0 0 0 3px #90caf9;
    }
    html, body { height: 100%; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      background: var(--bg);
      color: #eee;
      margin: 0;
      overflow: hidden;
      height: 100vh;
    }
    #controls {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 10;
      background: var(--control-bg);
      border-radius: 8px;
      padding: 16px 20px;
      box-shadow: var(--shadow);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
    }
    #controls button {
      padding: 8px 18px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: var(--btn-radius);
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.18s, box-shadow 0.18s, transform 0.14s;
      outline: none;
    }
    #controls button:active {
      background: var(--accent-dark);
      transform: scale(0.98);
    }
    #controls button:focus-visible {
      box-shadow: var(--focus);
    }
    #controls button[aria-pressed="true"] {
      background: #ffd54f;
      color: #222;
    }
    @media (max-width: 600px) {
      #controls {
        flex-direction: column;
        top: 5px; left: 0; right: 0;
        margin: 0 auto;
        width: max-content;
        padding: 9px 6px;
        font-size: 0.9rem;
      }
      #controls button {
        width: 100%;
        margin: 2px 0;
        min-width: 110px;
      }
    }
    #canvas-container {
      width: 100vw;
      height: 100vh;
      display: block;
      position: relative;
    }
    #instructions {
      position: absolute;
      bottom: 10px;
      left: 12px;
      z-index: 15;
      color: #eee;
      background: rgba(36,40,47,0.78);
      padding: 7px 14px;
      border-radius: 4px;
      font-size: 0.98rem;
      pointer-events: none;
      user-select: none;
    }
    @media (max-width: 600px) {
      #instructions {
        font-size: 0.93rem;
        left: 5px; right: 5px;
        max-width: 97vw;
      }
    }
  </style>
</head>
<body>
  <nav id="controls" aria-label="Physics Engine Controls">
    <button id="addRagdollBtn" title="Add a ragdoll (A)" aria-label="Add ragdoll">Add Ragdoll</button>
    <button id="addBoxBtn" title="Add a box (B)" aria-label="Add box">Add Box</button>
    <button id="addSwordBtn" title="Add a sword (S)" aria-label="Add sword">Add Sword</button>
    <button id="addBatBtn" title="Add a bat (T)" aria-label="Add bat">Add Bat</button>
    <button id="addBallBtn" title="Add a ball (O)" aria-label="Add ball">Add Ball</button>
    <button id="toggleGravityBtn" title="Toggle gravity (G)" aria-pressed="true" aria-label="Toggle gravity">Gravity On</button>
    <button id="resetBtn" title="Reset scene (R)" aria-label="Reset scene">Reset</button>
    <button id="clearBoxesBtn" title="Clear all loose boxes" aria-label="Clear boxes">Clear Boxes</button>
    <button id="clearWeaponsBtn" title="Clear all weapons" aria-label="Clear weapons">Clear Weapons</button>
  </nav>
  <main id="canvas-container" tabindex="-1" aria-label="Physics simulation area"></main>
  <div id="instructions" aria-live="polite">
    Shortcuts: <b>A</b>dd Ragdoll, <b>B</b>ox, <b>S</b>word, Ba<b>T</b>, Ball (<b>O</b>), <b>G</b>ravity, <b>R</b>eset.<br>
    Drag anything with mouse/touch!
  </div>
  <script>
    // Matter.js aliases
    const { Engine, Render, Runner, Bodies, Composite, Body, Constraint, Events, Mouse, MouseConstraint, World } = Matter;
    let engine = Engine.create();
    let world = engine.world;

// Responsive canvas
    const canvasContainer = document.getElementById('canvas-container');
    function getCanvasSize() {
      return { width: window.innerWidth, height: window.innerHeight };
    }

const render = Render.create({
      element: canvasContainer,
      engine: engine,
      options: {
        ...getCanvasSize(),
        wireframes: false,
        background: '#24282f',
        showAngleIndicator: false,
        pixelRatio: window.devicePixelRatio || 1
      }
    });
    Render.run(render);
    const runner = Runner.create();
    Runner.run(runner, engine);

// World boundaries
    let floor, leftWall, rightWall;
    function addBoundaries() {
      const { width, height } = getCanvasSize();
      floor = Bodies.rectangle(width / 2, height - 20, width, 40, { isStatic: true, render: { fillStyle: '#222' } });
      leftWall = Bodies.rectangle(-20, height / 2, 40, height, { isStatic: true, render: { fillStyle: '#222' } });
      rightWall = Bodies.rectangle(width + 20, height / 2, 40, height, { isStatic: true, render: { fillStyle: '#222' } });
      World.add(world, [floor, leftWall, rightWall]);
    }
    addBoundaries();

// Store all ragdolls, boxes, and weapons
    let ragdolls = [], boxes = [], weapons = [];
    let gravityOn = true;

// Responsive resize with throttling
    let resizeTimeout;
    function handleResize() {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(() => {
        const { width, height } = getCanvasSize();
        render.options.width = width;
        render.options.height = height;
        render.canvas.width = width * (window.devicePixelRatio || 1);
        render.canvas.height = height * (window.devicePixelRatio || 1);

// Remove old boundaries, add new
        World.remove(world, [floor, leftWall, rightWall]);
        addBoundaries();

Render.lookAt(render, {
          min: { x: 0, y: 0 },
          max: { x: width, y: height }
        });
      }, 100);
    }
    window.addEventListener('resize', handleResize);

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

// Utility: ragdoll
    function createRagdoll(x, y) {
      const head = Bodies.circle(x, y - 60, 19, { density: 0.001, friction: 0.21, restitution: 0.32, render: { fillStyle: '#ffe0b2', strokeStyle: '#e0a96d', lineWidth: 1.5 }});
      const torso = Bodies.rectangle(x, y, 22, 60, { density: 0.001, friction: 0.21, restitution: 0.13, render: { fillStyle: '#90caf9', strokeStyle: '#2e5984', lineWidth: 1.6 }});
      const leftArm = Bodies.rectangle(x - 32, y - 10, 40, 13, { density: 0.0005, friction: 0.21, restitution: 0.21, render: { fillStyle: '#a5d6a7', strokeStyle: '#4d8a5c', lineWidth: 1.3 }});
      const rightArm = Bodies.rectangle(x + 32, y - 10, 40, 13, { density: 0.0005, friction: 0.21, restitution: 0.21, render: { fillStyle: '#a5d6a7', strokeStyle: '#4d8a5c', lineWidth: 1.3 }});
      const leftLeg = Bodies.rectangle(x - 11, y + 51, 13, 40, { density: 0.0005, friction: 0.21, restitution: 0.23, render: { fillStyle: '#f48fb1', strokeStyle: '#b73d6e', lineWidth: 1.1 }});
      const rightLeg = Bodies.rectangle(x + 11, y + 51, 13, 40, { density: 0.0005, friction: 0.21, restitution: 0.23, render: { fillStyle: '#f48fb1', strokeStyle: '#b73d6e', lineWidth: 1.1 }});
      // Ragdoll joints
      const headToTorso = Constraint.create({ bodyA: head, pointA: { x: 0, y: 19 }, bodyB: torso, pointB: { x: 0, y: -30 }, length: 1, stiffness: 0.82 });
      const torsoToLeftArm = Constraint.create({ bodyA: torso, pointA: { x: -10, y: -20 }, bodyB: leftArm, pointB: { x: 20, y: 0 }, length: 1, stiffness: 0.64 });
      const torsoToRightArm = Constraint.create({ bodyA: torso, pointA: { x: 10, y: -20 }, bodyB: rightArm, pointB: { x: -20, y: 0 }, length: 1, stiffness: 0.64 });
      const torsoToLeftLeg = Constraint.create({ bodyA: torso, pointA: { x: -7, y: 30 }, bodyB: leftLeg, pointB: { x: 0, y: -20 }, length: 1, stiffness: 0.61 });
      const torsoToRightLeg = Constraint.create({ bodyA: torso, pointA: { x: 7, y: 30 }, bodyB: rightLeg, pointB: { x: 0, y: -20 }, length: 1, stiffness: 0.61 });
      // Compose
      const composite = Composite.create({ label: "Ragdoll" });
      Composite.add(composite, [head, torso, leftArm, rightArm, leftLeg, rightLeg]);
      Composite.add(composite, [headToTorso, torsoToLeftArm, torsoToRightArm, torsoToLeftLeg, torsoToRightLeg]);
      return composite;
    }

// Add a ragdoll at random x
    function addRagdoll() {
      const margin = 60;
      const x = margin + Math.random() * (window.innerWidth - margin * 2);
      const y = 130;
      const ragdoll = createRagdoll(x, y);
      ragdolls.push(ragdoll);
      Composite.add(world, ragdoll);
    }

// Add a loose box
    function addBox() {
      const margin = 50;
      const x = margin + Math.random() * (window.innerWidth - margin * 2);
      const box = Bodies.rectangle(x, 60, 42, 42, {
        restitution: 0.55,
        friction: 0.31,
        render: { fillStyle: '#ffd54f', strokeStyle: '#d2ac2e', lineWidth: 1.5 }
      });
      boxes.push(box);
      World.add(world, box);
    }

// --- Weapons ---
    // Add a sword (rectangle, long and thin, gray)
    function addSword() {
      const margin = 50;
      const x = margin + Math.random() * (window.innerWidth - margin * 2);
      const sword = Bodies.rectangle(x, 60, 80, 12, {
        density: 0.0015,
        friction: 0.21,
        restitution: 0.22,
        render: { fillStyle: "#bbb", strokeStyle: "#888", lineWidth: 2 }
      });
      weapons.push(sword);
      World.add(world, sword);
    }
    // Add a bat (rectangle, shorter, brown-ish)
    function addBat() {
      const margin = 50;
      const x = margin + Math.random() * (window.innerWidth - margin * 2);
      const bat = Bodies.rectangle(x, 60, 60, 15, {
        density: 0.0011,
        friction: 0.25,
        restitution: 0.18,
        render: { fillStyle: "#b8860b", strokeStyle: "#7c5b01", lineWidth: 2 }
      });
      weapons.push(bat);
      World.add(world, bat);
    }
    // Add a ball (circle)
    function addBall() {
      const margin = 50;
      const x = margin + Math.random() * (window.innerWidth - margin * 2);
      const ball = Bodies.circle(x, 60, 18, {
        density: 0.0007,
        friction: 0.22,
        restitution: 0.65,
        render: { fillStyle: "#ef5350", strokeStyle: "#ad3131", lineWidth: 2 }
      });
      weapons.push(ball);
      World.add(world, ball);
    }
    // Remove all weapons
    function clearWeapons() {
      for (const weapon of weapons) World.remove(world, weapon);
      weapons = [];
    }

// Remove all ragdolls and boxes and weapons
    function resetScene() {
      for (const ragdoll of ragdolls) Composite.remove(world, ragdoll);
      for (const box of boxes) World.remove(world, box);
      for (const weapon of weapons) World.remove(world, weapon);
      ragdolls = [];
      boxes = [];
      weapons = [];
    }
    // Remove only loose boxes
    function clearBoxes() {
      for (const box of boxes) World.remove(world, box);
      boxes = [];
    }

// Gravity toggle
    function toggleGravity() {
      gravityOn = !gravityOn;
      engine.world.gravity.y = gravityOn ? 1 : 0;
      toggleGravityBtn.setAttribute('aria-pressed', gravityOn ? "true" : "false");
      toggleGravityBtn.textContent = gravityOn ? "Gravity On" : "Gravity Off";
      toggleGravityBtn.style.background = gravityOn ? "var(--accent)" : "#ffd54f";
      toggleGravityBtn.style.color = gravityOn ? "#fff" : "#222";
    }

// Controls: button elements
    const addRagdollBtn = document.getElementById('addRagdollBtn');
    const addBoxBtn = document.getElementById('addBoxBtn');
    const addSwordBtn = document.getElementById('addSwordBtn');
    const addBatBtn = document.getElementById('addBatBtn');
    const addBallBtn = document.getElementById('addBallBtn');
    const resetBtn = document.getElementById('resetBtn');
    const toggleGravityBtn = document.getElementById('toggleGravityBtn');
    const clearBoxesBtn = document.getElementById('clearBoxesBtn');
    const clearWeaponsBtn = document.getElementById('clearWeaponsBtn');

// Event listeners
    addRagdollBtn.onclick = addRagdoll;
    addBoxBtn.onclick = addBox;
    addSwordBtn.onclick = addSword;
    addBatBtn.onclick = addBat;
    addBallBtn.onclick = addBall;
    resetBtn.onclick = resetScene;
    toggleGravityBtn.onclick = toggleGravity;
    clearBoxesBtn.onclick = clearBoxes;
    clearWeaponsBtn.onclick = clearWeapons;

// Keyboard shortcuts (a, b, s, t, o, g, r)
    document.addEventListener('keydown', (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      switch (e.key.toLowerCase()) {
        case 'a': addRagdoll(); break;
        case 'b': addBox(); break;
        case 's': addSword(); break;
        case 't': addBat(); break;
        case 'o': addBall(); break;
        case 'g': toggleGravity(); break;
        case 'r': resetScene(); break;
      }
    });

// Initial demo content
    for (let i = 0; i < 2; i++) addRagdoll();
    for (let i = 0; i < 2; i++) addBox();
    addSword();
    addBat();
    addBall();

// Accessibility: focus management for canvas
    canvasContainer.addEventListener('click', () => canvasContainer.focus());

// Responsive initial canvas sizing
    handleResize();
  </script>
</body>
</html

Matter.js Physics: Ragdoll, Box, Weapon Playground

Recommended

Heart Bubbles Animation with Matter.js

Matter.js Ragdoll Physics Game Demo

HTML

CSS

JS

Recommended

Heart Bubbles Animation with Matter.js

Matter.js Ragdoll Physics Game Demo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS