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) {
// 两个圆形碰撞了
}
前面讲解了怎么检测矩形和圆形是否碰撞,基本已经可以适用大部分场景。对于特殊的场景,则需要大家自己去思考如何检测了。
碰撞后的处理
当检测到碰撞后,则可以对碰撞的物体进行状态设置了,可以是相互毁灭,或者是反弹等。这里大家可以根据场景来决定。