问我自己的matter.js模型

EN

class Box {
  constructor(x, y, w, h, bodyOpts) {
    // composition, not inheritance
    this.body = Matter.Bodies.rectangle(
      x, y, w, h, {
        ...bodyOpts,
        render: {fillStyle: "blue"}
      },
    );

    // ... other properties relevant to your app ...
  }

  highlight() {
    this.body.render.fillStyle = "red";
  }
  unhighlight() {
    this.body.render.fillStyle = "blue";
  }
}

const engine = Matter.Engine.create();
engine.gravity.y = 0; // enable top-down
const map = {width: 300, height: 300};
const render = Matter.Render.create({
  element: document.body,
  engine,
  options: {...map, wireframes: false},
});
const rnd = n => ~~(Math.random() * n);
const boxes = [...Array(40)].map(() => new Box(
  rnd(map.width),  // x
  rnd(map.height), // y
  rnd(10) + 15,    // w
  rnd(10) + 15,    // h
  {angle: rnd(Math.PI * 2)}
));
const walls = new Set([
  Matter.Bodies.rectangle(
    0, map.height / 2, 20, map.height, {isStatic: true}
  ),
  Matter.Bodies.rectangle(
    map.width / 2, 0, map.width, 20, {isStatic: true}
  ),
  Matter.Bodies.rectangle(
    map.width, map.height / 2, 20, map.height, {isStatic: true}
  ),
  Matter.Bodies.rectangle(
    map.width / 2, map.height, map.width, 20, {isStatic: true}
  ),
]);
const mouseConstraint = Matter.MouseConstraint.create(
  engine, {element: document.body}
);
Matter.Composite.add(engine.world, [
  ...boxes.map(e => e.body), ...walls, mouseConstraint
]);
const bodiesToBoxes = new Map(boxes.map(e => [e.body, e]));

Matter.Events.on(engine, "collisionStart", event => {
  for (const {bodyA, bodyB} of event.pairs) {
    if (bodiesToBoxes.has(bodyA)) {
      bodiesToBoxes.get(bodyA).highlight();
    }

    if (bodiesToBoxes.has(bodyB)) {
      bodiesToBoxes.get(bodyB).highlight();
    }
  }
});
Matter.Events.on(engine, "collisionEnd", event => {
  for (const {bodyA, bodyB} of event.pairs) {
    if (bodiesToBoxes.has(bodyA)) {
      bodiesToBoxes.get(bodyA).unhighlight();
    }

    if (bodiesToBoxes.has(bodyB)) {
      bodiesToBoxes.get(bodyB).unhighlight();
    }
  }
});
Matter.Render.run(render);
Matter.Runner.run(Matter.Runner.create(), engine);

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>