来到了第 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，这几个多为比较底层或过於泛用的函式，有些就算不用这个函式提供的内容，一般也能自己写出来使用。

明天开始，就会来开始我们的实作单元。