写在前面
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>