Ejemplo de juego de física Ragdoll de Matter.js

437 iroger7

Abrir en el editor Video Publica tu código

Ejemplo de juego de física Ragdoll de Matter.js

Recomendado

30 August 2024

Juego de la serpiente: renderizador CSS

16 December 2025

Solicitud de proxy web: HTML, CSS, JavaScript

9 September 2025

Contenedor de animación de píxeles CSS

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Ragdoll Physics Game</title>  
      
    <script src="https://cdn.jsdelivr.net/npm/matter-js@0.19.0/build/matter.min.js"></script>  
    <style>  
        html, body {  
            margin: 0;  
            padding: 0;  
            background: #232323;  
            color: #fff;  
            font-family: Arial, sans-serif;  
            overflow: hidden;  
        }  
        #gameCanvas {  
            display: block;  
            background: #141619;  
        }  
        #spawnBtn {  
            position: absolute;  
            top: 16px;  
            right: 24px;  
            z-index: 10;  
            padding: 12px 18px;  
            background: #0a85ff;  
            color: #fff;  
            border: none;  
            border-radius: 8px;  
            font-size: 1rem;  
            cursor: pointer;  
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);  
        }  
        #spawnBtn:active {  
            background: #0765bc;  
        }  
    </style>  
</head>  
<body>  
      
    <button id="spawnBtn" aria-label="Spawn Ragdoll and Objects">Spawn</button>  
      
    <canvas id="gameCanvas" width="1100" height="700"></canvas>

// Create engine and world  
    const engine = Engine.create();  
    const world = engine.world;

// Setup canvas  
    const canvas = document.getElementById('gameCanvas');  
    const width = canvas.width;  
    const height = canvas.height;

// Create renderer  
    const render = Render.create({  
        canvas: canvas,  
        engine: engine,  
        options: {  
            width: width,  
            height: height,  
            wireframes: false,  
            background: '#222',  
            pixelRatio: window.devicePixelRatio  
        }  
    });

Render.run(render);

// Create runner  
    const runner = Runner.create();  
    Runner.run(runner, engine);

// --- World Boundaries (walls, ceiling, floor) ---  
    const wallThickness = 40;

// Floor  
    const floor = Bodies.rectangle(width/2, height + wallThickness/2, width, wallThickness, { isStatic: true, render: { fillStyle: '#333' } });  
    // Ceiling  
    const ceiling = Bodies.rectangle(width/2, -wallThickness/2, width, wallThickness, { isStatic: true, render: { fillStyle: '#333' } });  
    // Left wall  
    const leftWall = Bodies.rectangle(-wallThickness/2, height/2, wallThickness, height, { isStatic: true, render: { fillStyle: '#333' } });  
    // Right wall  
    const rightWall = Bodies.rectangle(width + wallThickness/2, height/2, wallThickness, height, { isStatic: true, render: { fillStyle: '#333' } });

World.add(world, [floor, ceiling, leftWall, rightWall]);

// --- Ragdoll Creation Function ---  
    function createRagdoll(x, y) {  
        // Sizes  
        const headRadius = 24;  
        const chestW = 28, chestH = 48;  
        const upperArmW = 14, upperArmH = 32;  
        const lowerArmW = 12, lowerArmH = 32;  
        const upperLegW = 16, upperLegH = 38;  
        const lowerLegW = 14, lowerLegH = 34;

// Parts  
        const head = Bodies.circle(x, y - chestH - headRadius, headRadius, { density: 0.001, restitution: 0.4, friction: 0.2, label: 'head', render: { fillStyle: "#e5c07b" } });  
        const chest = Bodies.rectangle(x, y, chestW, chestH, { density: 0.002, restitution: 0.3, friction: 0.2, label: 'chest', render: { fillStyle: "#c678dd" } });

// Arms  
        const upperArmL = Bodies.rectangle(x - chestW/2 - upperArmW/2, y - chestH/4, upperArmW, upperArmH, { density: 0.001, label: "upperArmL", render: { fillStyle: "#61afef" } });  
        const lowerArmL = Bodies.rectangle(x - chestW/2 - upperArmW/2, y + upperArmH/2, lowerArmW, lowerArmH, { density: 0.0009, label: "lowerArmL", render: { fillStyle: "#61afef" } });

const upperArmR = Bodies.rectangle(x + chestW/2 + upperArmW/2, y - chestH/4, upperArmW, upperArmH, { density: 0.001, label: "upperArmR", render: { fillStyle: "#61afef" } });  
        const lowerArmR = Bodies.rectangle(x + chestW/2 + upperArmW/2, y + upperArmH/2, lowerArmW, lowerArmH, { density: 0.0009, label: "lowerArmR", render: { fillStyle: "#61afef" } });

// Legs  
        const upperLegL = Bodies.rectangle(x - chestW/4, y + chestH/2 + upperLegH/2, upperLegW, upperLegH, { density: 0.001, label: "upperLegL", render: { fillStyle: "#98c379" } });  
        const lowerLegL = Bodies.rectangle(x - chestW/4, y + chestH/2 + upperLegH + lowerLegH/2, lowerLegW, lowerLegH, { density: 0.0009, label: "lowerLegL", render: { fillStyle: "#98c379" } });

const upperLegR = Bodies.rectangle(x + chestW/4, y + chestH/2 + upperLegH/2, upperLegW, upperLegH, { density: 0.001, label: "upperLegR", render: { fillStyle: "#98c379" } });  
        const lowerLegR = Bodies.rectangle(x + chestW/4, y + chestH/2 + upperLegH + lowerLegH/2, lowerLegW, lowerLegH, { density: 0.0009, label: "lowerLegR", render: { fillStyle: "#98c379" } });

// Constraints (joints) with breakable limits  
        function breakableConstraint(bodyA, bodyB, options) {  
            // Add a custom property for break force  
            return Constraint.create(Object.assign({}, options, {  
                bodyA, bodyB,  
                render: { visible: false },  
                label: "breakable"  
            }));  
        }

// Joints  
        const constraints = [  
            // Head to chest  
            breakableConstraint(head, chest, { pointA: { x: 0, y: headRadius }, pointB: { x: 0, y: -chestH/2 }, stiffness: 0.7, length: 2 }),  
            // Left shoulder  
            breakableConstraint(upperArmL, chest, { pointA: { x: 0, y: -upperArmH/2 }, pointB: { x: -chestW/2, y: -chestH/4 }, stiffness: 0.6, length: 2 }),  
            // Left elbow  
            breakableConstraint(upperArmL, lowerArmL, { pointA: { x: 0, y: upperArmH/2 }, pointB: { x: 0, y: -lowerArmH/2 }, stiffness: 0.6, length: 2 }),  
            // Right shoulder  
            breakableConstraint(upperArmR, chest, { pointA: { x: 0, y: -upperArmH/2 }, pointB: { x: chestW/2, y: -chestH/4 }, stiffness: 0.6, length: 2 }),  
            // Right elbow  
            breakableConstraint(upperArmR, lowerArmR, { pointA: { x: 0, y: upperArmH/2 }, pointB: { x: 0, y: -lowerArmH/2 }, stiffness: 0.6, length: 2 }),  
            // Chest to upper legs  
            breakableConstraint(chest, upperLegL, { pointA: { x: -chestW/4, y: chestH/2 }, pointB: { x: 0, y: -upperLegH/2 }, stiffness: 0.6, length: 2 }),  
            breakableConstraint(chest, upperLegR, { pointA: { x: chestW/4, y: chestH/2 }, pointB: { x: 0, y: -upperLegH/2 }, stiffness: 0.6, length: 2 }),  
            // Knees  
            breakableConstraint(upperLegL, lowerLegL, { pointA: { x: 0, y: upperLegH/2 }, pointB: { x: 0, y: -lowerLegH/2 }, stiffness: 0.6, length: 2 }),  
            breakableConstraint(upperLegR, lowerLegR, { pointA: { x: 0, y: upperLegH/2 }, pointB: { x: 0, y: -lowerLegH/2 }, stiffness: 0.6, length: 2 }),  
        ];

// Make a composite ragdoll  
        const ragdoll = Composite.create({ label: 'ragdoll' });  
        Composite.add(ragdoll, [head, chest, upperArmL, lowerArmL, upperArmR, lowerArmR, upperLegL, lowerLegL, upperLegR, lowerLegR]);  
        Composite.add(ragdoll, constraints);

World.add(world, ragdoll);

return { composite: ragdoll, constraints: constraints };  
    }

// --- Helper: Spawn random object shapes ---  
    function spawnRandomShape(x, y) {  
        const shapes = [  
            () => Bodies.rectangle(x, y, 40, 40, { restitution: 0.5, render: { fillStyle: "#e06c75" } }),  
            () => Bodies.circle(x, y, 18, { restitution: 0.9, render: { fillStyle: "#d19a66" } }),  
            () => Bodies.polygon(x, y, 3 + Math.floor(Math.random() * 4), 28, { restitution: 0.7, render: { fillStyle: "#56b6c2" } })  
        ];  
        const body = shapes[Math.floor(Math.random() * shapes.length)]();  
        World.add(world, body);  
    }

// --- Break constraints if force exceeds threshold ---  
    Events.on(engine, 'afterUpdate', function () {  
        // Iterate over all composites  
        world.composites.forEach(composite => {  
            if (composite.label === 'ragdoll') {  
                // Check each constraint for excessive force  
                composite.constraints.forEach(constraint => {  
                    if (constraint.label === "breakable" && constraint.bodyA && constraint.bodyB) {  
                        // Calculate force on constraint  
                        const posA = Matter.Constraint.pointAWorld(constraint);  
                        const posB = Matter.Constraint.pointBWorld(constraint);  
                        const dist = Vector.magnitude(Vector.sub(posA, posB));  
                        const breakLength = (constraint.length || 0) + 35; // 35px slack  
                        if (dist > breakLength) {  
                            // Remove constraint from world and composite  
                            Composite.remove(composite, constraint);  
                            World.remove(world, constraint);  
                        }  
                    }  
                });  
            }  
        });  
    });

// --- Mouse drag support ---  
    const mouse = Mouse.create(render.canvas);  
    const mouseConstraint = MouseConstraint.create(engine, {  
        mouse: mouse,  
        constraint: {  
            stiffness: 0.2,  
            render: { visible: false }  
        }  
    });  
    World.add(world, mouseConstraint);

// --- Spawn button functionality ---  
    const spawnBtn = document.getElementById('spawnBtn');  
    spawnBtn.onclick = () => {  
        // Spawn ragdoll near the top middle  
        createRagdoll(width/2 + (Math.random() - 0.5) * 200, 100 + Math.random() * 30);  
        // Spawn random shapes  
        for (let i = 0; i < 2; ++i) {  
            spawnRandomShape(180 + Math.random() * (width-360), 60 + Math.random() * 80);  
        }  
    };

// Spawn the initial ragdoll and some objects  
    createRagdoll(width/2, 130);  
    for (let i = 0; i < 3; ++i) {  
        spawnRandomShape(220 + i*130, 100);  
    }

// --- Responsive resize (optional, can be disabled if fixed size is preferred) ---  
    // window.addEventListener('resize', () => {  
    //     render.canvas.width = window.innerWidth;  
    //     render.canvas.height = window.innerHeight;  
    //     Render.lookAt(render, { min: { x: 0, y: 0 }, max: { x: render.canvas.width, y: render.canvas.height } });  
    // });

</script>  
      
</body>  
</html>

Recomendado

Juego de la serpiente: renderizador CSS

Solicitud de proxy web: HTML, CSS, JavaScript

Contenedor de animación de píxeles CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS