來到了第 26 天，其實我們快把所有的模組都走過一遍了，今天是最後一天單獨介紹某個特色的，接下來 3 天筆者會安排一個實作來為我們這次的 30 天內學到的內容做一個實際範例的演示，會是一個小遊戲，也歡迎大家跟著做，會採取跟之前彈珠台一樣的方法，不會細道走過每一個方法每一行程式，但關鍵的程式碼都會帶出來跟大家講解，敬請期待。

最後一天筆者會為這 30 天做一個統整，同時列出整個 Matter.js 的功能地圖，在走過這麼多模組後，脈絡化的分析並列出模組間的關係與分類，讓大家對自己的知識做一個梳理，有不熟悉的部分也能藉此回顧來完整知識組。

講了這麼多，都不是今天的內容 XD ，今天要來帶大家看看所謂的 Plugins，中文叫插件 / 擴充模組，就是基於主模組上他人拓出的貼合主模組的額外功能，讓除了主模組作者以外，其他的 Programmer 也能夠貢獻自己的創意，就是標題所說的：星多天空亮、人多智慧廣。其實你把視角往外拉大到 Javascript 這個語言本身，這些所有的函式庫都能算是 Javascript 的 Plugins，結合了這麼多人的智慧，讓 Javascript 能夠用更多不一樣的面向來面對使用者們。

今天的Demo
今天的Demo原始碼

看標題大家可能會覺得是要講 Plugins 模組(Matter.Plugins)，筆者其實比較偏向是要講這頁 Github WikiPage 上有提到的：

• 載入與安裝 Plugins
• 目前支援的 Plugins

Plugins 模組本身除卻主要的引入方法外，其他多是一些檢測版本 / 檢測套用對象的方法，這邊我們不會細讀，對一般使用插件的情況下懂得引入其實就相當足夠。

Matter.js 本身有定義一套關於這個函式庫插件的實作標準，依據這個實作標準實作的插件會更貼合函式庫本身，我們今天會專注在介紹目前 Matter.js 頁面上列出能夠使用的插件功能。

先前介紹物體或組合體單元的時候，應該都有看到掛在屬性之一的 plugin 屬性，主要就是為了上面所說的統一規範，讓依規範寫的擴充能更易於被運用於原函式庫中，今天也會舉一個實例來看。

載入與安裝 Plugins

Matter.use('matter-attractors');
//Matter.Plugin.use(module, [plugins=module.uses])

載入程式碼就很簡單只有一行，也可以使用 Plugin 模組的方法來載入，這邊筆者沒有去詳究差異，但文件上是建議進階使用者可以去閱讀 Plugin.use 說明並使用，會提供更多的彈性。

呼叫 .use 後可以打開 console 來看支援，總共會有三種符號

• ✅ 插件完美安裝
• ? 插件有拋出一些警示，有可能影響運作
• ❌ 無法找到所指到的插件 / 插件運作上有問題

一開始我們只引入了 matter.js。

<script src="../Lib/matter.min.js"></script>

以現在還沒做任何事為例，直接這樣呼叫會拿到：

一個紅色叉❌ ！即使是插件，我們也需要匯入對應的 .js 檔才能引用，同時要注意引用順序，通常會建議把插件放在主模組之後。

這次我們以 matter-attractors 這個同一作者寫的插件為例，檔案請到這裡下載。

<script src="../Lib/matter.min.js"></script>
<script src="../Lib/matter-attractors.min.js"></script>

這次變成了?，我們參考拋出的警示，可以知道它告訴我們，這個插件 claim 支援的版本是到 0.12.0 版的 matter.js ，由於我們是使用 0.17.1 版本，所以他不保證可以運作。

這種情況就是我們要自行試驗，確認其中功能都能照我們預期的來運行。

最後我們來嘗試引入 0.12.0 版本，看看能不能出個綠勾，因為只是嘗試，我們就用個 cdn 版本的就好，筆者是透過這個網站來找到對應的版本。

<!--<script src="../Lib/matter.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script>
<script src="../Lib/matter-attractors.min.js"></script>

記得把原本的版本註解掉，以免遇到一些奇妙的相衝意外。

可以看看 console.log ，是個綠勾，帥呀！

到這裡為止就是如何引入模組跟引入模組的相關提示你需要知道的資訊與步驟了。

目前支援的Plugins

這邊表列的是這個 Github WikiPage 中有列出的插件，下面會提供插件連結與簡單的 Demo 影像讓大家知道概略，可以再評估哪個插件貼合自己的需求。

引入的方式都和上面一樣，只是需要先去對應頁面載下對應的檔案。

Plugins

• matter-attractors by liabru
  • 一個在單一物體上給予吸附力，讓他會時刻對其他物體產生吸引力的插件，也是我們這篇拿來舉例的插件，像是要製作磁力，重力用這個插件就很方便。小小提醒，使用這個插件要注意其他施加在世界中的力量，如 engine.gravity，在本次的範例中就把原生引擎中的重力歸0。
• matter-wrap by liabru
  • 讓物體永遠維持在一個給定的範圍內，如果超出了邊界，會從相反的邊界順向進入，像是左右循環，就像小時侯的橫向卷軸向右走過邊界後會回到左邊一樣。
• lark-matter by abagames
  • 用像素化(bit style)的方式來渲染 Matter.js 的內容。
• matter-collision-events by dxu
  • 更易於操縱物體碰撞事件，讓每個物體上附加各自碰撞處理的內容。
• matter-springs by momentumworks
  • 用於新增簡諧振子表現的彈簧。
• matter-dom-plugin by elopezga
  • 將 Matter.js 中的內容以 dom 方式渲染，視圖是另外生成的，與邏輯分離。

Tools

• matter-tools by liabru
  • Matter.js 作者自己寫的擴充，用於創建如他 Wiki 頁面上拿來 Demo 的框架、測試與 Debug 整個世界內容的工具。
• p5-matter by pzp1997
  • 結合 p5.js，p5.js 是個用來跟 Canvas 互動(如和滑鼠)後產生路徑，這個結合後可以透過這個插件做出如這個 Demo 一樣的效果(嘗試用滑鼠按壓並且畫出線條)，透過滑鼠路徑留下物件。
• react-game-kit by FormidableLabs
  • 以遊戲設計概念出發、結合 React 這套框架的插件。
• @types/matter-js by DefinitelyTyped
  • 套用類似 typescript 的型別概念。
• matter-lines by shundroid
  • 用於創建線條。
• crafty-matter by demipel8
  • 結合也是遊戲開發用的函式庫 Crafty.js 。
• PhysicsEditor by Andreas Löw
  • 結合 Phaser3 和 Matter.js 做的一套場景編輯器。

以上就是今天介紹的插件內容，筆者並沒有每個插件都實際用過，但有每個連結都點進去稍微看一下個插件的 Demo 與說明，幫大家列出上面這些簡短的概要，如果看到這些描述有打到你的需求，讀者可以再按進去閱讀詳情。

剩下沒介紹到的模組為 Common / Vertices / Vector，這幾個多為比較底層或過於泛用的函式，有些就算不用這個函式提供的內容，一般也能自己寫出來使用。

明天開始，就會來開始我們的實作單元。