像素完美碰撞画布弧

spe*_*bat 2 javascript html5 canvas collision

我在画布上有很多实体.我正在检查玩家实体是否正在接触食物实体.玩家实体根据用户的输入移动,并且食物实体在屏幕周围随机且缓慢地移动.目前我这样做:

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;        
    }
}
Run Code Online (Sandbox Code Playgroud)

然而,播放器通常会提前检测到食物实体,最多可以检测到5-10个像素左右.如果重要的话,食物实体半径随机化到一定程度,并且玩家实体半径在整个游戏中增加.我试图找出为什么早期检测到碰撞以及如何正确检测它.有任何想法吗?

Ran*_*hen 6

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

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

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;
Run Code Online (Sandbox Code Playgroud)

这使用毕达哥拉斯句子计算距离:C ^ 2 = A ^ 2 + B ^ 2 为什么你的代码中断

  • 打败我.也许你可以为其他观众解释一下真正的距离(直角三角形和所有爵士乐)? (2认同)