Matter.js Physics: Ragdoll, Box, Weapon Playground

1,275 iroger7

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

CSS

Matter.js Physics: Ragdoll, Box, Weapon Playground

Recommended