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

Abrir en el editor Video Publica tu código

Recomendado

5 June 2025

Estructura HTML de la barra de progreso animada CSS

22 May 2025

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

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

Recomendado

Un código de sofiane.blida09

Estructura HTML de la barra de progreso animada CSS

Aplicación de voz

HTML

CSS

JS

Recomendado

Un código de sofiane.blida09

Estructura HTML de la barra de progreso animada CSS

Aplicación de voz

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS