Matter.js रैगडॉल फिजिक्स गेम डेमो

347 iroger7

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

15 January 2026

आयरन स्नाउट गेम का HTML5 स्रोत कोड

25 January 2026

रफ़ल फ़्लैश गेम प्लेयर HTML टेम्पलेट

12 December 2025

टिक टैक टो गेम का HTML स्ट्रक्चर

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>

Matter.js रैगडॉल फिजिक्स गेम डेमो

अनुशंसित

आयरन स्नाउट गेम का HTML5 स्रोत कोड

रफ़ल फ़्लैश गेम प्लेयर HTML टेम्पलेट

टिक टैक टो गेम का HTML स्ट्रक्चर

HTML

CSS

JS

अनुशंसित

आयरन स्नाउट गेम का HTML5 स्रोत कोड

रफ़ल फ़्लैश गेम प्लेयर HTML टेम्पलेट

टिक टैक टो गेम का HTML स्ट्रक्चर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS