如何在Matter-js中让Mouse仅控制单个物体移动（p5.js愤怒小鸟场景）

一、核心方案：通过MouseConstraint的Filter限制可拖动物体 #

Matter.js的MouseConstraint支持通过filter属性精确控制哪些物体可以被拖动，这是最直接的解决方案，无需额外复杂逻辑。

实现步骤： #

1. 给小鸟物体添加标识：创建小鸟时，通过自定义label或原生collisionFilter给它打上唯一标记。
2. 配置MouseConstraint的过滤规则：在初始化MouseConstraint时，设置filter.predicate（自定义判断函数）或filter.mask（碰撞掩码），仅允许拖动小鸟。

示例1：使用自定义Label过滤

// 创建小鸟物体，添加自定义label
const bird = Matter.Bodies.circle(100, 300, 20, {
  label: 'bird',
  restitution: 0.8, // 弹性
  density: 0.001    // 密度
});
Matter.World.add(world, bird);

// 初始化MouseConstraint，仅允许label为bird的物体被拖动
const mouseConstraint = Matter.MouseConstraint.create(engine, {
  mouse: Matter.Mouse.create(canvas.elt),
  filter: {
    predicate: function(body) {
      // 仅匹配label为bird的物体
      return body.label === 'bird';
    }
  }
});
Matter.World.add(world, mouseConstraint);

示例2：使用碰撞掩码过滤（适合复杂场景）

如果你的游戏中有多个物体分类，推荐用Matter.js原生的碰撞掩码机制：

// 创建小鸟时设置专属碰撞分类
const bird = Matter.Bodies.circle(100, 300, 20, {
  collisionFilter: {
    category: 0x0001 // 小鸟属于第1类（十六进制掩码）
  },
  restitution: 0.8,
  density: 0.001
});
Matter.World.add(world, bird);

// MouseConstraint仅允许与第1类物体交互
const mouseConstraint = Matter.MouseConstraint.create(engine, {
  mouse: Matter.Mouse.create(canvas.elt),
  filter: {
    mask: 0x0001 // 只匹配第1类物体
  }
});
Matter.World.add(world, mouseConstraint);

二、替代方案：手动监听鼠标事件实现弹弓逻辑 #

如果MouseConstraint的过滤方案不符合你的需求（比如需要更精细的拖动控制），可以手动监听鼠标事件，完全接管小鸟的拖动与发射逻辑：

let isDragging = false;
let draggedBird = null;
let initialMousePos = null;

function setup() {
  // 初始化engine、world、canvas等基础代码...
  const canvas = createCanvas(800, 600);
  const engine = Matter.Engine.create();
  const world = engine.world;

  // 创建小鸟
  const bird = Matter.Bodies.circle(100, 300, 20, {
    restitution: 0.8,
    density: 0.001
  });
  Matter.World.add(world, bird);

  // 绑定鼠标事件
  canvas.elt.addEventListener('mousedown', onMouseDown);
  canvas.elt.addEventListener('mousemove', onMouseMove);
  canvas.elt.addEventListener('mouseup', onMouseUp);
}

function onMouseDown(e) {
  const mousePos = { x: e.offsetX, y: e.offsetY };
  // 检测鼠标是否点击到小鸟
  const hitBodies = Matter.Query.point([bird], mousePos);
  if (hitBodies.length > 0) {
    isDragging = true;
    draggedBird = hitBodies[0];
    initialMousePos = { ...mousePos };
    // 暂时设置小鸟为静态，避免物理引擎干扰拖动
    Matter.Body.setStatic(draggedBird, true);
  }
}

function onMouseMove(e) {
  if (!isDragging) return;
  const mousePos = { x: e.offsetX, y: e.offsetY };
  // 更新小鸟位置到鼠标位置
  Matter.Body.setPosition(draggedBird, mousePos);
}

function onMouseUp(e) {
  if (!isDragging) return;
  const mousePos = { x: e.offsetX, y: e.offsetY };
  // 计算拖动的方向与力度（从当前鼠标位置指向初始点击位置）
  const force = {
    x: (initialMousePos.x - mousePos.x) * 0.001,
    y: (initialMousePos.y - mousePos.y) * 0.001
  };

  // 恢复小鸟的物理状态，并施加发射力
  Matter.Body.setStatic(draggedBird, false);
  Matter.Body.applyForce(draggedBird, draggedBird.position, force);

  // 重置拖动状态
  isDragging = false;
  draggedBird = null;
}

function draw() {
  background(220);
  Matter.Engine.update(engine);
  // 绘制小鸟、弹弓等物体...
}

这种方式完全自定义拖动逻辑，适合愤怒小鸟这类需要精确控制发射力度和方向的场景，同时不会影响其他物体的物理行为。

内容的提问来源于stack exchange，提问作者MarvelKid