碰撞检测，故名思议，两个元素在运动的过程中是否有接触。
接下来，我们从简单到复杂的碰撞一一解析其中的算法。编码使用JavaScript。
ps:下列图形均指实心图形
点与点的碰撞
这个太简单了，不多说，就是当坐标一致的时候就是碰撞.
//A(x1,y1)B(x2,y2)
if(x1===x2 && y1===y2){
//碰撞
}else{
//无碰撞
}
点与圆的碰撞
点A(x1,y1) 圆心(x2,y2) 半径 r
我们可以看出红色的点与圆心的距离若小于半径，那么点与圆便发生碰撞。
根据勾股定理可以得出距离 d = √((x1-x2)^2 + (y1-y2)^2)
//点A(x1,y1) 圆心(x2,y2) 半径 r
if(Math.sqrt(Math.pow(x1 - x2,2) + Math.pow(y1-y2,2)) <= r){
//碰撞
}else{
//无碰撞
}
圆与圆的碰撞
圆A(x1,y1) 半径r1 ; 圆B(x2,y2) 半径 r2
同样根据勾股定理可以得出距离 d = √((x1-x2)^2 + (y1-y2)^2)
if(Math.sqrt(Math.pow(x1 - x2,2) + Math.pow(y1-y2,2)) <= (r1 + r2)){
//碰撞
}else{
//无碰撞
}
点与矩形的碰撞
首先矩形的表达方式有：
已知四个角的一个顶点(x2,y2)与宽w高h
已知几何中心点(x2,y2)与宽w高h
左上角与右下角两个顶点(x2,y2)、(x3,y3)
//1. 已知四个角的一个顶点(x2,y2)与宽w高h，以左上角为例
if(x1>=x2 && x1<=(x2+w) || (y1>=y2 && y1<=(y2+h))){
//碰撞
}else{
//无碰撞
}
//2. 已知几何中心点(x2,y2)与宽w高h
if(x1 >= (x2-w/2) && x1 <= (x2+w/2) || (y1 >= (y2-h/2) && y1 <= (y2 + h/2))){
//碰撞
}else{
//无碰撞
}
//3. 左上角与右下角两个顶点(x2,y2)、(x3,y3)
if(x1 >= x2 && x1 <= x3 || (y1 >= y2 && y1 <= y3)){
//碰撞
}else{
//无碰撞
}
矩形与矩形的碰撞
无论矩形是由什么数据表示。我们都可以求出几何中心A点与B点的坐标,与矩形宽w1 w2;高h1 h2。
假设求出A(x1,y1) B(x2,y2)
if(Math.abs(x2-x1) <= (w1+w2)/2 && Math.abs(y2-y1) <= (h1+h2)){
//碰撞
}else{
//无碰撞
}
下篇继续讲解当圆与矩形碰撞，等更复杂的碰撞检测