2D碰撞检测

1.碰壁反弹

当球碰到边框就反弹(如x/y轴方向速度取反)。

if(ball.left < 0 || ball.right  > rect.width){
    ball.velocityX = -ball.velocityX
}
if(ball.top  < 0 || ball.bottom > rect.height){
    ball.velocityY = -ball.velocityY
}

在线运行示例

2.矩形碰撞

判断任意两个（无旋转）矩形的任意一边是否无间距，从而判断是否碰撞。

rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.height + rect1.y > rect2.y

在线运行示例

3.圆形碰撞

通过判断任意两个圆形的圆心距离是否小于两圆半径之和，若小于则为碰撞。

Math.sqrt(Math.pow(circleA.x - circleB.x, 2) + Math.pow(circleA.y - circleB.y, 2)) < circleA.radius + circleB.radius

在线运行示例

4.矩形与圆形碰撞

通过找出矩形上离圆心最近的点，然后通过判断该点与圆心的距离是否小于圆的半径，若小于则为碰撞。

//矩形上离圆心最近的点为变量：closestPoint = {x, y};//x需要根据左、右、上下三个放去计算；y需要根据上、下、左右三个方向计算
//矩形 rect = {x, y, w, h}; // 左上角与宽高
//圆形 circle = {x, y, r}; // 圆心与半径

var distance = Math.sqrt(Math.pow(closestPoint.x - circle.x, 2) + Math.pow(closestPoint.y - circle.y, 2))

if(distance < circle.r) return true // 发生碰撞
else return false // 未发生碰撞

在线运行示例

5.可旋转矩形与圆形碰撞

即使矩形以其中心为旋转轴进行了旋转，但是判断它与圆形是否发生碰撞的本质还是找出矩形上离圆心的最近点。
在线运行示例

6.限定路径碰撞

将地图（场景）划分为一个个格子。地图中参与检测的对象都存储着自身所在格子的坐标，那么你即可以认为两个物体在相邻格子时为碰撞，又或者两个物体在同一格才为碰撞。另外，采用此方式的前提是：地图中所有可能参与碰撞的物体都要是格子单元的大小或者是其整数倍。（例如在迷宫中行走）
在线运行示例

7.像素检测

以像素级别检测物体之间是否存在重叠，从而判断是否碰撞。（判断两者非透明区域的碰撞）

在线运行示例

8.多边形与圆形碰撞

由于圆形可近似地看成一个有无数条边的正多边形，而我们不可能按照这些边一一进行投影与测试。我们只需将圆形投射到一条投影轴上即可，这条轴就是圆心与多边形顶点中最近的一点的连线。

在线运行示例

参考：“等一下，我碰！”——常见的2D碰撞检测