canvas游戏和动画中的碰撞检测（2种简单方式）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

碰撞检测关键步骤

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

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

计算碰撞

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

矩形物体碰撞检测

假设检测发生碰撞的物体是矩形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) { // 两个圆形碰撞了 }

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