canvas游戏和动画中的碰撞检测

Posted 2020-10-12 carrey wang

碰撞检测关键步骤

碰撞检测需要处理经历下面两个关键的步骤：

• 计算判断两个物体是否发生碰撞
• 发生碰撞后，两个物体的状态和动画效果的处理

计算碰撞

只要两个物体相互接触，它们就会发生碰撞。

矩形物体碰撞检测

假设检测发生碰撞的物体是 矩形1 和 矩形2 时，我们只需检测 矩形1 的上下左右四侧的和 矩形2 是否存在着距离。我们可以看看下面的图：

我们可以看到 矩形2 和 矩形1 之间没有发生碰撞共有四种可能的情况：

• 矩形2的右侧 离 矩形1的左侧有一段距离
• 矩形2的左侧 离 矩形1的右侧有一段距离
• 矩形2的底部 离 矩形1的顶部有一段距离
• 矩形2的顶部 离 矩形1的底部有一段距离

当符合上面其中一种情况，则两个矩形没有发生碰撞。

因此通过逆向推导我们可以得出：当上面四种情况都不满足的时候，则代表两个矩形碰撞了。在代码中，我们可以这样写：

// 判断四边是否都没有空隙
if (!(rect2.x + rect2.width < rect1.x) &&
    !(rect1.x + rect1.width < rect2.x) &&
    !(rect2.y + rect2.height < rect1.y) &&
    !(rect1.y + rect1.height < rect2.y)) {
    // 物体碰撞了
}

圆形物体碰撞检测

假设发生碰撞的物体是 圆形 时，检测碰撞则变得比较复杂了，前面矩形所使用的碰撞检测，并不能判断圆形物体的情况。如下图的情况：

那么如何检测两圆是否碰撞了呢？这个时候又到了考验我们数理化的知识了。

检测两圆是否相交：当两个圆心之间的距离是否小于两个圆的半径之和。这是已经被证实的数学运算。如下图所示：

其中 dx 和 dy 分别表示两个圆之间的横坐标和纵坐标的差值。 即 dx = x2 - x1; dy = y2 - y1;

然后我们需要通过 勾股定理 计算两个圆心之间的距离。如下图：

因此我们碰撞检测的代码可以这样写：

var dx = circle2.x - circle1.x;
var dy = circle2.y - circle1.y;
var distance = Math.sqrt((dx * dx) * (dy * dy));
if (distance < circle1.radius + circle2.radius) {
  // 两个圆形碰撞了
}

前面讲解了怎么检测矩形和圆形是否碰撞，基本已经可以适用大部分场景。对于特殊的场景，则需要大家自己去思考如何检测了。

碰撞后的处理

当检测到碰撞后，则可以对碰撞的物体进行状态设置了，可以是相互毁灭，或者是反弹等。这里大家可以根据场景来决定。