二维平面内的碰撞检测【一】

最新推荐文章于 2024-09-02 10:51:28 发布

DragonWar%

最新推荐文章于 2024-09-02 10:51:28 发布

阅读量1k

点赞数

文章标签： c/c++ javascript ViewUI

原文链接：https://segmentfault.com/a/1190000008476089

版权

碰撞检测，故名思议，两个元素在运动的过程中是否有接触。
接下来，我们从简单到复杂的碰撞一一解析其中的算法。编码使用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{
    //无碰撞
}

首先矩形的表达方式有：

//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{
    //无碰撞
}

下篇继续讲解当圆与矩形碰撞，等更复杂的碰撞检测

关注