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