javascript - 画布弧线的像素完美碰撞

Question

我在画布上有许多实体。我正在检查玩家实体是否正在触摸食物实体。玩家实体根据用户的输入移动，食物实体在屏幕周围随机缓慢移动。目前我正在这样做：

for (var i = 0; i < foodPieces.length; i++) {
    if (Math.abs(foodPieces[i].x - player.x) < (foodPieces[i].radius + player.radius) 
        && Math.abs(foodPieces[i].y - player.y) < (foodPieces[i].radius + player.radius))
    { 
        return true;        
    }
}

然而，玩家通常会提前检测到食物实体，最多会偏离 5-10 像素左右。如果重要的话，食物实体半径在一定程度上是随机的，并且玩家实体半径在整个游戏中都会增加。我试图弄清楚为什么会及早检测到碰撞以及如何让它正确检测到。有任何想法吗？

Answer 1

您基本上检查了边界矩形碰撞而不是圆形碰撞。

尝试计算点之间的实际距离：

var dist = Math.sqrt(Math.pow(foodPieces[i].x - player.x,2)+Math.pow(foodPieces[i].y - player.y,2));
if (dist<(foodPieces[i].radius + player.radius)) return true;

这使用毕达哥拉斯语句计算距离：C^2 = A^2 + B^2