简介
@weh/matter 是一个基于 Matter.js 引擎封装的轻量级物理引擎库，可以帮助开发者快速创建基于物理引擎的交互式前端效果，例如碰撞检测、弹性动画等。
本文将为大家介绍 @weh/matter 的详细使用教程，包括安装、基础用法、API介绍以及示例代码。
安装
@weh/matter 是一个 NPM 包，因此我们首先需要在项目中安装它。打开终端并切换到你的项目目录，执行以下命令：
npm install @weh/matter
或者使用 yarn：
yarn add @weh/matter
这样就成功安装了 @weh/matter。
基础用法
准备工作
在开始使用 @weh/matter 之前，我们需要先设置一个画布和引擎实例。在 HTML 中添加一个 Canvas 元素：
<canvas id="canvas"></canvas>
在 JavaScript 中添加以下代码：
-- -------------------- ---- -------
------ ------ ---- --------------
----- ------ - ----------------------------------
----- ------ - -----------------------
----------------------
-------- -------
------- ------
---这样就完成了基础的设置。
创建物体
接下来，我们可以开始创建物体了。 新建一个圆形物体：
const circle = Matter.Bodies.circle(400, 200, 20);
这个圆形物体的圆心坐标为 (400, 200)，半径为 20。
还可以创建方形物体：
const rectangle = Matter.Bodies.rectangle(200, 100, 80, 80);
这个方形物体的中心坐标为 (200, 100)，宽度和高度都为 80。
应用物理效果
现在，我们可以给物体应用一些物理效果了。例如，为圆形物体应用重力：
-- -------------------- ---- -------
----------------------- ----------
------------------------------ -
-------
---------------------------- ---- ---- --- -
--------- -----
------- -
---------- -------
------------ -------
---------- -
-
--
---
--------------------------在上面的代码中，我们使用 Matter.World.add 将圆形物体添加到世界中，并使用 Matter.Engine.run 开始运行引擎。
碰撞检测
@weh/matter 支持基于 Matter.js 的碰撞检测。例如，查看两个物体是否有碰撞：
Matter.Events.on(engine, 'collisionStart', function(event) {
const pairs = event.pairs;
});当两个物体发生碰撞时，将会触发 collisionStart 事件，并传递一个包含碰撞物体的数组。
其它效果
@weh/matter 还支持一些其它类型的效果，例如弹性等。可以参考官方文档进行进一步学习和应用。
API 介绍
下面是一些常用的 API：
Matter.Engine- 引擎对象。Matter.World- 世界对象。Matter.Body- 物体对象。Matter.Bodies- 物体工厂。Matter.Composite- 复合物体对象。Matter.Constraint- 约束对象。
更多详细的 API 介绍，请参考 Matter.js 的官方文档。
示例代码
-- -------------------- ---- -------
------ ------ ---- --------------
----- ------ - ----------------------------------
----- ------ - -----------------------
----- ------- - ------------------------- ---- ----
----- ------- - ------------------------- ---- ----
----- ------ - ---------------------------- ---- ---- --- -
--------- -----
------- -
---------- -------
------------ -------
---------- -
-
---
------------------------------ -
--------
--------
------
---
------------------------ ----------------- --------------- -
----- ----- - ------------
---
----------------------
-------- -------
------- ------
---
--------------------------结语
本文向大家介绍了如何使用 @weh/matter 并创建一些基本的交互式前端效果。@weh/matter 是一个非常强大的物理引擎库，可以极大地简化物理效果的实现。当然，对于初学者来说，物理引擎的实现还是有不少学习曲线，需要认真学习官方文档，逐步掌握它的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005622a81e8991b448df7fd