js的碰撞检测

本文讲解二维平面内的圆和矩形碰撞

原理

找到圆心与矩形的最近点，计算该点到圆心的距离与圆的半径进行比较。

方法

首先定义最接近点的x坐标，y坐标，圆心坐标，矩形左边和上边到外容器的距离，矩形的宽高。

var closest_x , closest_y; 
var circle_x ,circle_y;
var rectangle_x , rectangle_y , rectangle_w , rectangle_h;

先分析最近点的x坐标

当圆心在矩形的左边时
最接近点的x坐标为矩形左边据外容器的距离。
即 closest_x = rectangle_x ;

当圆心在矩形的右边时
最接近点的x坐标为矩形左边到外容器的距离+矩形的宽。
即 closest_x = rectangle_x + rectangle_w ;

当圆心在矩形的正上方或正下方时。
最近点的x坐标 = 圆心的x坐标
即 closest_x = circle_x ;

最近点的y轴坐标

和分析x坐标的思路是一样的。

当圆心在矩形上面时
最近点的y轴坐标 = 矩形上边到外容器的距离 。
即 closest_y = rectangle_y ;

当圆心在矩形下面时
最近点的y轴坐标 = 矩形上边到外容器的距离 + 矩形的高度。
即 closest_y = rectangle_y + rectangle_h ;

当圆心在矩形的正左右两边时
最近点的y坐标 = 圆心的y坐标
即 closest_y = circle_y ;

这样最近点的x和y坐标我们都找到了
最后用两点之间的距离公式得到距离在与圆的半径进行比较
如果小于圆的半径就说明发生碰撞。

---

Gentle Reminder:

写代码时可以合理地运用if(){}…else{} 语句来实现上面的思想。
本人也学习没多久，如果有更好的方法欢迎评论或私信。