Matter-JS 入门教程
目录
Matter-JS 简 介
Matter-JS 下 载
Matter-JS CDN 地址
Hello World
Matter-JS 概念剖析
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"。下载完成后，在页面中像如下引用即可)：
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是修改后的名字)，压缩版和未压缩版都下载下来了，这和将整个项目下载下来然后找到里面的这两个文件，其内容完全是一样的。
Matter-JS CDN 地址
1、除了下载 Matter-JS 到本地来使用，也可以直接使用网络上的 cdn 地址。
2、常用的 JS CDN 站点有 cdnjs 、bootcdn 等，如下所示，随便引入哪一个到 html 文件中都可以正常使用。
Hello World
学习一门新的东西的时候，本人经验是，细节之处日后慢慢研究深入，项目得先跑起来再说。把之前下载好的 js 文件现在引入 Html 文件中，编码如下：
Matter-JS
对于 Matter.js 的使用细节，以及官网的各种案例将在后续文章中进行深入了解。
Matter-JS 概念剖析
1）物理引擎
（1）物理引擎是一个计算机程序，使用质量、速度、加速度、摩擦力和空气阻力等物理变量，模拟了一个近似真实的物理系统，为物体赋予真实的物理效果，比如重力、旋转和碰撞等效果，让物体的行为表现的更加趋向真实。
（2）Matter.js is a 2D physics engine for the web (matter.js 是一个用于 web 的二维物理引擎)，从 2014-02-28 的 0.5.0-alpha 开始到 2018-06-11 的 0.14.2 版本。
2）Engine（引擎）与 World（世界）
（1）The Matter module is the top level namespace. It also includes a function for installing plugins on top of the library.
(Matter 模块是顶级命名空间，它还包括在库的顶部安装插件的功能。)
（2）The Matter.Engine module contains methods for creating and manipulating engines. An engine is a controller that manages updating the simulation of the world.
(引擎模块包含创建和操作引擎的方法，引擎是管理世界模拟更新的控制器，可以控制时间的缩放，可以检测所有的碰撞事件，并且拿到所有碰撞的物体对pairs）
（3）Matter.js 中任何的物体都需要一个容身处，而存放这些物体的地方，则称之为世界 World。物体必须添加到世界里，然后由引擎运行这个世界。Matter.World 模块包含了创建和操作世界的方法。一个 Matter.World 相当于一个复合物体，物体、约束的聚合体，其次世界还有额外的一些属性，比如重力、边界等。
3）Render(渲染器)
（1）Matter.Render 是将实例渲染到 Canvas 中的渲染器，控制视图层的样式，它的主要作用是用于开发和调试。默认情况下 Matter.Render 将只显示物体的线框（轮廓），这对于开发和调试很有帮助，但如果需要使用到全局实体渲染则需要将线框模式关闭 render.options.wireframes = false，另外它同样也适合制作一些简单的游戏，因为它包括了一些绘图选项、线框、向量、Sprite 精灵和视窗功能。