Day3. 从Example Code瞧瞧Matter.js的盘古开天

说好今天要来谈谈昨天的那段扣里，究竟写了些什麽。

为什麽可以像杰克一样神奇，产生出这样的画面呢？

我们今天会一段一段，用概略的方式带大家看过这段扣，最後会分析一下我们的需求。

第一段这边可以看到 Matter 後面带出各种模组，Matter 是 Matter.js 中最高层级的namespace，这段的目的是要把各个模组引入定义成变数，取成贴近功能的名字，方便後面呼叫。

var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

第二段操控我们刚刚汇入的模组做了一些基本的Setup，Engine是整个 Matter.js 世界中的主宰，控制整个世界的模拟与更新，Render负责将Engine运算的结果以Canvas显示出来，也提供一些绘制相关的方法。这样我们建立了逻辑处理与显示的相关模组。

// create an engine
var engine = Engine.create();

// create a renderer
var render = Render.create({
    element: document.body,
    engine: engine
});

第三段Rectangle这个词看起来应该有些亲切，没错，这段就是在创建方形，基本上就是带入位置、大小参数，以及以一些设置可选选项(如isStatic)等等，就是昨天范例扣看到的三个方形(地板也是一个方形)。

// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

第四段的Composite是一个组合的动作，把我们上面宣告的方形加入 engine.world ，也就是engine中的世界，Render.run会决定持续更新并渲染我们Canvas的帧数，Runner会负责持续更新engine中逻辑的相关资讯。最後用Runner.run把上面的设置整个跑起来，造就了我们昨天看到的三个方形的画面。

// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);

// run the renderer
Render.run(render);

// create runner
var runner = Runner.create();

// run the engine
Runner.run(runner, engine);

好的，分析完我们昨天的范例程序码，是不是开始稍微有点了解 Matter.js 了呢？

关於各个模组如果比较重要的，我们後面都会再提到，今天只是大概带大家一起走过一次逻辑，知道他简略的流程。

那在今天的最後，我们来看一下我们这次预计用 Matter.js 做的目标：弹珠台

Youtube影片集锦版本

好的，这是《弹射世界》(手游)的抽卡影片，会是一颗球从上面掉落，途中碰到方钉会做碰撞弹跳，碰到金光本来的白球会变金色的球，金色的球会变成彩球，任何颜色的球碰到彩球就会变成彩球。

玩家一般的希望是掉落到底部前要变成彩色的，代表抽到高稀有度的卡。

先把手游放一旁，我们来分析一下这个功能如果要实践的话会需要做哪些事情？

• 建立方钉和颜色钉
• 方钉和颜色钉会是固定的
• 建立圆球
• 圆球需要自由落体，受到重力影响
• 圆球要能和方钉碰撞产生弹跳
• 圆球和颜色钉碰撞的时候要侦测到碰撞并变色
• 镜头移动，上带到下
• 在开始前，画面要是静止的，直到我们发出Signal
• 滑鼠和球体互动 (追加功能)

在後面的日子里，我们会以这个功能清单来一一配着 Matter.js 的文件库来学习，毕竟有用就有用，有目的的学习，对学习效率可大有助益>_0
如果对於这个题目，你有什麽想法也欢迎下面回覆让我们来看看能不能为我们的30之旅加点料。