如何在p5play中检测精灵（Sprite）的鼠标点击事件？

p5play提供了几种简洁的方式来检测精灵的鼠标点击，以下是最常用的实现方案：

1. 使用精灵内置的clicked()回调方法 #

这是p5play官方推荐的方式，直接给目标精灵绑定clicked函数，当精灵被点击时自动触发逻辑：

let player;

function setup() {
  createCanvas(400, 400);
  player = new Sprite(200, 200, 50, 50);
  
  // 绑定点击事件回调
  player.clicked = function() {
    console.log("玩家精灵被点击");
    this.color = 'red'; // 点击后修改精灵颜色
  };
}

function draw() {
  background(220);
}

2. 在draw()循环中结合mouse.pressed()与contains()方法 #

如果需要更灵活的触发条件（比如仅在特定状态下检测点击），可以在帧循环里手动判断：

let player;

function setup() {
  createCanvas(400, 400);
  player = new Sprite(200, 200, 50, 50);
}

function draw() {
  background(220);
  
  // 检测鼠标按下且鼠标位置在精灵范围内
  if (mouse.pressed() && player.contains(mouse.x, mouse.y)) {
    console.log("玩家精灵被点击");
    player.scale += 0.1; // 点击后放大精灵
  }
}

3. 利用全局mouseClicked()事件函数 #

通过p5.js的全局点击事件，在其中判断点击位置是否属于目标精灵，适合同时处理多个精灵的点击逻辑：

let player, enemy;

function setup() {
  createCanvas(400, 400);
  player = new Sprite(100, 200, 50, 50);
  enemy = new Sprite(300, 200, 50, 50);
}

function draw() {
  background(220);
}

function mouseClicked() {
  if (player.contains(mouse.x, mouse.y)) {
    console.log("玩家被点击");
    player.color = 'blue';
  } else if (enemy.contains(mouse.x, mouse.y)) {
    console.log("敌人被点击");
    enemy.color = 'green';
  }
}

注意事项 #

• clicked()回调会自动处理精灵的交互边界，包括旋转、缩放后的精灵范围判断
• contains(x, y)方法可以精准判断坐标点是否在精灵的碰撞范围内
• mouse.pressed()在draw()中会持续触发（只要鼠标按住），而mouseClicked()仅在点击动作完成时触发一次

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