p5.js如何实现点击/悬停图片触发播放音效、切换图像功能

你之前的代码无效的核心原因：p5.js 中通过loadImage加载的图片对象没有内置mouseOver事件，这个事件是给网页DOM元素用的，你画在canvas上的所有内容都是像素，没法直接绑定交互事件，需要自己手动判断鼠标位置是否落在目标区域。

实现思路 #

全程不用类，只需要加简单的变量判断即可实现需求：

• 先给每个动物划定一个矩形检测区域，记录区域的x坐标、y坐标、宽度、高度（可以对着自己的背景图调整数值）
• 新增状态变量记录当前是否悬停在动物区域，再加变量记录音效是否已经播放，避免悬停期间反复触发音效
• 每帧执行的draw函数里先判断鼠标位置是否在目标区域，再根据判断结果画对应的背景、控制音效播放

完整可运行代码（带注释） #

// 预加载所有资源，程序启动前会先执行这个函数
function preload() {
  // 加载鸟叫音效
  birdsSound = loadSound("sounds/birds.mp3");
  // 加载默认背景（带动物原始姿势的风景图）
  backgrnd = loadImage("images/backgrnd.png");
  // 加载悬停后要显示的鸟换姿势的图
  birdsImage = loadImage("images/birds.png");
}

// 全局配置，根据你自己的图调整数值
// 鸟在背景图上的位置：左上角x、左上角y、宽度、高度
const BIRD_AREA = {
  x: 100, // 替换成你图里鸟区域的实际x坐标
  y: 200, // 替换成你图里鸟区域的实际y坐标
  w: 150, // 替换成你图里鸟区域的实际宽度
  h: 120 // 替换成你图里鸟区域的实际高度
}
// 记录音效是否已经播放，避免重复播放
let hasPlayedBirdSound = false;

function setup() {
  createCanvas(1000, 750);
}

function draw() {
  // 判断鼠标是否在鸟的区域内
  const isHoverBird = 
    mouseX > BIRD_AREA.x && 
    mouseX < BIRD_AREA.x + BIRD_AREA.w &&
    mouseY > BIRD_AREA.y &&
    mouseY < BIRD_AREA.y + BIRD_AREA.h;

  if (isHoverBird) {
    // 悬停时画换了姿势的鸟的图
    image(birdsImage, 0, 0);
    // 只有没播过音效的时候才播
    if (!hasPlayedBirdSound) {
      birdsSound.play();
      hasPlayedBirdSound = true;
    }
  } else {
    // 没悬停时画默认背景
    image(backgrnd, 0, 0);
    // 离开区域后重置音效状态，下次悬停可以再播
    hasPlayedBirdSound = false;
  }
}

使用说明 #

1. 调整检测区域的小技巧：你可以先在draw函数里加一行console.log(mouseX, mouseY)，运行项目后把鼠标移到鸟的四个角，控制台会输出对应坐标，直接抄数值填到BIRD_AREA里就行。
2. 扩展多动物的方法：如果要加兔子、猫等其他动物，只需要新增对应音效、图片、区域配置变量和状态变量，在draw里多写一段判断逻辑即可，不需要修改现有代码。
3. 没有声音的排查方法：检查你项目的html文件里是否引入了p5.sound.min.js库，用p5官方在线编辑器的话默认已经开启了sound功能，同时注意所有文件路径不要写错大小写。

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