碰撞检测
作者：互联网
碰撞检测
刚才回答了一个H5游戏的问答。心血来潮，就想写写碰撞检测，废话不多说，直接怼。
矩形和矩形的碰撞检测
现有rect1 = {x:0,y:0,w:5,h:5};rect2 = {x:10,y:10,w:5,h:5};。
矩形我们一般拥有的都是左上角点的XY以及他的宽高WH。碰撞当然就是我中有你，你中有我咯，那么就是判断四条边，在我左边的右边，右边的左边，上边的下边，下边的上边。说起来有点绕口，那就直接上代码吧，下面四个条件如果都成立那么就是有交集，他们碰撞了。
rect1.x < rect2.x + rect2.w // rect1.x 代表左边界
rect1.x + rect1.w > rect2.x // rect1.x + rect1.w 代表右边界
rect1.y < rect2.y + rect2.h // rect1.y 代表上边界
rect1.y + rect1.h > rect2.y // rect1.y + rect1.h 代表下边界
//x和y可以看做起始点，x+w和y+h可以看做终止点。
圆形和圆形的碰撞检测
现有circle1={x:5,y:5,r:1};circle2={x:8,y:8,r:1}。
圆形我们一般拥有的是圆心点的XY以及他的半径r。圆的碰撞怎么判断呢？计算两个圆心点的距离，如果距离大于他们的半径相加就可以了。那好，我们怼代码了。坐标相减算出来的是坐标点之间的距离，这样我们是不是一个直角三角形？勾股定理可以求出第三条边，这样我们就可以比较了
Math.sqrt((circle2.x - circle1.x)**2+(circle2.y - circle1.y)**2)>circle2.r + circle1.r
圆形和矩形的碰撞检测
现有circle={x:5,y:5,r:1};rect={x:10,y:10,w:5,h:5};。
这个就有点难度了不是想象中的那么简单，要检查圆形和矩形碰撞，矩形上找到离圆心最近的点，比较两点距离对于半径。
//我们先找x轴，比较圆心点和矩形左边界，如果不是比对右边界。如果不存在左右就是存在中间呗。
if(circle.x<rect.x){return x}
else if(circle.x>rect.x+rect.w){return rect.x+rect.w}
else{return circle.x}
//我们再去找y轴，同样的道理.
if(circle.y<rect.y){return y}
else if(circle.y>rect.y+rect.h){return rect.y+rect.h}
else{return circle.y}
//有上面我们获得到的量，去计算就可以了，这就很简单了。
圆形与旋转矩形碰撞检测
可以看我下面的那个链接，我在这里先大体说一下原理，旋转部分是把矩形复原，把圆形通过矩形的中心点旋转，也可以理解为旋转画布，然后找圆形中心点，之后基本原理同上。
椭圆与椭圆碰撞检测
其他的检测手段
不管什么东西，老夫就是正面刚
1.canvas的context.globalCompositeOperation="source-in";destination-in 在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。source-in 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
资料
标签：碰撞检测,图像,rect2,rect1,矩形,rect 来源： https://www.cnblogs.com/10manongit/p/12824744.html