Matter.js 是一个用于创建物理引擎的 JavaScript 库。它提供了一个简单而强大的 API，使得开发者可以创建出真实世界中的物理效果，例如碰撞，重力和摩擦等。
以下是 Matter.js 入门学习笔记：
1.安装和导入 Matter.js
首先，你需要使用 npm 包管理器安装 Matter.js：
npm install matter-js
然后，在你的 JavaScript 文件中导入 Matter.js：
import * as Matter from 'matter-js';
2.创建引擎和世界
创建一个 Matter.js 引擎非常简单，只需调用 Matter.Engine.create() 方法即可。该方法返回一个包含物理引擎的对象，称为引擎。你还需要创建一个 Matter.World 对象，这个对象将会包含所有的物理体。
const engine = Matter.Engine.create();
const world = engine.world;
3.创建物体
在 Matter.js 中，物体可以是一个静态的对象（例如墙壁），也可以是一个动态的对象（例如球）。你可以使用 Matter.Bodies 来创建物体。
例如，要创建一个圆形物体，可以使用 Matter.Bodies.circle() 方法：
const circle = Matter.Bodies.circle(x, y, radius);
其中，x 和 y 分别是物体的初始坐标，radius 是物体的半径。
4.将物体添加到世界中
要将物体添加到世界中，可以使用 Matter.World.add() 方法：
Matter.World.add(world, circle);
其中，world 是世界对象，circle 是要添加的物体。
5.更新引擎和世界
在 Matter.js 中，引擎和世界都需要被更新才能够运行。你可以在游戏循环中调用 Matter.Engine.update() 方法来更新引擎和世界。
Matter.Engine.update(engine);
6.渲染物体
Matter.js 不包含默认的渲染引擎，你可以选择使用任何你喜欢的渲染引擎来渲染物体。
例如，你可以使用 Canvas 渲染引擎，使用下面的代码在画布上渲染物体：
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
function render() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let body of Matter.Composite.allBodies(world)) {ctx.beginPath();ctx.arc(body.position.x, body.position.y, body.circleRadius, 0, Math.PI * 2);ctx.fillStyle = '#ffffff';ctx.fill();ctx.closePath();}requestAnimationFrame(render);
}
requestAnimationFrame(render);
在上面的代码中，我们首先获取了一个 canvas 元素，并获取了它的 2D 上下文。然后，我们在游戏循环中遍历世界中的所有物体，并使用 ctx.arc() 方法在画布上绘制圆
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
有需要的小伙伴，可以点击下方卡片领取，无偿分享