1、首先下载Matter
https://github.com/liabru/matter-js/releases
2、创建一个文件夹,matter，将matter.js放进去
index.html内容如下
<html>
<head>
<script src="matter.js" type="text/javascript"></script>
</head>
<body>
</body>
<!-- 将script放到body下面是因为test.js当中用到了document.body -->
<script src="test.js" type="text/javascript"></script>
</html>test.js内容如下
//Engine是引擎，Render是渲染器，World是表演环境，Bodies可以用来创建各种形状的物体。
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
var engine = Engine.create();
//render(渲染器)将要渲染的物理引擎是之前所创建的engine，而渲染的对象是html网页的body
var render = Render.create({
element: document.body,
engine: engine
});
//参数(500,170,40,260）中，前两个是物体坐标，后两个分别是宽度和长度。
//需要注意的是，这里的坐标系统中，500和170是矩形的中心所在位置
//而html的canvas中坐标描述的是矩形的左上角。
var boxA = Bodies.rectangle(200, 200, 200, 200);
//var boxB = Bodies.rectangle(450, 50, 80, 80);
//将isStatic设为true，即是静止的
var ground = Bodies.rectangle(400, 510, 810, 60, { isStatic: true });
// add all of the bodies to the world
World.add(engine.world, [boxA,ground]);
Engine.run(engine);
Render.run(render);之后双击index.html即可查看效果<一个正方形正在下落>
6574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
