matter.js学习笔记（九）--Body的parts属性创造十字形物品

最新推荐文章于 2024-05-29 16:13:49 发布

chenqiong1991

最新推荐文章于 2024-05-29 16:13:49 发布

阅读量3.7k

点赞数 2

分类专栏： matter.js 学习笔记

本文链接：https://blog.csdn.net/chenqiong1991/article/details/77977918

版权

学习笔记同时被 2 个专栏收录

45 篇文章 2 订阅

订阅专栏

matter.js

13 篇文章 3 订阅

订阅专栏

写在前面

matter.js QQ交流群：796728825

思路很简单，创造两个物体，然后结合。

1.创造两个物体

var boxA=Bodies.rectangle(300,300,500,100),
        boxB=Bodies.rectangle(300,300,100,500);

2.利用Body.create()创造物体

var cup=Body.create({
        parts:[boxA,boxB]
    });

Body.create() 会生成物体，如果不传入参数，会在（0,0）出生成一个物体。传入参数parts，将两个部分结合生成新的物体。

3.最终效果

十字形物品

4.代码全文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="../build/matter.js"></script>
    <script src="../demo/lib/jquery-1.11.0.min.js"></script>
    <style>
        body{
            margin:0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script>
    var Engine=Matter.Engine,
        Render=Matter.Render,
        World=Matter.World,
        Bodies=Matter.Bodies,
        Body=Matter.Body,
        MouseConstraint=Matter.MouseConstraint；


    var engine=Engine.create(),
        world=engine.world,
        render=Render.create({
            engine:engine,
            element:document.body,
            options:{
                width:$(window).width(),
                height:$(window).height(),
                wireframes:false
            }
        });

    var mouseConstraint=MouseConstraint.create(engine,{});


    Engine.run(engine);
    Render.run(render);



    var boxA=Bodies.rectangle(300,300,500,100),
        boxB=Bodies.rectangle(300,300,100,500);
    var cup=Body.create({
        parts:[boxA,boxB]
    });


    World.add(world,[cup,mouseConstraint]);
</script>
</body>
</html>