matterjs给刚体赋予纹理方法

matterjs给刚体赋予纹理方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>
        Document
    </title>
    <style type="text/css">
    .gangtiwenli {
        width: 30px;
        height: 30px;
        background: #F00;

        position: absolute;
        left: 20%;
        top: 30%;
        z-index: 22;
    }
    </style>
</head>

<body>
    <div class="gangtiwenli"></div>
    <script src="/fudiqixi/js/jquery.min.js"></script>
    <script src="/fudiqixi/js/matter.js"></script>
    <script type="text/javascript">
    $(function() {
        var Engine = Matter.Engine,
            Render = Matter.Render,
            World = Matter.World,
            Bodies = Matter.Bodies;

        var engine = Engine.create(),
            world = engine.world;

        var render = Render.create({
            engine: engine,
            element: document.body
        });

        Engine.run(engine);
        Render.run(render);
        var boxA = Bodies.rectangle(500, 170, 40, 260);
        var ground = Bodies.rectangle(400, 600, 600, 100, { isStatic: true });
        World.add(world, [boxA, ground])


        /*这里加个定时器 让html元素跟随刚体坐标移动*/
        setInterval(function() {
            console.log(boxA.position.x);
            console.log(boxA.position.y);
            $('.gangtiwenli').css('left', boxA.position.x);
            $('.gangtiwenli').css('top', boxA.position.y);

        }, 60)

    });
    </script>
</body>

</html>

ps:在物理引擎中 不能给增加设置坐标