Demostración del juego de física Ragdoll de Matter.js

746 iroger7

Abrir en el editor Publica tu código

Demostración del juego de física Ragdoll de Matter.js

Recomendado

25 August 2024

Efecto de desplazamiento al navegar CSS puro

18 June 2025

Libro de brujas

26 January 2025

Un código de Redllowge

HTML

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

CSS