欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。
【碰撞检测】这个名词相信在程序开发的中应用很广泛。尤其是在游戏开发中，那么接下来我们就来聊一聊图形学中的碰撞检测的原理以及实践吧~
矩形之间的碰撞检测
从上方的图我们可以看到，有两个矩形，我们单纯的去找他们的碰撞条件可能有些麻烦，这时候我们不妨换个思路，我们找出他们没有碰撞上的条件，然后取反即可。
有四种情况下，他们没有碰撞上
- 蓝色小球的最底部在黄色小球的最底部
- 蓝色小球的最右侧在黄色小球的最左侧
- 蓝色小球的最顶部在黄色小球的最底部
- 蓝色小球的最左侧在黄色小球的最右侧
我们找出了以上的四种情况，证明他们是没有碰撞上的，反之，他们一定会碰撞上了。那么接下来我们用Canavs实现一下这样的碰撞检测吧。
为了更好的演示，我需要封装一个矩形类，用来绘制矩形，和小球类类似。
先来看效果：
先实例化两个矩形。然后其中的一个进行拖拽处理，拖拽的原理逻辑我已经在我的 中有阐述。不懂原理可先移步过去熟悉拖拽原理。
然后给Canavs画布添加mousedown mousemove mouseup事件，我们在mousemove事件中添加主要的逻辑。
核心代码：
if(rect.x rect.w < rect1.x || rect.x> rect1.w rect1.x || rect.y rect.h < rect1.y || rect.y > rect1.h rect1.y){ console.log('没有碰撞上...') }else{ console.log('碰撞上了 ^_^ ...') }
完整的代码
总体来说，矩形之间的碰撞检比较好理解，原理也很简单。接下往下看~
圆的碰撞检测
其实原理也很简单，就是两个小球圆心的距离如果比两个小球的半径之和(R r)大，那么两个小球则没有发生碰撞，反之则碰撞上了。
那么两个小球圆心的距离怎么求呢？之前的文章有讲过，数学知识中的勾股定理就能搞定。那么接下来我们先用勾股定理来封装一个两个点之间的距离。
//x1,y1 和 x2,y2 分别代表两个点的坐标 function dis(x1,y1,x2,y2){ return Math.sqrt(Math.pow(x1 - x2,2) Math.pow(y1-y2,2)) }
接下来我们就来实现一下圆之间的碰撞检测。先来看效果。
核心代码：
if( dis(ball1.x , ball1.y , ball.x , ball.y )<= ball.r ball1.r ){ console.log('碰撞上了 ^_^ ...') }else{ console.log('没有碰撞上...') }
完整的代码：
源代码请私信我索取
总结：今天的分享仅仅是碰撞的基础入门介绍。
本文主要说到了两个基础图形之间的碰撞检测原理。这在我们的项目开发中完全适用，如果要深入一些复杂的图形的碰撞检测，可能需要进行像素级的检测了，那个更为精准，但是同时也更耗CPU资源。
以上是今天所有的分享内容。喜欢的请点赞关注，不喜欢的解散。。。
这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中。。。
未完待续。。。
