目录
Matter-JS 简 介
1、Matter.js is a 2D physics engine for the web (matter.js 是一个用于 web 的二维物理引擎)
Matter.js 官网地址：http://brm.io/matter-js/index.html
GitHub 开源地址：https://github.com/liabru/matter-js
官方demo演示地址：http://brm.io/matter-js/demo/#mixed ——点击页面顶部中间下拉框可以切换演示示例——
官方deom源码地址：https://github.com/liabru/matter-js/tree/master/examples
codepen 在线编辑演示地址：https://codepen.io/collection/Fuagy/#
官方 API 文档地址：http://brm.io/matter-js/docs/
2、目前最新版 Matter.js 是 2018-06-11 更新的 0.14.2 版本。查看历史版本更新日志。
3、Matter.js 支持特性如下：
| 刚体(Rigid bodies) | 复合体(Compound bodies) | 复合材料（Composite bodies） |
| 凹面和凸面(Concave and convex hulls) | 物理特性（质量、面积、密度等） | 恢复原状（弹性和非弹性碰撞） |
| 碰撞（粗略阶段、中间阶段、精细阶段） | 稳定的堆叠和静止 | 动量守恒( Conservation of momentum) |
| 摩擦力和阻力（Friction and resistance） | 事件监听(Events) | 约束(Constraints) |
| 重力(Gravity) | 睡眠和静态物体 | 圆角（倒角）Rounded corners (chamfering) |
| 视图（平移、缩放） Views (translate, zoom) | 碰撞查询（射线追踪、区域测试） | 时间缩放（减速、加速） |
| Canvas 渲染器（支持向量和纹理） | MatterTools 工具（创建、测试和调试） | 世界状态序列化，需要 resurrect.js |
| 跨浏览器（Chrome、Firefox、Safari、IE8+）和 Node.js 支持 | 兼容移动端（触摸、响应） | 原生 JS 实现 |
Matter-JS 下 载
1、Download the edge build (master) or get a stable release and include the script in your web page(需要下载最新版的，点击"edge build (master)"；需要下载稳定版的，点击"stable release"。下载完成后，在页面中像如下引用即可)：
<script src="matter.js" type="text/javascript"></script>
2、You can also install using the package managers Bower and NPM(或者使用包管理器Bower和NPM进行安装)：
bower install matter-js
npm install matter-js
3、下载的方式多种多样，但归根到底就是获取 matter-js/build/matter.js 与 matter-js/build/matter.min.js 文件，前者是未压缩版，后者是压缩版，建议学校阶段使用前者，部署阶段使用后者。可以将整个项目下载下来，然后在 build 目录下可以找到它们，也可以像如下所示，直接将此文件保存下来。
4、打开 matter-js/build/matter.js 与 matter-js/build/matter.min.js 文件 后，点击右上角"Raw"按钮，然后 Ctrl + S 保存下来即可。如下所示为下载保存好的 matterJS 库(其中的_0.14.2是修改后的名字)，压缩版和未压缩版都下载下来了，这和将整个项目下载下来然后找到里面的这两个文件，其内容完全是一样的。
Hello World
学习一门新的东西的时候，本人经验是，细节之处日后慢慢研究深入，项目得先跑起来再说。把之前下载好的 js 文件现在引入 Html 文件中，编码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Matter-JS</title>
<script src="../js/matter_0.14.2.js"></script>
</head>
<body>
<script type="text/javascript">
var Engine = Matter.Engine;//引擎.引擎模块包含创建和操作引擎的方法
var Render = Matter.Render;//基于HTML5画布的渲染器
var World = Matter.World;//演出舞台. Matter.js 中任何的物体都需要一个舞台/容器，而存放这些物体的地方，则称之为World(世界)
var Bodies = Matter.Bodies;//用于创建各种形状的物体，物体必须添加到Wolrd中，然后由引擎运行世界
var engine = Engine.create();
//render(渲染器)将要渲染的物理引擎是上面的engine，而渲染的对象是html网页的body
var render = Render.create({element: document.body, engine: engine});
/**
* Bodies.rectangle = function(x, y, width, height, options)
* x,y 分别表示矩形中心点的坐标，坐标的原点(0,0)在 Canvas(画布)的左上角
* width,height 分别表示矩形的宽和高
* options：描述矩形的参数，是一个 json 对象
* @type {body}
*/
var boxA = Bodies.rectangle(200, 0, 80, 80);
var boxB = Bodies.rectangle(450, 100, 80, 80);
//将isStatic设为true，表示物体静止
var ground = Bodies.rectangle(400, 510, 810, 60, {isStatic: true});
World.add(engine.world, [boxA, boxB, ground]);// 将所有物体添加到世界中
Engine.run(engine);//运行引擎
Render.run(render);//运行渲染器
</script>
</body>
</html>对于 Matter.js 的使用细节，以及官网的各种案例将在后续文章中进行深入了解。