一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，
点击查看活动详情
。
matter.js
是一个JS的2D的物理引擎，我们可以单独使用它或者用它配合Canvas，来实现一些物理效果，或者一些高级的Canvas动画。
一、安装和使用
使用
script
标签引入使用
使用
npm install matter-js
安装使用
2.初始化
const Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
const engine = Engine.create();
engine.gravity.y = 9.8
const render = Render.create({
element: document.body,
engine: engine,
options: {
pixelRatio: 1,
background: '#fafafa',
wireframeBackground: '#222',
hasBounds: false,
wireframes: true,
showSleeping: true,
showDebug: false,
showBroadphase: false,
showBounds: false,
showVelocity: false,
showCollisions: false,
showSeparations: false,
showAxes: false,
showPositions: false,
showAngleIndicator: false,
showIds: false,
showVertexNumbers: false,
showConvexHulls: false,
showInternalEdges: false,
showMousePosition: false
var box = Bodies.rectangle(400, 200, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
Composite.add(engine.world, [box, ground]);
Render.run(render);
var runner = Runner.create();
Runner.run(runner, engine);
这里注意在创建ground时候，新增了个属性isStatic: true，这句话的意思是当前这个物体是静态的，即：只是一个刚体，拥有碰撞器，但是不会受重力影响，不会收到物理碰撞效果。
engine.timing.timeScale = 0.1 可以设置冻结时间来控制慢放或者快放
二、创建简单的物理几何刚体
1. 创建圆和矩形
const box = Bodies.rectangle(400, 200, 80, 80);
const cir = Bodies.circle(200, 200, 40);
2. 创建一个正多边形
Bodies.rectangle(x, y, n, r, option)：n为正多边形的边数，r为正多边形半径
const pl = Bodies.polygon(200, 100, 8, 80, {
chamfer: { radius: 30 }
3. 创建一个梯形
Bodies.trapezoid(x, y, w, h, slope): slope为斜率，当斜率为1时候，是三角形
const pl = Bodies.trapezoid(200, 100, 80, 100, 0.5)
const pl = Bodies.trapezoid(200, 100, 80, 100, 1)
三、创建组合物理几何刚体
Body.create({ parts: [shape1, shape2, ...] })
创建一个三角形和矩形的组合体
const t1 = Bodies.trapezoid(200, 100, 80, 100, 1)
const r = Bodies.rectangle(200, 185, 80, 100)
const cp = Body.create({
parts: [t1, r]
const ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
Composite.add(engine.world, [cp, ground]);
四、碰撞检测
Events.on(engine, 'collisionStart', function(e) {
const pairs = e.pairs;
pairs.forEach(pair => {
console.log(pair);
pairs 是一个数组，其中包含所有的碰撞对，遍历这个数组，可以拿到每一对碰撞对象的相关信息。
五、力的施加
Body.applyForce(shape, shape.position, {
x: number,
y: number
shape为被施加力的物体，x、y分别代表受力物体在x、y的受力大小。
const r = Bodies.rectangle(200, 200, 100, 50)
const ground = Bodies.rectangle(0, 300, 80000, 50, { isStatic: true })
Composite.add(engine.world, [r, ground]);
setTimeout(() => {
Body.applyForce(r, r.position, {
x: 0.2,
y: 0
}, 4000)
六、鼠标操作约束
如果你想使用鼠标进行交互，那么可以使用Matter.MouseConstraint 进行操作。
const mouseConstraint = MouseConstraint.create(engine)
Composite.add(engine.world, [r, ground, mouseConstraint]);
七、其它配置和方法
1. 可以为创建的物体设置弹性和密度
const ground = Bodies.rectangle(0, 300, 80000, 50, {
density: 1,
restitution: 0.8,
isStatic: true
2. Composites.chain() 创建锁链
const group = Body.nextGroup(true);
const ropeA = Composites.stack(
100,
function (x: number, y: number) {
return Bodies.rectangle(x, y, 50, 20, {
collisionFilter: { group: group },
Composites.chain(ropeA, 0.5, 0, -0.5, 0, {
stiffness: 0.8,
length: 2,
render: { type: "line" },
Composite.add(
ropeA,
Constraint.create({
bodyB: ropeA.bodies[0],
pointB: { x: -25, y: 0 },
pointA: { x: ropeA.bodies[0].position.x, y: ropeA.bodies[0].position.y },
stiffness: 0.5,
const mouseConstraint = MouseConstraint.create(engine)
Composite.add(engine.world, [ropeA, mouseConstraint]);
3. 摩擦力
matterjs摩擦力有三种：
普通摩擦力 friction
空气摩擦力 frictionAir
静止摩擦力 frictionStatic
const ground = Bodies.rectangle(0, 300, 80000, 50, {
friction: 1
matterJs还可以创建很多其它物理材质的物体，比如说，软球，小汽车，牛顿摆等等，大家可以去官方Demo查看更多的例子，如果你觉得本文帮助了你，请您给我个攒👍🏻。
