matterjs

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Matter.js Skill

Matter.js 技能

Workflow

工作流程

Confirm environment (plain HTML, React, or canvas-only) and rendering approach (Matter.Render for debug vs custom renderer).
Provide a minimal Engine/World/Render/Runner setup and add bodies.
Add interactions (mouse constraint) or constraints only if requested.
Share cleanup steps for SPA or teardown scenarios.

确认运行环境（纯HTML、React或仅画布）以及渲染方式（使用Matter.Render进行调试或自定义渲染器）。
提供最小化的Engine/World/Render/Runner配置并添加物体。
仅在需求明确时添加交互（鼠标约束）或其他约束。
分享SPA场景下的清理步骤或销毁流程。

Minimal setup

最小化配置

html

<script>
  const { Engine, Render, Runner, Bodies, Composite } = Matter;

  const engine = Engine.create();

  const render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      width: 800,
      height: 600,
      wireframes: false
    }
  });

  const runner = Runner.create();
  Runner.run(runner, engine);
  Render.run(render);

  const ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
  const box = Bodies.rectangle(400, 200, 80, 80);

  Composite.add(engine.world, [ground, box]);
</script>

html

<script>
  const { Engine, Render, Runner, Bodies, Composite } = Matter;

  const engine = Engine.create();

  const render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      width: 800,
      height: 600,
      wireframes: false
    }
  });

  const runner = Runner.create();
  Runner.run(runner, engine);
  Render.run(render);

  const ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
  const box = Bodies.rectangle(400, 200, 80, 80);

  Composite.add(engine.world, [ground, box]);
</script>

Common patterns

常见模式

Use
```
Composite.add(engine.world, [...])
```
to add bodies to the world.
Use
```
Render.create({ element, engine })
```
to create a canvas automatically, or pass a
```
canvas
```
you create yourself.
Set
```
render.options.wireframes = false
```
for solid rendering.
Use
```
Runner.run(runner, engine)
```
for a simple loop, or call
```
Engine.update
```
in your own loop if you need custom timing.

使用
```
Composite.add(engine.world, [...])
```
向物理世界添加物体。
使用
```
Render.create({ element, engine })
```
自动创建画布，或传入你自行创建的
```
canvas
```
元素。
设置
```
render.options.wireframes = false
```
以启用实体渲染。
使用
```
Runner.run(runner, engine)
```
实现简单循环，若需要自定义时序控制，可在自己的循环中调用
```
Engine.update
```
。

Mouse interaction (optional)

鼠标交互（可选）

const { Mouse, MouseConstraint } = Matter;
const mouse = Mouse.create(render.canvas);
const mouseConstraint = MouseConstraint.create(engine, { mouse });
Composite.add(engine.world, mouseConstraint);
render.mouse = mouse;

const { Mouse, MouseConstraint } = Matter;
const mouse = Mouse.create(render.canvas);
const mouseConstraint = MouseConstraint.create(engine, { mouse });
Composite.add(engine.world, mouseConstraint);
render.mouse = mouse;

Cleanup checklist (SPA)

SPA场景清理清单

Stop the runner with
```
Runner.stop(runner)
```
.
Remove the render canvas from the DOM.
Clear engine and world if needed.

调用
```
Runner.stop(runner)
```
停止运行器。
从DOM中移除渲染画布。
必要时清理engine和world实例。

Questions to ask when specs are missing

当需求不明确时需询问的问题

What viewport size and scaling should the canvas use?
Are we using Matter.Render or a custom renderer?
Do you want mouse/touch drag interaction?
Should the simulation loop be paused when offscreen?

画布应使用何种视口尺寸和缩放比例？
我们将使用Matter.Render还是自定义渲染器？
是否需要鼠标/触摸拖拽交互？
当场景处于屏幕外时，是否需要暂停模拟循环？