Webleb - UI Elements - HTML5 Physics Ragdoll Demo: Matter.js Playground

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

Validating your code, please wait...

HTML

CSS