JS类Arkanoid碰撞检测(侧面与底部和顶部)

Question

我知道有很多线程有类似的问题，我已经阅读并尝试了很多，但我仍然无法得到我想要的结果。也许有人可以帮助我。

我正在编写一个 JS Arkanoid(突破)类型的游戏来提高我的 JS 技能，并且在碰撞检测方面遇到了一些问题。与桨或墙壁的碰撞正在起作用，但与砖块的碰撞不起作用。

球和砖块是类球和砖块的实例，每个类都有自己的

pos: {
x: ...
y: ...
}

球从中心(using ball.pos.x和ball.pos.y)抽出，半径ball.r。球也有x和y速度(ball.vel.x和ball.vel.y)。

砖块是从左上角(brick.pos.x和brick.pos.y)绘制的，它们有高度(brick.h)和宽度(brick.w)。 我还在砖块上添加了一个中心点(brick.center.x和brick.center.y)。

在球的更新功能中，我检查与每块砖块的碰撞，如下所示：

for (let i = 0; i < bricks.length; i++) {
let collision = detectCollision(this, bricks[i]);
}

并且检测碰撞是

function detectCollision(ball, brick) {
let xDist = calculateDistance(ball.pos.x, brick.center.x);
let yDist = calculateDistance(ball.pos.y, brick.center.y);
if (xDist < (ball.r + brick.w / 2) && yDist < (ball.r + brick.h / 2)) {
return true;
} else {
return false;
}
function calculateDistance(pointA, pointB) {
return Math.abs(pointA - pointB);
}

我现在知道像这样，代码并没有真正做任何事情。 我只是将其存储在collision变量中。这只是为了告诉你我的想法是什么。我可以使用此功能检测球和砖块是否碰撞，但无法检测球与哪一侧相撞。

我现在缺少并且似乎无法理解的是如何检测碰撞是与顶部，底部还是其中一侧发生碰撞。如果碰撞是顶部或底部，我必须翻转ball.vel.y，如果是其中一侧，我必须翻转ball.vel.x.

Answer 1

我会从

function detectCollision(ball, brick) {
let xDist = calculateDistance(ball.pos.x, brick.center.x) - brick.w / 2;
let yDist = calculateDistance(ball.pos.y, brick.center.y) - brick.h / 2;
if (xDist < ball.r && yDist < ball.r) {
return true;
} else {
return false;
}
}

其中xDist和yDist现在是球与砖块最近边缘(在砖的最近角相交)之间的绝对距离。您现在不仅可以使方程适用于圆球：

xDist < ball.r && yDist < 0 || yDist < ball.r && xDist < 0 || xDist**2 + yDist**2 < ball.r**2

但也要通过xDist和yDist之间的比率来区分两侧：

if (/* collides */) {
if (xDist < yDist)
return "vertical"; // from top or bottom
//  else if (xDist == yDist)
//      return "45°";
else
return "horizontal"; // from left or right
} else {
return null;
}