欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。

上一章节我们说到了，碰撞检测的基本原理。那么今天我们就针对小球的碰撞进一步深入研究。

多小球的碰撞检测

废话少说。先来上今天的第一个示例。

多小球之间的物理碰撞

效果分析：

随机生成20个小球，给每一个小球一个随机的水平方向和垂直方向的速度以及一个随机的颜色。所有的小球在到达边界的时候，均会发生反弹效果、从图中我们可以看到，所有小球永远不会完全重叠在一起，他们一旦发生了碰撞，就是发生反弹的物理现象。

原理分析：

我们拿三个小球来举例：那么针对这三个小球的碰撞检测，那么我们要判断A与B之间的碰撞，A与C之间的碰撞以及B与C之间的碰撞。所以我们分析得知需要两层循环判断。

这里面需要注意的是，在第一层循环中，我们已经判断了A和B之间的碰撞，那么在内层循环中，我们就不再继续判断 B与A之间的碰撞了。

说明：随着示例越来越复杂，我不得不将一些公共的方法提取出来单独用一个util.js文件来管理了。目前我就封装了两个基础方法

1、计算距离

2、随机一个范围

var util = { dis(x1, y1, x2, y2) { return Math.sqrt(Math.pow(x1 - x2, 2)  + Math.pow(y1 - y2, 2)) }, range(min, max){ return min + Math.random() * (max - min); }};

那么在判断小球之间的碰撞检测原理我们在上一章节中已经实现，现在的问题是，两个小球碰撞过后他们各自的反弹效果该如何实现？也就是说。如果确实碰撞反弹后的两个小球分别的速度值。

我们继续看一张图。

我们的已经量有：

1、两个小球碰撞的时候最少距离 minDis

2、两个小的坐标差值。

有以上两个条件，我们就能计算出目标点的横向坐标和纵向坐标。

targetX = 小球的位置 + 最小距离(mindis) * cos(夹角)，那么cos值这次我们是通过 坐标差值/最小距离。

targetY同理

计算出目标点坐标后，再来计算它与小球B的坐标差值然后再*弹跳系数就可以求出水平和垂直方向上加速度ax,ay了。

接下来，让小球A速度vx -= ax；vy -= ay; 由于小球B需要反方向运动，所以 ballB.vx += ax;

ballB.vy += ay;

算计出两个小球的最终不速度后，再作用在小球的xy坐标上，效果完成。

核心代码：

var ballB = balls[k];var ballDis = dis(ballA.x, ballA.y, ballB.x, ballB.y);const dx = ballB.x - ballA.x, dy = ballB.y - ballA.y;var minDis = ballA.r + ballB.r;if (ballDis <= minDis) {//碰撞检测 var targetX = ballA.x + dx / ballDis * minDis; var targetY = ballA.y + dy / ballDis * minDis; const ax = (targetX - ballB.x) * bounce; const ay = (targetY - ballB.y) * bounce; ballA.vx -= ax; ballA.vy -= ay; ballB.vx += ax; ballB.vy += ay;}

核心代码截图：

到这里，上面的gif图功能都已经实现。

由于代码一屏无法截全，所以这里只显示核心代码，完整的示例请私信我

多碰撞检测扩展

我们对上面的效果接着进行一个扩展。效果如下：这种效果相信大家在网上也是经常见到吧、

从效果上看，我们给添加了鼠标效果。那么在鼠标的周围是没有小球的。

当我们点击画布的时候，小球中间空白区域越来越大。

当不再点击的时候，小球又慢慢恢复原来的效果。

第一眼不要被这种效果吓着了。我再来截个图大家就明白了。

原理相信大家一眼就能看明白，我们已经实现了多个小球之间的碰撞反弹，那么我们可以在众多的小球的，找出第一个小球单独处理。

让其跟随鼠标移动而移动点击画布的时候，让这个小球的半径(r)不断递增，当松开不再点击的时候，让这个小球的半径还原回去，将这个小球透明度设置为0

由于这个效果处理起来比较简单，我就不贴代码了，源代码可私信我索取。

以上是今天所有的分享内容。喜欢的请点赞关注，不喜欢的解散。。。

这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中。。。

未完待续。。。