如何在 Matter.js 中添加世界中的对象 - Javascript

Matter.js 是一个流行的 JavaScript 物理引擎，它可以帮助我们轻松地创建出真实物理环境下的交互动画。

在 Matter.js 中，我们可以通过添加对象来创建世界中的物体。这些对象可以是圆形、矩形、图像等等，与其他对象交互时会产生真实的物理效应。

下面我们将介绍如何在 Matter.js 中添加世界中的对象。

安装 Matter.js

首先，要使用 Matter.js，我们需要将其包含在我们的项目中。可以将 Matter.js 下载到本地，或者使用 NPM 进行安装。

// 使用 NPM 安装 Matter.js
npm install matter-js --save

创建世界和对象

在 Matter.js 中，我们使用 Engine.create() 函数来创建一个物理引擎，然后使用 World.create() 函数创建一个世界。接下来，我们就可以向这个世界中添加对象了。

// 导入 Matter.js
import Matter from 'matter-js';

// 创建引擎
const engine = Matter.Engine.create();

// 创建渲染器
const render = Matter.Render.create({
    element: document.body,
    engine: engine
});

// 创建世界
const world = Matter.World.create();

// 添加对象到世界中
const box = Matter.Bodies.rectangle(400, 200, 80, 80);
Matter.World.add(world, box);

// 运行引擎和渲染器
Matter.Engine.run(engine);
Matter.Render.run(render);

上面的代码将创建一个世界，并向其中添加了一个矩形对象。Matter.Bodies.rectangle() 函数用于创建一个矩形对象，并返回该对象的引用。然后，我们将该对象添加到世界中。

操作对象

在 Matter.js 中，我们可以通过监听鼠标事件或键盘事件来控制对象的位置、旋转、速度等属性。

例如，下面的代码将监听鼠标拖动事件，以控制矩形对象的位置。

// 监听鼠标拖动事件
Matter.Events.on(render, 'mousemove', (event) => {
    // 将矩形对象移动到鼠标所在位置
    Matter.Body.setPosition(box, {
        x: event.mouse.position.x,
        y: event.mouse.position.y
    });
});

上面的代码将监听渲染器中的 mousemove 事件。该事件返回一个 event 对象，其中包含鼠标的位置信息。我们可以使用 Matter.Body.setPosition() 函数将矩形对象移动到鼠标所在位置。

结语

这就是在 Matter.js 中添加世界中的对象的简单介绍。我们可以使用各种功能丰富的函数来创建、操作对象，从而创建出真实物理环境下的交互动画。