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

写在前面

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.最终效果

matter.js学习笔记(九)--Body的parts属性创造十字形物品_第1张图片

4.代码全文


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testtitle>
    <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>

你可能感兴趣的:(matter.js,学习笔记)