Demo del gioco di fisica Ragdoll di Matter.js

341 iroger7

Apri nell'Editor Video Pubblica il Tuo Codice

Demo del gioco di fisica Ragdoll di Matter.js

Consigliato

21 November 2025

Modulo di accesso al neomorfismo Codice HTML CSS

23 August 2025

Modulo di accesso HTML con attivazione/disattivazione della password

12 December 2025

Modello HTML per il conto alla rovescia di Natale

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>

Consigliato

Modulo di accesso al neomorfismo Codice HTML CSS

Modulo di accesso HTML con attivazione/disattivazione della password

Modello HTML per il conto alla rovescia di Natale

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS