资讯专栏INFORMATION COLUMN

碰撞检测

Dogee / 2094人阅读

摘要:碰撞检测刚才回答了一个游戏的问答。心血来潮,就想写写碰撞检测,废话不多说,直接怼。矩形和矩形的碰撞检测现有。资料圆形与矩形碰撞检测圆形与旋转矩形碰撞检测属性椭圆碰撞检测

碰撞检测

刚才回答了一个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.xrect.x+rect.w){return rect.x+rect.w}
else{return circle.x}
//我们再去找y轴,同样的道理.
if(circle.yrect.y+rect.h){return rect.y+rect.h}
else{return circle.y}
//有上面我们获得到的量,去计算就可以了,这就很简单了。

圆形与旋转矩形碰撞检测

可以看我下面的那个链接,我在这里先大体说一下原理,旋转部分是把矩形复原,把圆形通过矩形的中心点旋转,也可以理解为旋转画布,然后找圆形中心点,之后基本原理同上。

椭圆与椭圆碰撞检测 其他的检测手段

不管什么东西,老夫就是正面刚
1.canvascontext.globalCompositeOperation="source-in";
destination-in 在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示,源图像是透明的。
source-in 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的。

资料

圆形与矩形碰撞检测

圆形与旋转矩形碰撞检测

HTML canvas globalCompositeOperation 属性

椭圆碰撞检测

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107600.html

相关文章

  • 学习 PixiJS — 碰撞检测

    摘要:说明碰撞检测,用来检查两个精灵是否接触。如果没有碰撞到返回值就是。示例发生碰撞时的回调函数如果发生碰撞,显示哪边的边界发生碰撞边界左侧发生碰撞边界右侧发生碰撞边界 说明 碰撞检测,用来检查两个精灵是否接触。 Pixi 没有内置的碰撞检测系统, 所以这里我们使用一个名为 Bump 的库,Bump 是一个易于使用的2D碰撞方法的轻量级库,可与 Pixi 渲染引擎一起使用。它提供了制作大多数...

    ybak 评论0 收藏0
  • Chrome 小恐龙游戏源码探究九 -- 游戏碰撞检测

    摘要:文章首发于我的博客前言上一篇文章小恐龙游戏源码探究八奔跑的小恐龙实现了小恐龙的绘制以及键盘对小恐龙的控制,这一篇文章中将实现游戏的碰撞检测。 文章首发于我的 GitHub 博客 前言 上一篇文章:《Chrome 小恐龙游戏源码探究八 -- 奔跑的小恐龙》实现了小恐龙的绘制以及键盘对小恐龙的控制,这一篇文章中将实现游戏的碰撞检测。 碰撞检测原理 这个游戏采用的检测方法是盒子碰撞,这种检...

    cpupro 评论0 收藏0
  • 简析 js 碰撞检测原理与算法实现

    摘要:碰撞检测边界检测在前端游戏,以及涉及拖拽交互的场景应用十分广泛。这就涉及到碰撞检测或者叫边界检测的问题了。若四边均未发生重合,则未发生碰撞,反之则发生碰撞。目前业务有遇到碰撞需求,所以抽时间整理了下。 碰撞检测(边界检测)在前端游戏,以及涉及拖拽交互的场景应用十分广泛。 那么啥叫碰撞?JavaScript 又是如何检测 DOM 发生碰撞的呢? 碰撞,顾名思义,就是两个物体碰撞在了一起,...

    Miyang 评论0 收藏0
  • 简析 js 碰撞检测原理与算法实现

    摘要:碰撞检测边界检测在前端游戏,以及涉及拖拽交互的场景应用十分广泛。这就涉及到碰撞检测或者叫边界检测的问题了。若四边均未发生重合,则未发生碰撞,反之则发生碰撞。目前业务有遇到碰撞需求,所以抽时间整理了下。 碰撞检测(边界检测)在前端游戏,以及涉及拖拽交互的场景应用十分广泛。 那么啥叫碰撞?JavaScript 又是如何检测 DOM 发生碰撞的呢? 碰撞,顾名思义,就是两个物体碰撞在了一起,...

    Markxu 评论0 收藏0

发表评论

0条评论

Dogee

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<