JS - 在 canvas 中围绕鼠标 position 创建一个碰撞箱？

Question

happy Sunday!

So, I'm making a silly duck hunt remake just for fun, and I got a question. What would be the best way to make a hitbox around the mouse cursor in canvas?

This is the code that I use to animate different ducks, and the code to check collision with the edged screen, and bounce them back in another direction.

I know there are probably 100 other ( better ) ways to make this, but I made this from scratch pretty much, and I really like it so far.

So what do I want to do? I need to kill ducks. So when I click on a duck, I can make it disappear. The disappearing part is not the problem, I am just unsure on how to go on about this.

Any help is highly appreciated!

Here is my code for animation and collision detection:

function animateDuckSprites(ducks) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ducks.forEach((duck) => {
    imageFrameNumber++; // changes the sprite we look at
    imageFrameNumber = imageFrameNumber % totalNumberOfFrames; // Change this from 0 to 1 to 2 ... upto 9 and back to 0 again, then 1...

    ctx.drawImage(
      duck.sprite,
      imageFrameNumber * widthOfSingleImage,
      0, // x and y - where in the sprite
      widthOfSingleImage,
      heightOfImage, // width and height
      duck.x,
      duck.y, // x and y - where on the screen
      widthOfSingleImage,
      heightOfImage // width and height
    );
    checkCollision(duck);
  });
}

function checkCollision(duck) {
  if (
    duck.x + duck.dx > canvas.width - duck.duckSize ||
    duck.x + duck.dx < 10
  ) {
    duck.dx = -duck.dx;
    duck.duckRight = !duck.duckRight;
    duck.sprite.src = duck.duckRight ? duck.spriteRight : duck.spriteLeft;
  }
  if (
    duck.y + duck.dy > canvas.height - duck.duckSize ||
    duck.y + duck.dy < 25
  ) {
    duck.dy = -duck.dy;
  }

  duck.x += duck.dx;
  duck.y += duck.dy;
}

Thanks!

edit: Just came up with this...it kind of works:P

canvas.addEventListener("click", (e) => {
  if (
    e.screenX >= blueDuck.x + 50 &&
    e.screenX <= blueDuck.x + 200 &&
    e.screenY >= blueDuck.y + 160 &&
    e.screenY <= blueDuck.y + 220
  ) {
    console.log("HIT");
  }
});

Answer 1

Just came up with this...it kind of works:P

canvas.addEventListener("click", (e) => {
  if (
    e.screenX >= blueDuck.x + 50 &&
    e.screenX <= blueDuck.x + 200 &&
    e.screenY >= blueDuck.y + 160 &&
    e.screenY <= blueDuck.y + 220
  ) {
    console.log("HIT");
  }
});