HTML5 Physics Ragdoll Demo: Matter.js Playground

Open In Editor Video Publish Your Code

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>HTML5 Physics Engine - Ragdoll Playground</title>  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>  
  <style>  
    body { margin:0; background: #21232a; color: #fff; font-family: sans-serif; }  
    #controls { padding: 16px; background: #2c2f3a; position: fixed; width: 100%; z-index: 2; }  
    #controls button { margin: 0 6px 8px 0; padding: 8px 14px; border: none; border-radius: 4px; background: #4e54c8; color: #fff; font-weight: bold; cursor:pointer;}  
    #controls button:hover { background: #6c72f7; }  
    canvas { display: block; margin: 0 auto; background: #1a1c23; }  
  </style>  
</head>  
<body>  
    
  <div id="controls">  
    <button onclick="addRagdoll()">Add Ragdoll</button>  
    <button onclick="addShape('circle')">Add Circle</button>  
    <button onclick="addShape('rectangle')">Add Rectangle</button>  
    <button onclick="addWeapon()">Add Weapon</button>  
    <button onclick="nextMap()">Maps</button>  
    <span style="margin-left:30px;">Physics Ragdoll Demo with Maps, Shapes & Weapons</span>  
  </div>  
    
  <script>  
    // === Physics Engine Setup ===  
    const { Engine, Render, Runner, World, Bodies, Body, Constraint, Composite, Composites, Mouse, MouseConstraint } = Matter;

const width = window.innerWidth;  
    const height = window.innerHeight - 56; // account for controls

const engine = Engine.create();  
    const world = engine.world;  
    engine.gravity.y = 1.2;

// Renderer  
    const render = Render.create({  
      element: document.body,  
      engine: engine,  
      options: {  
        width: width,  
        height: height,  
        wireframes: false, // enable solid shapes  
        background: '#1a1c23'  
      }  
    });

Render.run(render);  
    const runner = Runner.create();  
    Runner.run(runner, engine);

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

// === Maps Data ===  
    const maps = [  
      // Map 1: Simple Floor and Walls  
      function() {  
        const floor = Bodies.rectangle(width/2, height-16, width-100, 32, { isStatic: true, render:{ fillStyle:'#646cff' } });  
        const leftWall = Bodies.rectangle(15, height/2, 30, height, { isStatic: true, render:{ fillStyle:'#646cff' } });  
        const rightWall = Bodies.rectangle(width-15, height/2, 30, height, { isStatic: true, render:{ fillStyle:'#646cff' } });  
        return [floor, leftWall, rightWall];  
      },  
      // Map 2: Platforms & Pits  
      function() {  
        return [  
          Bodies.rectangle(width/2, height-16, width-100, 32, { isStatic: true, render:{ fillStyle:'#ee7752' } }),  
          Bodies.rectangle(width/2, height/2, 220, 24, { isStatic: true, render:{ fillStyle:'#ee7752' } }),  
          Bodies.rectangle(width/4, height/1.5, 120, 16, { isStatic: true, render:{ fillStyle:'#ee7752' } }),  
          Bodies.rectangle(width*0.75, height/1.5, 120, 16, { isStatic: true, render:{ fillStyle:'#ee7752' } }),  
        ];  
      },  
      // Map 3: Slopes & Obstacles  
      function() {  
        return [  
          Bodies.rectangle(width/2, height-16, width-100, 32, { isStatic: true, render:{ fillStyle:'#23d160' } }),  
          Bodies.rectangle(width/3, height*0.7, 220, 20, { isStatic: true, angle: -Math.PI/8, render:{ fillStyle:'#23d160' } }),  
          Bodies.rectangle(width*0.7, height*0.4, 220, 20, { isStatic: true, angle: Math.PI/6, render:{ fillStyle:'#23d160' } }),  
          Bodies.rectangle(width/2, height/3, 60, 60, { isStatic: true, chamfer: {radius:10}, render:{ fillStyle:'#23d160' } }),  
        ];  
      },  
      // Map 4: Traps & Moving Platforms (static representation)  
      function() {  
        return [  
          Bodies.rectangle(width/2, height-16, width-100, 32, { isStatic: true, render:{ fillStyle:'#ff6f61' } }),  
          Bodies.rectangle(width/2, height/2, 200, 12, { isStatic: true, render:{ fillStyle:'#ff6f61' } }),  
          Bodies.circle(width/4, height/2, 30, { isStatic: true, render:{ fillStyle:'#ffcd38' } }),  
          Bodies.rectangle(width*0.75, height*0.6, 30, 120, { isStatic: true, render:{ fillStyle:'#ffcd38' } }),  
        ];  
      }  
    ];  
    let currentMap = 0;  
    let mapBodies = [];

// === Helper Functions ===

// Clear bodies except ragdolls and shapes  
    function clearMap() {  
      for (let body of mapBodies) {  
        World.remove(world, body);  
      }  
      mapBodies = [];  
    }

// Load current map  
    function loadMap(idx) {  
      clearMap();  
      mapBodies = maps[idx]();  
      for (let body of mapBodies) {  
        World.add(world, body);  
      }  
    }

// Cycle through maps  
    function nextMap() {  
      currentMap = (currentMap + 1) % maps.length;  
      loadMap(currentMap);  
    }

// === Ragdoll Creation ===  
    function addRagdoll(x = width/2, y = 120) {  
      // Sizes  
      const headRadius = 22;  
      const torsoLength = 60;  
      const torsoWidth = 24;  
      const limbLength = 40;  
      const limbWidth = 13;

// Body Parts  
      const head = Bodies.circle(x, y, headRadius, { density: 0.001, friction: 0.3, restitution: 0.4, render:{ fillStyle:'#fff' } });  
      const torso = Bodies.rectangle(x, y + headRadius + torsoLength/2, torsoWidth, torsoLength, { density:0.002, friction:0.3, render:{ fillStyle:'#999' } });

// Arms  
      const upperArmL = Bodies.rectangle(x - torsoWidth/2 - limbLength/2, y + headRadius + 10, limbLength, limbWidth, { density:0.001, render:{ fillStyle:'#6c72f7' } });  
      const lowerArmL = Bodies.rectangle(x - torsoWidth/2 - limbLength - limbLength/2, y + headRadius + 18, limbLength, limbWidth, { density:0.0007, render:{ fillStyle:'#4e54c8' } });  
      const upperArmR = Bodies.rectangle(x + torsoWidth/2 + limbLength/2, y + headRadius + 10, limbLength, limbWidth, { density:0.001, render:{ fillStyle:'#6c72f7' } });  
      const lowerArmR = Bodies.rectangle(x + torsoWidth/2 + limbLength + limbLength/2, y + headRadius + 18, limbLength, limbWidth, { density:0.0007, render:{ fillStyle:'#4e54c8' } });

// Legs  
      const upperLegL = Bodies.rectangle(x - torsoWidth/4, y + headRadius + torsoLength + limbLength/2, limbWidth, limbLength, { density:0.001, render:{ fillStyle:'#f7b731' } });  
      const lowerLegL = Bodies.rectangle(x - torsoWidth/4, y + headRadius + torsoLength + limbLength + limbLength/2, limbWidth, limbLength, { density:0.0007, render:{ fillStyle:'#fd9644' } });  
      const upperLegR = Bodies.rectangle(x + torsoWidth/4, y + headRadius + torsoLength + limbLength/2, limbWidth, limbLength, { density:0.001, render:{ fillStyle:'#f7b731' } });  
      const lowerLegR = Bodies.rectangle(x + torsoWidth/4, y + headRadius + torsoLength + limbLength + limbLength/2, limbWidth, limbLength, { density:0.0007, render:{ fillStyle:'#fd9644' } });

// Constraints (joints)  
      const joints = [  
        // Head to torso  
        Constraint.create({ bodyA: head, pointA: {x:0, y:headRadius}, bodyB: torso, pointB:{x:0, y:-torsoLength/2}, stiffness:0.7, length:2 }),  
        // Arms to torso  
        Constraint.create({ bodyA: upperArmL, pointA:{x:limbLength/2, y:0}, bodyB: torso, pointB:{x:-torsoWidth/2, y:-torsoLength/4}, stiffness:0.7, length:2 }),  
        Constraint.create({ bodyA: upperArmR, pointA:{x:-limbLength/2, y:0}, bodyB: torso, pointB:{x:torsoWidth/2, y:-torsoLength/4}, stiffness:0.7, length:2 }),  
        // Lower arms to upper arms  
        Constraint.create({ bodyA: upperArmL, pointA:{x:-limbLength/2, y:0}, bodyB: lowerArmL, pointB:{x:limbLength/2, y:0}, stiffness:0.7, length:2 }),  
        Constraint.create({ bodyA: upperArmR, pointA:{x:limbLength/2, y:0}, bodyB: lowerArmR, pointB:{x:-limbLength/2, y:0}, stiffness:0.7, length:2 }),  
        // Legs to torso  
        Constraint.create({ bodyA: upperLegL, pointA:{x:0, y:-limbLength/2}, bodyB: torso, pointB:{x:-torsoWidth/4, y:torsoLength/2}, stiffness:0.7, length:2 }),  
        Constraint.create({ bodyA: upperLegR, pointA:{x:0, y:-limbLength/2}, bodyB: torso, pointB:{x:torsoWidth/4, y:torsoLength/2}, stiffness:0.7, length:2 }),  
        // Lower legs to upper legs  
        Constraint.create({ bodyA: upperLegL, pointA:{x:0, y:limbLength/2}, bodyB: lowerLegL, pointB:{x:0, y:-limbLength/2}, stiffness:0.7, length:2 }),  
        Constraint.create({ bodyA: upperLegR, pointA:{x:0, y:limbLength/2}, bodyB: lowerLegR, pointB:{x:0, y:-limbLength/2}, stiffness:0.7, length:2 }),  
      ];

// Add all to world  
      World.add(world, [head, torso, upperArmL, lowerArmL, upperArmR, lowerArmR, upperLegL, lowerLegL, upperLegR, lowerLegR, ...joints]);  
    }

// === Add Shapes ===  
    function addShape(type, x = Math.random() * width * 0.8 + width*0.1, y = 80) {  
      if (type === 'circle') {  
        const circle = Bodies.circle(x, y, 28 + Math.random()*18, { restitution:0.7, render:{ fillStyle:'#a1e3a1' } });  
        World.add(world, circle);  
      } else if (type === 'rectangle') {  
        const rect = Bodies.rectangle(x, y, 44 + Math.random()*40, 32 + Math.random()*24, { restitution:0.4, render:{ fillStyle:'#61dafb' } });  
        World.add(world, rect);  
      }  
    }

// === Add Weapons ===  
    function addWeapon(x = Math.random() * width * 0.8 + width*0.1, y = 100) {  
      // Weapon: spiky ball on a chain for fun  
      const ball = Bodies.circle(x, y, 18, { density:0.002, restitution:0.7, render:{ fillStyle:'#da2c38', strokeStyle:'#fff', lineWidth:2 }});  
      const handle = Bodies.rectangle(x, y-38, 12, 56, { density:0.001, render:{ fillStyle:'#2d3142' } });  
      const joint = Constraint.create({ bodyA: ball, pointA:{x:0, y:0}, bodyB: handle, pointB:{x:0, y:28}, stiffness:0.8, length:28 });  
      World.add(world, [ball, handle, joint]);  
    }

// === Initial Load ===  
    loadMap(currentMap);

// Resize support  
    window.addEventListener('resize', () => {  
      render.canvas.width = window.innerWidth;  
      render.canvas.height = window.innerHeight - 56;  
    });

// Keyboard Shortcuts (optional)  
    document.addEventListener('keydown', function(e) {  
      if (e.key === 'r') addRagdoll();  
      if (e.key === 'm') nextMap();  
      if (e.key === 'c') addShape('circle');  
      if (e.key === 'w') addWeapon();  
    });

// === Accessibility note ===  
    // All controls are accessible via keyboard shortcuts:  
    // R: Add Ragdoll, M: Next Map, C: Add Circle, W: Add Weapon

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

HTML5 Physics Ragdoll Demo: Matter.js Playground

Recommended

Shooter Game HTML5 Canvas with Leaderboard

Volley Random Game HTML5 Source Code

Friday Night Funkin' Impostor Mod HTML5 Game

HTML

CSS

JS

Recommended

Shooter Game HTML5 Canvas with Leaderboard

Volley Random Game HTML5 Source Code

Friday Night Funkin' Impostor Mod HTML5 Game

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS