JS圆形碰撞算法的探讨及实现

也是做同一个东西,碰撞是又一个关键,受限于JS的执行速度,我们必须考虑CPU的承受能力。因为有这个想法,我一开始的思路是通过数学计算得到一个式子,用于求碰撞的位置,但是,当我假设运动是匀速直线时,得出来的是一个以时间t为未知数的一元四次方程,能解,但是很长很悲壮。更不要说匀加速运动了。

现在连续的数学方法走不通,就只有搜索,因为最终会表现到网页上物体位置的变化,而这个过程会消耗大量的资源,如果让搜索密度较大,并且每次搜索都向页面反馈的话,恐怕CPU承受不了,如果降低搜索密度,又会降低搜索的精确程度,最终影响碰撞的效果。于是,将其折中,搜索一定次数后,向页面反馈一次,这样一方面提高了精确程度,一方面也减小了CPU资源消耗。

这样一来,在哪里碰撞就变得很容易得到了,接下来的问题就是碰撞后物体的方向,和速度的大小。高中物理经常遇到两个物体对撞的问题,其实这里也大同小异,不过首先要做的,是将速度分解为沿两圆圆心连线方向和与该连线方向垂直的分速度,根据两分速度(矢量)相加等于合速度,还有到角公式tanα = (k1 – k2) / (1 + k1k2),可以算得分速度。

这时候,需要进行处理的就是圆心连线方向的分速度了,根据物理的动量守恒和能量守恒,可以算得碰撞之后的相应速度,最后,和与圆心连线垂直的分速度相加,即可得到碰撞后的速度(矢量)了。

上JS,这个是我用来计算碰撞后的速度的,里面有些东西没有上下代码,所以不能运行,仅供参考。

//获取相关数据
var p1 = c1.p, p2 = c2.p; //获取位置(坐标)
var v1 = c1.v, v2 = c2.v; //获取速度(矢量)
var m1 = c1.m, m2 = c2.m; //获取质量
var x1 = p1.x, x2 = p2.x, y1 = p1.y, y2 = p2.y; //位置坐标
var vx1 = v1.x, vx2 = v2.x, vy1 = v1.y, vy2 = v2.y; //速度

//计算两个圆圆心连线的斜率
var k;
var dx = x1 – x2;

//判断斜率是否存在
if (dx) k = (y1 – y2) / dx;
//如果不存在,则去尽可能大的值
else k = kmax;

//**速度分解

//*第一个圆
//圆心连线方向的分速度
var vox1 = apart(vx1, vy1);
var voy1 = vox1 * k;

//与连线方向垂直的分速度
var vpx1 = vx1 – vox1;
var vpy1 = vy1 – voy1;

//*第二个圆
//圆心连线方向的分速度
var vox2 = apart(vx2, vy2);
var voy2 = vox2 * k;

//与连线方向垂直的分速度
var vpx2 = vx2 – vox2;
var vpy2 = vy2 – voy2;

//碰撞后与连线方向垂直的分速度不变,连线方向的分速度变化
var vox1a = calculateV(m1, m2, vox1, vox2);
var vox2a = calculateV(m2, m1, vox2, vox1);

var voy1a = calculateV(m1, m2, voy1, voy2);
var voy2a = calculateV(m2, m1, voy2, voy1);

//重新复合速度
v1.x = vox1a + vpx1;
v1.y = voy1a + vpy1;
v2.x = vox2a + vpx2;
v2.y = voy2a + vpy2;

//告知动量变化量
var dp1 = sqrt(sqr(vox1a – vox1) + sqr(voy1a – voy1)) * m1;
var dp2 = sqrt(sqr(vox2a – vox2) + sqr(voy2a – voy2)) * m2;

c1.collideCallBack(dp1, c2);
c2.collideCallBack(dp2, c1);

//分解出与圆心连线方向的分速度的x方向速度
function apart(vx, vy) {
return (k * vy + vx) / (sqr(k) + 1);
}

//根据动量和能量守恒计算速度变化
function calculateV(m1, m2, v1, v2) {
return ((m1 – m2) * v1 + 2 * m2 * v2) / (m1 + m2);
}