圆形敌人的仇恨条件？ （纯JS中的2D游戏）

Question

我正在努力编写一个圆形检测区域，用于敌人的仇恨检测。目前，如果玩家的x和y位置与敌人的x和y位置相加并且减去其aggroDist，则会拉动敌人。

以下是当前代码：

if (player.x > enemies[e].x -enemies[e].aggroDist && 
    player.x < enemies[e].x +enemies[e].aggroDist && 
    player.y > enemies[e].y -enemies[e].aggroDist && 
    player.y < enemies[e].y +enemies[e].aggroDist) {
        enemies[e].isAggro = true;
        console.log(enemies[e].isAggro);
    }

这种方法的问题是方形探测区域，这意味着敌人可以在对角线边缘的更远处探测到玩家。

我尝试使用类似enemies[e].x + (enemies[e].aggroDist * Math.PI)之类的东西制作圆形检测区域，但我不知道如何实现它（可能因为这种方法也是错误的）。

我是否知道如何使检测区域中心与其边界之间的距离严格相等？

Answer 1

以下是使用距离公式的粗略实现：

//Load HTML elements
var c = document.getElementById("c");
var ctx = c.getContext("2d");
//Distance function 
function distance(x1, y1, x2, y2) {
    return Math.sqrt((x2 -= x1) * x2 + (y2 -= y1) * y2);
}
//Entity is the player, radius is the aggro distance
var entity = { x: 200, y: 200, radius: 50 };
//Radius is the aggro distance of the other entities
var radius = 2;
//Draw player
ctx.beginPath();
ctx.arc(entity.x, entity.y, entity.radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
//Loop through "X" and "Y" combinations and draw "enemies"
for (var x = 0; x < 400; x += 10) {
    for (var y = 0; y < 400; y += 10) {
        //Get distance between "enemy" and "player"
        var d = distance(x, y, entity.x, entity.y);
        //If the distance is less than the combined aggro distances, turn red, else turn green
        ctx.strokeStyle = (d < entity.radius + radius ? "red" : "green");
        //Draw enemy
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();
    }
}

<canvas id="c" height="400" width="400"></canvas>