jsdoでmatter

概要

jsdoでmatterやってみた。
エレベーター作ってみた。

写真

サンプルコード

var Engine = Matter.Engine,
        Render = Matter.Render,
        Runner = Matter.Runner,
        Body = Matter.Body,
        Events = Matter.Events,
        MouseConstraint = Matter.MouseConstraint,
        Mouse = Matter.Mouse,
        World = Matter.World,
        Bodies = Matter.Bodies;
    var engine = Engine.create(),
        world = engine.world;
    var render = Render.create({
        element: document.body,
        engine: engine,
        options: {
            width: 450,
            height: 450,
            showAxes: true,
            showCollisions: true,
            showConvexHulls: true
        }
    });
    Render.run(render);
    var runner = Runner.create();
    Runner.run(runner, engine);
    var bodyA = Bodies.rectangle(340, 200, 100, 10, {
        isStatic: true 
    });
    var c0 = Bodies.circle(60, 50, 15);
    var c1 = Bodies.circle(100, 50, 15);
    var c2 = Bodies.circle(140, 50, 15);

    var d0 = Bodies.rectangle(220, 200, 200, 10, {
        isStatic: true, 
        angle: -Math.PI * 0.06
    });
    var d1 = Bodies.rectangle(180, 400, 300, 10, {
        isStatic: true, 
        angle: Math.PI * 0.06
    });

    World.add(world, [bodyA, c0, c1, c2, d0, d1]);
    World.add(world, [
        Bodies.rectangle(225, 10, 450, 10, {
            isStatic: true
        }),
        Bodies.rectangle(10, 225, 10, 450, { 
            isStatic: true
        }),
        Bodies.rectangle(440, 225, 10, 450, {
            isStatic: true
        }),
        Bodies.rectangle(225, 440, 450, 10, { 
            isStatic: true
        })
    ]);
    var py = 450;
    var pa = 0;        
    Events.on(engine, 'beforeUpdate', function(event) {
        py--;
        if (py < 150)
        {
            pa = 0.1;
        }
        if (py < 0)
        {
            py = 450;
            pa = 0;
        }
        Body.setPosition(bodyA, {
            x: 380,
            y: py
        });
        Body.setAngle(bodyA, -Math.PI * pa);
    });
    Render.lookAt(render, {
        min: {
            x: 0,
            y: 0 
        },
        max: { 
            x: 450,
            y: 450
        }
    });

成果物

以上。