javascript - Canvas 弧线的像素完美碰撞

我在 Canvas 上有许多实体。我正在检查玩家实体是否在接触食物实体。玩家实体根据用户的输入移动，食物实体在屏幕上随机且缓慢地移动。目前，我正在这样做:

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个像素左右。如果重要的话，食物实体的半径会随机分配到一定程度，并且玩家实体的半径会在整个游戏中增加。我试图弄清楚为什么要及早检测到碰撞，以及如何使它正确检测。有任何想法吗？

最佳答案

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

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

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