I have some code like the following for the matter.js library:

// 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
World.add(engine.world, [boxA, boxB, ground]);
Events.on(engine, 'tick', function(event) {
  if (mouseConstraint.mouse.button == 0){
    alert("what is clicked?");
  }
});

Is there a way I can tell if boxA or boxB has been clicked with the mouse in the event handler?

I have some code like the following for the matter.js library:

// 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
World.add(engine.world, [boxA, boxB, ground]);
Events.on(engine, 'tick', function(event) {
  if (mouseConstraint.mouse.button == 0){
    alert("what is clicked?");
  }
});

Is there a way I can tell if boxA or boxB has been clicked with the mouse in the event handler?

• javascript
• mouse
• matter.js

• 1 Take a look at how it's done in Matter.MouseConstraint.update – liabru Commented Jun 6, 2015 at 12:06
• @liabru how would it be done in the OP's case? – Jesse Hattabaugh Commented Mar 7, 2017 at 4:53

2 Answers 2

To elaborate on this answer, here's a runnable example of using mouseConstraint.body in your event handler to determine which body is being clicked:

const engine = Matter.Engine.create();
const runner = Matter.Runner.create();
const render = Matter.Render.create({
  element: document.body,
  engine: engine,
});
const bodies = [
  Matter.Bodies.rectangle(
    400, 310, 810, 60, {isStatic: true, angle: 0.0}
  ),
  ...[...Array(100)].map(() =>
    Matter.Bodies.rectangle(
      Math.random() * 400,     // x
      Math.random() * 100,     // y
      Math.random() * 50 + 10, // w
      Math.random() * 50 + 10, // h
      {angle: Math.random() * (Math.PI * 2)},
    )
  ),
];
const mouseConstraint = Matter.MouseConstraint.create(
  engine, {element: document.body}
);
Matter.Events.on(runner, "tick", event => {
  if (mouseConstraint.body) {
    Matter.Composite.remove(engine.world, mouseConstraint.body);
  }
});
// also possible, testing the condition on mousedown only:
//Matter.Events.on(mouseConstraint, "mousedown", () => {
//  if (mouseConstraint.body) {
//    Matter.Composite.remove(engine.world, mouseConstraint.body);
//  }
//});
Matter.Composite.add(engine.world, [...bodies, mouseConstraint]);
Matter.Runner.run(runner, engine);
Matter.Render.run(render);

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

You can also use Matter.Query.point and pass in the mouse X and Y position on click to obtain an array of bodies at that point.

mouseConstraint.body contains the body that was clicked.