如何用p5.js实现鼠标拖拽鼓槌悬停点击触发手鼓音效功能？

我想实现手鼓演奏的交互体验，具体逻辑是：用户可拖拽鼓槌图片，将其悬停在手鼓图片上方后，再次点击即可播放手鼓音效。目前我找到的相关资源多针对图形（如椭圆），但缺乏针对图片的实现方案，请问该功能是否可行？

以下是我编写的p5.js代码：

var drum, mallet;
var x, y, w, h; // Location and size
let dragging = false;
let rollover = false;
let img;
let vel;
let pos;

function preload(){
  
  strike = loadSound('HandDrum.mp3');
  drum = loadImage('handdrum2.png');
  mallet = loadImage('drumMallet.png');
}

function setup() {
  createCanvas(750, 500);

  //Dimensions for Moving Stuff
  x = 400;
  y = 100;
  w = 300;
  h = 300;
}

function draw() {
  
  background(220);
  
  tint(219,69,69,250);
  image(drum,125,95,400,400);
  tint(82,217,198);
  //image(mallet,350,100,width/2,height/2);
  
   
  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + 2) {
    rollover = true;
  } else {
    rollover = false;
  }
  // Adjust location if being dragged
  if (dragging) {
    x = mouseX + offsetX;
    y = mouseY + offsetY;
   
  }
  image(mallet, x, y, w, h);
  
}
 

function mousePressed() {

  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {
    dragging = true;
    offsetX = x - mouseX;
    offsetY = y - mouseY;
  }
}

function mouseReleased() {
   //Quit dragging
   dragging = false;
}

相关图片：

内容的提问来源于stack exchange，提问作者K-PopCorn