碰撞检测,故名思议,两个元素在活动的过程当中是不是有打仗。
接下来,我们从简朴到庞杂的碰撞逐一剖析个中的算法。编码运用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{
//无碰撞
}
下篇继承解说当圆与矩形碰撞,等更庞杂的碰撞检测