时间戳

首页 > 解决方案 > 如何测试 2 个画布图像在 JS 画布上是否小于 x 个像素？

javascript - 如何测试 2 个画布图像在 JS 画布上是否小于 x 个像素？

问题描述

我正在制作一个NPC无处不在的游戏，我想与他们互动。所以在他们的头上放一个感叹号的图像，数学计算出来的位置是好的。但是测试玩家和NPC之间的距离是我的麻烦。我会缩短代码，因为除了这个之外还有更多的东西，也不包括运动。如果玩家 X 或 Y 在比方说 20 画布像素的范围内，则显示标记。否则，不要。

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>

标签： javascripthtml5-canvas

解决方案

您可以使用标准的矩形碰撞公式并在此处添加所需的任何距离 (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
    }

推荐阅读