js中碰撞检测算法核心

小咪咪 2022-01-23 07:21 246阅读 0赞

一、**矩形与矩形间的碰撞**

1.  核心理念  
    判断任意两个（无旋转）矩形的任意一边是否无间距，从而判断是否碰撞。大体实现方式就是以一个矩形的某个定点作为运动物，计算自己的坐上顶点与另一元素的左上定点的位置和宽高数据进行判断检测
2.  图示理解  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]

说明：图中的 x 是 offsetLeft , y 是 offsetTop，矩形的宽和高分别是 offsetWidth 、offsetHeight  
3. 算法判断

if(react1.offsetLeft<react2.offsetLeft+react2.offsetWidth&&
       react1.offsetLeft+react1.offsetWidth>react2.offsetLeft&&
       react1.offsetTop<react2.offsetTop+react2.offsetHeight&&
       react1.offsetHeight+react1.offsetTop>react2.offsetTop
    ){ 
     console.log('碰撞成功')
    }

二、**圆形与圆形的碰撞**

1.  核心理念  
    通过判断任意两个圆形的圆心距离是否小于两圆半径之和，若小于则为碰撞
2.  图示理解  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 1]
3.  算法判断

|AB|=Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))

三、**圆形与矩形之间的碰撞**

1.  核心理念  
    通过找出矩形上离圆心最近的点，然后通过判断该点与圆心的距离是否小于圆的半径，若小于则为碰撞。改点的位置可以通过获取矩形左上角的坐标位置和元素的宽高来进行数据计算
2.  图示理解  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 2]
3.  算法判断

var distance=Math.sqrt(Math.pow(closestPoint.x-x1,2)+Math.pow(closestPoint.y-y1,2));
    if(distance<r1){ 
      console.log('碰撞成功')
    }else{ 
     console.log('没碰到')
    }

四、**圆形与旋转矩形之间的碰撞**

1.  核心理念  
    即使矩形以其中心为旋转轴进行了旋转，但是判断它与圆形是否发生碰撞的本质还是找出矩形上离圆心的最近点。但是矩形的边缘坐标需要进行一个数据转换，通过这个旋转的角度值计算转换后的位置
2.  图示理解  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 3]
3.  算法判断

var distance=Math.sqrt(Math.pow(closestPoint.x-x1,2)+Math.pow(closestPoint.y-y1,2));
    if(distance<r1){ 
      console.log('碰撞成功')
    }else{ 
     console.log('没碰到')
    }

五、**矩形与障碍物之间的碰撞（地图碰撞算法）**  
1.核心理念  
将整个地图进行数据化，划分为一个矩形的地图，地图的每个基本单位是一个矩形区域。地图中所有可能参与碰撞的物体都要是基本单位大小的整数倍，地图中参与检测的对象都存储着自身所在格子的坐标，两个物体在同一格才为碰撞  
2. 图示理解  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 4]  
3. 算法判断

//标记为0的可以通过，1的不可以通过既是障碍物
    var map=[
        [1,1,1,1,1,1,1,1,0],
        [1,0,1,0,1,0,0,0,1],
        [1,0,0,0,1,0,1,1,0],
        [1,1,0,0,0,0,0,1,0],
        [1,1,1,1,1,1,1,1,1],
    ]
    //设置角色的初始位置
    player={ left:2,top:2}
    //下面就要用到A*寻路算法进行判断检测碰撞了
    ......

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]: /images/20220123/f5779ae30d89481bae78cfdd2efee5bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 1]: /images/20220123/112683d0f18c49f987da723f8faf1a00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 2]: /images/20220123/925351900cbe425d95dd56519e28c40c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 3]: /images/20220123/33a8433410a0485898616a2e5b2fc23c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 4]: /images/20220123/d1e609860a2d44ffad2b1e2f1980c62b.png