說好今天要來談談昨天的那段扣裡，究竟寫了些什麼。

為什麼可以像傑克一樣神奇，產生出這樣的畫面呢？

我們今天會一段一段，用概略的方式帶大家看過這段扣，最後會分析一下我們的需求。

第一段這邊可以看到 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之旅加點料。