矩形的碰撞检测

前言

相对不规则的形状的碰撞检测而言，矩形与矩形之间有没有重叠，这个是比较简单的一个问题。既然这样，那你会想到几种方案，本文分享一种，看看你是不是和我想的一样。

思路

首先，建立一个坐标系，x轴，y轴，左上角作为（0，0）。

然后，两个矩形a，b可以分别用{x:a,y:b,width:w,height:h}，{x:c,y:d,width:ww,height:hh}表示。

再然后，先看下图：

可以模糊的分成四种不重叠的情况：

1. b矩形在a矩形的x轴方向且b矩形的x坐标大于a矩形的x坐·标加上a矩形宽度
2. b矩形在a矩形的y轴反方向且b矩形的y坐标大于a矩形的y坐标加上b矩形高度
3. b矩形在a矩形的y轴方向且b矩形的y坐标小于a矩形的y坐标减去a矩形高度
4. b矩形在a矩形的x轴反方向且b矩形的x坐标小于a矩形的x坐标减去b矩形宽度

代码实现

/**
 * @function 检查两个矩形是否碰撞
 * @param {Object} a 矩形a
 * @param {Object} b 矩形b
 * @returns {Boolean} flag true 表示碰撞了 false 表示没有碰撞
 */
function isCollision(a, b) {
    let flag = !(b.x > a.x + a.width ||
        b.y > a.y + b.height ||
        b.y < a.y - a.height ||
        b.x < a.x - b.width)
    return flag
}

谢谢阅读！