碰撞检测

碰撞检测

刚才回答了一个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 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。

资料

1. 圆形与矩形碰撞检测
2. 圆形与旋转矩形碰撞检测
3. HTML canvas globalCompositeOperation 属性
4. 椭圆碰撞检测