canvas画布中小球碰撞简单处理

马黑黑

效果：点击方框任意处生成小球，限量10个 ——

代码：

<style> #mama {     margin: 20px auto;     width: 600px;     height: 400px;     border: 1px solid gray;     position: relative; } </style>   <div id="mama"></div>   <script> //创建画布 var canv = document.createElement('canvas'); //画布尺寸及宽高变量与父元素一致 var ww = canv.width = mama.offsetWidth; var hh = canv.height = mama.offsetHeight; //mama添加画布 mama.appendChild(canv); //获得画笔 var ctx = canv.getContext('2d');

/* 小球数组 用于实时记录小球数据 小球个体以对象形式存储圆心坐标、半径、颜色、xy方向移动速度 {x: x, y: y, r: r, color: color, speedX: speedX, speedY: speedY} */

var balls = []; //动画标识，小球总数 var raf = null, total = 10;   //获取运动速度函数 -1 或 1 var speed = () => Math.random() < 0.5 ? -1 : 1;   //绘制小球函数 圆心坐标+半径+填充颜色 var drawBall = (x,y,r,color) => {     ctx.save();     ctx.beginPath();     ctx.fillStyle = color;     ctx.arc(x,y,r,0,2*Math.PI);     ctx.fill();     ctx.restore(); };   //小球运动函数 依据圆心坐标和半径绘制 var move = (ball) => {     var x = ball.x,         y = ball.y,         r = ball.r,         color = ball.color,         spdX = ball.speedX,         spdY = ball.speedY;     x += spdX;     y += spdY;     //边界处理     if(x - r < 0 || x + r > ww) spdX = - spdX;     if(y - r < 0 || y + r > hh) spdY = - spdY;     //记录小球变更数据     ball.x = x;     ball.y = y;     ball.speedX = spdX;     ball.speedY = spdY;     //绘制变更后的小球     drawBall(x,y,r,color); };   //渲染函数 var render = () => {     ctx.clearRect(0,0,ww,hh); //擦除画布     //双for循环检测球与球间是否碰撞     for(var j = 0; j < balls.length; j ++) {         for(var k = 0; k < balls.length; k ++) {             //两球间的圆心点坐标间距             var dx = balls[j].x - balls[k].x, dy = balls[j].y - balls[k].y;             //两球间的圆心距离             var distance = Math.sqrt(dx * dx + dy * dy);             //若距离小于两球半径之和则判为碰撞，令运动方向和原来的互反             if(distance < (balls[j].r + balls[k].r)) {                 balls[j].speedX = -balls[j].speedX;             balls[j].speedY = -balls[j].speedY;             balls[k].speedX = -balls[k].speedX;             balls[k].speedY = -balls[k].speedY;             }         }         move(balls[j]); //移动小球     }     //请求关键帧动画     raf = requestAnimationFrame(render); };   //画布单击时生成小球 canv.onclick = (e) => {     total --;     if(total < 0) return;     cancelAnimationFrame(raf);     var x = e.offsetX, y = e.offsetY, r = 20, color = `#${Math.random().toString(16).substr(-6)}`;     //防止小球太靠近边缘     if(x < 25) x = 25;     if(x > ww - 25) x = ww - 25;     if(y < 25) y = 25;     if(y > hh - 25) y = hh - 25;     balls.push({x: x, y: y, r: r, color: color, speedX: speed(), speedY: speed()});     render(); }; </script>

马黑黑

小球碰撞后的运动形态在本例中简化为：碰撞画小球的运动方向与原来的运动方向互反。

但小球碰撞后的运动形态是相当复杂的，需要考虑的因素很多。例如，质量、加重力、摩擦力、撞击角度，还有防止小球重叠及沿边线滑行等等，会涉及到很多高阶理数知识。

本例，由于不考虑上述这些诸多因素，小球碰撞后的运动出现一些有趣的现象，比如两两纠缠、沿边线滑行等。两两纠缠，偶尔是三个或更多小球纠缠在一处，这种情况需要合适的外力撞击，也就是另一个小球撞走其中的一个，可以将纠缠的小球打散，有时候需要这样两三次的碰撞。沿边线滑行可以避免，本例没有加入这个纠偏机制。

红影

又是个带互动的代码，有趣

红影

看到了小球纠缠，在被另一个小球棒打鸳鸯前，会携手同行

红影

看到了沿边线滑行，浅接触的滑行能被撞击改变滑行。深接触的滑行，被撞击后也很难脱身，但是可以被小球纠缠带离滑行状态。

红影

沿边线滑行的少，纠缠的多。纠缠被撞开容易，滑行被带出来难。

马黑黑

红影 发表于 2024-4-13 10:25
沿边线滑行的少，纠缠的多。纠缠被撞开容易，滑行被带出来难。

滑行的贷不出来了的

马黑黑

红影 发表于 2024-4-13 10:22
看到了沿边线滑行，浅接触的滑行能被撞击改变滑行。深接触的滑行，被撞击后也很难脱身，但是可以被小球纠缠 ...

运动就是这么奇妙，有如人生：有时候被带偏了，轻则可得脱身，重则深陷其中

马黑黑

红影 发表于 2024-4-13 10:16
又是个带互动的代码，有趣

可以晚上一阵子，即便只是观看

马黑黑

红影 发表于 2024-4-13 10:17
看到了小球纠缠，在被另一个小球棒打鸳鸯前，会携手同行

这叫什么来着，一场浪漫的邂逅

红影

马黑黑 发表于 2024-4-13 12:01
滑行的贷不出来了的

可以带出来的，我留神多看了一会，几乎都能带出来的。

马黑黑

红影 发表于 2024-4-13 13:10
可以带出来的，我留神多看了一会，几乎都能带出来的。

酱紫呀？我倒没认真看过太久

红影

马黑黑 发表于 2024-4-13 12:02
运动就是这么奇妙，有如人生：有时候被带偏了，轻则可得脱身，重则深陷其中

这说法很有意思，还真是这么回事呢

红影

马黑黑 发表于 2024-4-13 12:03
可以晚上一阵子，即便只是观看

是啊，也很好玩，看着这些小球演绎人生

马黑黑

红影 发表于 2024-4-13 13:10
这说法很有意思，还真是这么回事呢

人生写照

马黑黑

红影 发表于 2024-4-13 13:11
是啊，也很好玩，看着这些小球演绎人生

红影

马黑黑 发表于 2024-4-13 12:05
这叫什么来着，一场浪漫的邂逅

这样浪漫的邂逅还挺容易就看到呢

马黑黑

红影 发表于 2024-4-13 13:12
这样浪漫的邂逅还挺容易就看到呢

概率还不低，符合当下社会潮流

红影

马黑黑 发表于 2024-4-13 13:11
人生写照

一切看似由机遇决定的，其实按行进线路，很多相遇却是必然。

马黑黑

红影 发表于 2024-4-13 13:14
一切看似由机遇决定的，其实按行进线路，很多相遇却是必然。

是的，数理规则