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"。下载完成后，在页面中像如下引用即可)：
<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是修改后的名字)，压缩版和未压缩版都下载下来了，这和将整个项目下载下来然后找到里面的这两个文件，其内容完全是一样的。
Matter-JS CDN 地址
1、除了下载 Matter-JS 到本地来使用，也可以直接使用网络上的 cdn 地址。
2、常用的 JS CDN 站点有 cdnjs 、bootcdn 等，如下所示，随便引入哪一个到 html 文件中都可以正常使用。
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.11.1/matter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.11.1/matter.min.js"></script><script src="https://cdn.bootcss.com/matter-js/0.12.0/matter.js"></script>
<script src="https://cdn.bootcss.com/matter-js/0.12.0/matter.min.js"></script><script src="https://cdn.bootcss.com/matter-js/0.11.1/matter.js"></script>
<script src="https://cdn.bootcss.com/matter-js/0.11.1/matter.min.js"></script>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网页的bodyvar 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 的使用细节，以及官网的各种案例将在后续文章中进行深入了解。
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 精灵和视窗功能。
Matter-JS 入门教程相关推荐
- Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤 创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例 比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
- js读取http chunk流_极简 Node.js入门 教程双工流
点击上方蓝字关注我们 小编提示: 本文是由 ICBU 的谦行小哥哥出品,我们会持续发出极简 Node.js入门 教程,敬请期待哦,文中有比较多的演示代码建议横屏阅读 双工流就是同时实现了 Readab ...
- Node.js 入门教程 23 使用 npm 的语义版本控制 24 卸载 npm 软件包 25 npm 全局或本地的软件包
Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录 Node.js 入门教程 23 使用 npm 的语义版本控制 24 ...
- Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
- Node.js 入门教程 6 V8 JavaScript 引擎
Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录 Node.js 入门教程 6 V8 JavaScript 引擎 6 ...
- 物理世界的互动之旅：Matter.js入门指南
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 本文简介 戴尬猴,我是德育处主任 欢迎来到<物理世界的互动之旅:Matter.js入门指南>. 本文将带您探索 Matter. ...
- egg.js入门教程视频文件（转载于cnode社区）
记得上篇博客我满怀欣喜的去搞富文本,结果撞的头破血流. 简直是惨不忍睹.后来我也说了,我的那个有比较严重的问题,后期会考虑重构.(第一版已经放弃了) 之后我说我会去看关于后端nodejs koa框架方 ...
- Two.js入门教程
项目中需要前端画svg图像,直接在html上写标签不太优雅,于是找到了Two.js这个第三方类库,使用其完成了开发任务后,分享下使用心得,就算是入门教程了. 其官方网站为https://two.js. ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南--类的定义.初始化.继承 Ember.js 入门指南--类的扩展(reopen) Ember.js 入门指南--计算属性(compute properti ...
- 前端框架React Js入门教程【转】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
最新文章
- 收藏 | 图解Transformer：Attention Is All You Need
- 简明现代魔法博客图书馆之php学习记录
- Readline-select
- 天津市职高高一计算机试题及答案,职高(中职)数学(基础模块)上册题库.doc
- win7设置计算机临时用户,Win7小技巧：用户账户自动登录方法汇总
- 金明的预算方案（洛谷-P1064）
- Linux unzip命令：解压zip文件
- CNN_TensorFlow图像分类代码
- 调用http_【学习充电】直观讲解一下 RPC 调用和 HTTP 调用的区别！
- MongoDB（三）：MongoDB概念解析
- 卡盟主站搭建_搭建卡盟主站下载|搭建卡盟主站教程 （附带源码）百度云_ - 极光下载站...
- php msvcr100.dll丢失,WAMP启动报错MSVCR100.dll丢失
- Java 飞翔的小鸟小游戏开发 完全源码 + 论文文档
- 梦雨百度网盘机器人好友群组消息自动回复软件(可用于自动发货场景)
- termux python 打开摄像头_python+opencv 电脑调用手机的摄像头
- App - 电影天堂第三方客户端
- docker内运行的grafana重置登录密码
- cmd下查询公网ip地址
- 【物体检测快速入门系列 | 01 】基于Tensorflow2.x Object Detection API构建自定义物体检测器
- Mac Terminal 美化