我如何测试 2 canvas 图像在 JS canvas 上是否小于 x 个像素？

Question

我正在制作一个到处都是 npc 的游戏，我想与他们互动。因此，在他们的头上放一个感叹号的图像，数学计算出来的位置没问题。但是测试玩家和 NPC 之间的距离是我的麻烦。我将缩短代码，因为不仅如此，还不包括运动。如果玩家 X 或 Y 在比方说 20 canvas 像素的范围内，则显示标记。否则不要。

const canvas = document.querySelector("canvas")
const context = canvas.getContext("2d")

NPCs = [
  {
    "name": "tim",
    "sprite": {
      "up": null, // too lazy for that art
      "down": null, // down too
      "left": "images/tim-left.svg",
      "right": "images/tim-right.svg"
    },
    "x": 50,
    "y" 50,
    "onInteract": function(){}, // i dont wanna recreate it
  }
]

function gameLoop() {
  // once again, no movement code shown
  NPCs.forEach(npc=>{
    const NPCimg = new Image()
    NPCimg = npc.sprite.right
    context.drawImage(NPCimg,npc.x,npc.y,canvas.width/10,canvas.width/10) // small, i know
    if (true/*weird cody statement*/) {
      context.drawImage(/*no one cares*/)
    }
  })
}

setInerval(gameLoop,1000/60) // 60 is a fixed number for now

/*Not really any CSS but margin auto*/

<canvas width="100" height="75"></canvas>

Answer 1

您可以使用标准矩形碰撞公式并添加您想要的任何距离，此处为 (20)。

function collision(player, obj) {
  if (
    player.x + player.w + 20 < obj.x ||
    player.x > obj.x + obj.w + 20 ||
    player.y + player.h + 20 < obj.y ||
    player.y > obj.y + obj.h + 20
  ) {
    return;
  }
  //do something or return true
}

您也可以使用勾股定理计算距离。

    function distance(player, npc) {
        //center of rectangle 
        let pX = player.x + player.w/2
        let pY = player.y + player.h/2
        let npcX =  npc.x + npc.w/2
        let npcY = npc.y + npc.h/2

        return Math.hypot(pX - npcX, pY - npcY)
    }

然后就在你需要的地方调用它

    if (distance(player, npc) <= (player.w + npc.w + 20) || distance(player, npc) <= (player.h + npc.h + 20)) {
        //do something
    }

我如何测试 2 canvas 图像在 JS canvas 上是否小于 x 个像素？

How do I test if 2 canvas images are less than x number of pixels away on JS canvas?

javascript

html5-canvas