一、矩形与矩形间的碰撞
- 核心理念
判断任意两个(无旋转)矩形的任意一边是否无间距,从而判断是否碰撞。大体实现方式就是以一个矩形的某个定点作为运动物,计算自己的坐上顶点与另一元素的左上定点的位置和宽高数据进行判断检测 - 图示理解
说明:图中的 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('碰撞成功')
}
二、圆形与圆形的碰撞
- 核心理念
通过判断任意两个圆形的圆心距离是否小于两圆半径之和,若小于则为碰撞 - 图示理解
- 算法判断
|AB|=Math.sqrt