The Matter.Engine module contains methods for creating and manipulating engines. An engine is a controller that manages updating the simulation of the world. See Matter.Runner for an optional game loop utility.
The Matter.Render module is a simple canvas based renderer for visualising instances of Matter.Engine. It is intended for development and debugging purposes, but may also be suitable for simple games. It includes a number of drawing options including wireframe, vector with support for sprites and viewports.
The Matter.Runner module is an optional utility which provides a game loop, that handles continuously updating a Matter.Engine for you within a browser. It is intended for development and debugging purposes, but may also be suitable for simple games. If you are using your own game loop instead, then you do not need the Matter.Runner module. Instead just call Engine.update(engine, delta) in your own loop.
The Matter.Body module contains methods for creating and manipulating rigid bodies. For creating bodies with common configurations such as rectangles, circles and other polygons see the module Matter.Bodies.
A composite is a collection of Matter.Body, Matter.Constraint and other Matter.Composite objects.
They are a container that can represent complex objects made of multiple parts, even if they are not physically connected. A composite could contain anything from a single body all the way up to a whole world.
When making any changes to composites, use the included functions rather than changing their properties directly.
p.s. 由於我是用p5js的線上編輯器，所以我是直接複製matterjs的min檔
<html>
<head>
<script src="matter.js"></script>
</head>
...
</html>
也可以使用npm 匯入
npm install matter-js
var Engine = Matter.Engine,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
// create an engine
var engine = Engine.create();
// create a renderer
//由於渲染的部分交給p5js所以這部分直接註解掉
/*
var Render = Matter.Render;
var render = Render.create({
element: document.body,
engine: engine
});
*/
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);
這個步驟最主要是建立p5js的選染 並利用matterjs的資料更新p5js
const width=400, height=400
const mouseCollideRadius = 30;
// module aliases
var Engine = Matter.Engine,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
// create an engine
var engine,boxA,boxB,ground;
function setup() {
createCanvas(400, 400);
engine = Engine.create();
boxA = Bodies.rectangle(width/2, height/2, 80, 80);
boxB = Bodies.rectangle(width/3, 50, 80, 80);
ground = Bodies.rectangle(width, height, 810, 60, { isStatic: true });
Composite.add(engine.world, [boxA, boxB, ground]);
var runner = Runner.create();
Runner.run(runner, engine);
}
function draw() {
background(220);
circle(mouseX, mouseY, mouseCollideRadius);
rect(boxA.position.x, boxA.position.y, 80,80 );
rect(boxB.position.x, boxA.position.y, 80,80 );
}