matterjs

name	matterjs
description	当用 Matter.js 实现 2D 物理交互时使用，包括 Engine/World 搭建、Render/Runner 配置、添加刚体与约束，以及对滚动/交互友好的 canvas 场景。

Matter.js 技能

工作流程

1. 确认环境（纯 HTML、React 或仅 canvas）和渲染方式（用于调试的 Matter.Render vs 自定义渲染器）。
2. 提供一个最小的 Engine/World/Render/Runner 搭建并添加刚体。
3. 仅在需要时才添加交互（鼠标约束）或约束。
4. 给出 SPA 或拆卸场景的清理步骤。

最小搭建

<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>

常见模式

• 用 Composite.add(engine.world, [...]) 把刚体添加到世界中。
• 用 Render.create({ element, engine }) 自动创建一个 canvas，或传入你自己创建的 canvas。
• 设置 render.options.wireframes = false 以进行实心渲染。
• 用 Runner.run(runner, engine) 做简单循环，或在需要自定义计时时在自己的循环中调用 Engine.update。

鼠标交互（可选）

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

清理检查清单（SPA）

• 用 Runner.stop(runner) 停止 runner。
• 从 DOM 中移除渲染 canvas。
• 如有需要，清理 engine 和 world。

规格缺失时应问的问题

• canvas 应使用什么视口尺寸和缩放？
• 我们用 Matter.Render 还是自定义渲染器？
• 你想要鼠标/触摸拖拽交互吗？
• 模拟循环在离屏时应暂停吗？