欢迎来到【畅哥聊技术】前端图形学相关技术文章,更多精彩内容持续更新中,敬请关注。
上一章节我们说到了,碰撞检测的基本原理。那么今天我们就针对小球的碰撞进一步深入研究。
多小球的碰撞检测废话少说。先来上今天的第一个示例。
多小球之间的物理碰撞
效果分析:
原理分析:
我们拿三个小球来举例:那么针对这三个小球的碰撞检测,那么我们要判断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图功能都已经实现。
由于代码一屏无法截全,所以这里只显示核心代码,完整的示例请私信我
多碰撞检测扩展我们对上面的效果接着进行一个扩展。效果如下:这种效果相信大家在网上也是经常见到吧、
从效果上看,我们给添加了鼠标效果。那么在鼠标的周围是没有小球的。
当我们点击画布的时候,小球中间空白区域越来越大。
当不再点击的时候,小球又慢慢恢复原来的效果。
第一眼不要被这种效果吓着了。我再来截个图大家就明白了。
原理相信大家一眼就能看明白,我们已经实现了多个小球之间的碰撞反弹,那么我们可以在众多的小球的,找出第一个小球单独处理。
由于这个效果处理起来比较简单,我就不贴代码了,源代码可私信我索取。
以上是今天所有的分享内容。喜欢的请点赞关注,不喜欢的解散。。。
这里是【畅哥聊技术】前端图形学相关技术文章,更多精彩内容持续更新中。。。
未完待续。。。
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved