magnetar/fe_calckey/frontend/client/src/scripts/physics.ts

import * as Matter from "matter-js";

export function physics(container: HTMLElement) {
    const containerWidth = container.offsetWidth;
    const containerHeight = container.offsetHeight;
    const containerCenterX = containerWidth / 2;

    // サイズ固定化(要らないかも？)
    container.style.position = "relative";
    container.style.boxSizing = "border-box";
    container.style.width = `${containerWidth}px`;
    container.style.height = `${containerHeight}px`;

    // create engine
    const engine = Matter.Engine.create({
        constraintIterations: 4,
        positionIterations: 8,
        velocityIterations: 8,
    });

    const world = engine.world;

    // create renderer
    const render = Matter.Render.create({
        engine: engine,
        //element: document.getElementById('debug'),
        options: {
            width: containerWidth,
            height: containerHeight,
            background: "transparent", // transparent to hide
            wireframeBackground: "transparent", // transparent to hide
        },
    });

    // Disable to hide debug
    Matter.Render.run(render);

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

    const groundThickness = 1024;
    const ground = Matter.Bodies.rectangle(
        containerCenterX,
        containerHeight + groundThickness / 2,
        containerWidth,
        groundThickness,
        {
            isStatic: true,
            restitution: 0.1,
            friction: 2,
        }
    );

    //const wallRight = Matter.Bodies.rectangle(window.innerWidth+50, window.innerHeight/2, 100, window.innerHeight, wallopts);
    //const wallLeft = Matter.Bodies.rectangle(-50, window.innerHeight/2, 100, window.innerHeight, wallopts);

    Matter.World.add(world, [
        ground,
        //wallRight,
        //wallLeft,
    ]);

    const objEls = Array.from(container.children);
    const objs = [];
    for (const objEl of objEls) {
        const left = objEl.dataset.physicsX
            ? parseInt(objEl.dataset.physicsX)
            : objEl.offsetLeft;
        const top = objEl.dataset.physicsY
            ? parseInt(objEl.dataset.physicsY)
            : objEl.offsetTop;

        let obj;
        if (objEl.classList.contains("_physics_circle_")) {
            obj = Matter.Bodies.circle(
                left + objEl.offsetWidth / 2,
                top + objEl.offsetHeight / 2,
                Math.max(objEl.offsetWidth, objEl.offsetHeight) / 2,
                {
                    restitution: 0.5,
                }
            );
        } else {
            const style = window.getComputedStyle(objEl);
            obj = Matter.Bodies.rectangle(
                left + objEl.offsetWidth / 2,
                top + objEl.offsetHeight / 2,
                objEl.offsetWidth,
                objEl.offsetHeight,
                {
                    chamfer: {
                        radius: parseInt(style.borderRadius || "0", 10),
                    },
                    restitution: 0.5,
                }
            );
        }
        objEl.id = obj.id;
        objs.push(obj);
    }

    Matter.World.add(engine.world, objs);

    // Add mouse control

    const mouse = Matter.Mouse.create(container);
    const mouseConstraint = Matter.MouseConstraint.create(engine, {
        mouse: mouse,
        constraint: {
            stiffness: 0.1,
            render: {
                visible: false,
            },
        },
    });

    Matter.World.add(engine.world, mouseConstraint);

    // keep the mouse in sync with rendering
    render.mouse = mouse;

    for (const objEl of objEls) {
        objEl.style.position = "absolute";
        objEl.style.top = 0;
        objEl.style.left = 0;
        objEl.style.margin = 0;
    }

    window.requestAnimationFrame(update);

    let stop = false;

    function update() {
        for (const objEl of objEls) {
            const obj = objs.find(
                (obj) => obj.id.toString() === objEl.id.toString()
            );
            if (obj == null) continue;

            const x = obj.position.x - objEl.offsetWidth / 2;
            const y = obj.position.y - objEl.offsetHeight / 2;
            const angle = obj.angle;
            objEl.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad)`;
        }

        if (!stop) {
            window.requestAnimationFrame(update);
        }
    }

    // 奈落に落ちたオブジェクトは消す
    const intervalId = window.setInterval(() => {
        for (const obj of objs) {
            if (obj.position.y > containerHeight + 1024)
                Matter.World.remove(world, obj);
        }
    }, 1000 * 10);

    return {
        stop: () => {
            stop = true;
            Matter.Runner.stop(runner);
            window.clearInterval(intervalId);
        },
    };
}