碰撞检测

linong

碰撞检测

刚才回答了一个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

clipboard.png

圆形和矩形的碰撞检测

现有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.canvascontext.globalCompositeOperation="source-in";
destination-in 在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示,源图像是透明的。
source-in 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的。
clipboard.png

资料

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

javascript-lNong
只此一生,何必从众

Read-Search-Ask

22.8k 声望
4.8k 粉丝
0 条评论

Read-Search-Ask

22.8k 声望
4.8k 粉丝
文章目录
宣传栏