（canvas）两小球碰撞后的速度问题研究

这两天在研究canvas碰撞

先把小球开始运动的图拿出来

 

参考了一下别的的代码，在两个小球碰撞处理上，我觉得不完善

怎么样处理才算完善呢，当然是要用高中物理学的动量守恒了和机械能守恒了

机械能守恒我其实忘了，特地百度了下

用高中老师的话就是，联立，解得，PS：结果我是网上找的，也存在看错的可能

 

 碰撞的逻辑我来简要所以下

1.当小球撞到墙，对应的x轴或者y轴的速度成 -1，效果是反弹

2.当两个小球碰撞时，由上面的公式，我们会分别计算speedX和speedY

由于动量守恒，我们再效果图中能发现，同一方向相撞，小球会马上获得一个大的速度，而打球减速并不明显

最后慢慢传递，很多球都停止了，但是最后一般来说，还是有一个球载运动的

 

 

最后小球还是会有重叠的情况，我再分析下。。。

我觉得像子弹打物块一样，接触物体的发生了变化，但是子弹还是有向前的速度，且速度比物块大

两个小球接触的时候也是这样，球1撞到球2，但是球1的速度还是比2快，于是球1就叠到球2上了

然后在叠的过程中，在逻辑里还是处于碰撞，还在发生能量转移。

事实证明，叠起来的球过了几秒就静止了，

通常是速度大的小球，接触到速度小的大球，接触后小球的速度还是别大球快。于是叠在一起，叠在一起后，还在进行能量转换，最后保持平衡，

静止，或者用同样的速度运行。所以出现了叠在一起不分开的情况

 

当一个小球的速度够快，碰撞大球的时候才会出现以上情况

当我把球的半径改成一样

应该就不会发生了

 

<script type="text/javascript">
    var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d");
    //随机函数
    function randomNum (m,n) {
        return Math.floor(Math.random() * (n - m + 1) + m);
    }
    //创建小球类
    function Ball () {
        //随机小球半径
        this.r = randomNum(20,30);
        //随机颜色
        this.color = 'rgb(' + randomNum(0,255) + ',' + randomNum(0,255) + ',' + randomNum(0,255) + ')';
        //随机小球的位置
        this.x = randomNum(this.r,canvas.width-this.r);
        this.y = randomNum(this.r,canvas.height-this.r);
        //小球速度X轴1和-1;
        this.speedX = randomNum(2,5) * randomNum(0,1) ? 1 : -1;
        this.speedY = randomNum(2,5) * randomNum(0,1) ? 1 : -1;

    }
    //小球移动
    Ball.prototype.move = function () {
        this.x += this.speedX;
        this.y += this.speedY;
        //判断是否碰到边界
        //左边界
        if (this.x <= this.r) {
            this.x = this.r;
            //反弹
            this.speedX *= -1;
        }
        //右边界
        if (this.x >= canvas.width-this.r) {
            this.x = canvas.width-this.r;
            this.speedX *= -1;
        }
        if (this.y <= this.r) {
            this.y = this.r;
            this.speedY *= -1;
        }
        if (this.y >= canvas.height-this.r) {
            this.y = canvas.height-this.r;
            this.speedY *= -1;
        }
    }
    //绘制小球
    Ball.prototype.drawBall = function () {
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
        ctx.fillStyle = this.color;
        ctx.fill();             
    }
    //创建小球的对象
    var balls = [];
    for (var i = 0;i < 5;i++) {
        var ball = new Ball();
        balls.push(ball);
    }
    //让小球移动
    setInterval(function () {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for (var i = 0;i < balls.length;i++) {
            balls[i].move();
            balls[i].drawBall();
            //移动后检测小球碰撞反弹
            for (j = 0;j < balls.length;j++) {
                //判断不是同一个球
                if (balls[i] == balls[j]) {
                    continue;//不做碰撞检测
                }
                //碰撞检测
                if (ballCrash(balls[i],balls[j])) {
                    /*
                     1.物理公式动量守恒，假设每个球的质地均匀，那么小球的质量与半径有关
                     2.我们用1一次方的算法，实际平面球质量和r的平方有关，立体球和r的三次方有关
                     3.由动量守恒，m1*v1+m2*v2=m1*v1'+m2*v2'
                     4.机械能守恒，平方我就不写了，两个方程联立
                     */
                    var fzx=(balls[i].r - balls[j].r)*balls[i].speedX + 2*balls[j].r*balls[j].speedX;
                    var fzx2=2*balls[i].r*balls[i].speedX+(balls[i].r - balls[j].r)*balls[j].speedX;
                    var fzy=(balls[i].r - balls[j].r)*balls[i].speedY + 2*balls[j].r*balls[j].speedY;
                    var fzy2=2*balls[i].r*balls[i].speedY+(balls[i].r - balls[j].r)*balls[j].speedY;
                    var fm=balls[i].r + balls[j].r;

                    balls[i].speedX=(fzx/fm);
                    balls[i].speedY=(fzy/fm);
                    balls[j].speedX=(fzx2/fm);
                    balls[j].speedY=(fzy2/fm);              
                }
            }
        }
    },0.1)
  

    //碰撞检测
    function ballCrash (ball1,ball2) {
        //两个小球之间的距离
        var distance = Math.sqrt(Math.pow(ball1.x - ball2.x,2) + Math.pow(ball1.y - ball2.y,2));
        //两球的距离小于两个半径的和即为碰撞
        if (distance <= ball1.r + ball2.r) {
            return true;//碰撞
        } else{
            return false;//没有碰撞
        }
    }
</script>

 

重叠的情况用下面代码可以避免，但是有时候会出别的bug

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小球碰撞反弹</title>
    <style type="text/css">
        #canvas1{
            border: 4px dashed black;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas1" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d");
    //随机函数
    function randomNum (m,n) {
        return Math.floor(Math.random() * (n - m + 1) + m);
    }
    //创建小球类
    function Ball () {
        //随机小球半径
        this.r = randomNum(15,30);
        //随机颜色
        this.color = 'rgb(' + randomNum(0,255) + ',' + randomNum(0,255) + ',' + randomNum(0,255) + ')';
        //随机小球的位置
        this.x = randomNum(this.r,canvas.width-this.r);
        this.y = randomNum(this.r,canvas.height-this.r);
        //小球速度X轴1和-1;
        this.speedX = randomNum(2,5) * randomNum(0,1) ? 1 : -1;
        this.speedY = randomNum(2,5) * randomNum(0,1) ? 1 : -1;

    }
    //小球移动
    Ball.prototype.move = function () {
        this.x += this.speedX;
        this.y += this.speedY;
        //判断是否碰到边界
        //左边界
        if (this.x <= this.r) {
            this.x = this.r;
            //反弹
            this.speedX *= -1;
        }
        //右边界
        if (this.x >= canvas.width-this.r) {
            this.x = canvas.width-this.r;
            this.speedX *= -1;
        }
        if (this.y <= this.r) {
            this.y = this.r;
            this.speedY *= -1;
        }
        if (this.y >= canvas.height-this.r) {
            this.y = canvas.height-this.r;
            this.speedY *= -1;
        }
    }
    //绘制小球
    Ball.prototype.drawBall = function () {
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
        ctx.fillStyle = this.color;
        ctx.fill();             
    }
    //创建小球的对象
    var balls = [];
    for (var i = 0;i < 10;i++) {
        var ball = new Ball();
        balls.push(ball);
    }
    //让小球移动
    setInterval(function () {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for (var i = 0;i < balls.length;i++) {
            balls[i].move();
            balls[i].drawBall();
            //移动后检测小球碰撞反弹
            for (j = 0;j < balls.length;j++) {
                //判断不是同一个球
                if (balls[i] == balls[j]) {
                    continue;//不做碰撞检测
                }
                //碰撞检测
                if (ballCrash(balls[i],balls[j])) {
               
                    /*
                     1.物理公式动量守恒，假设每个球的质地均匀，那么小球的质量与半径有关
                     2.我们用1一次方的算法，实际平面球质量和r的平方有关，立体球和r的三次方有关
                     3.由动量守恒，m1*v1+m2*v2=m1*v1'+m2*v2'
                     4.机械能守恒，平方我就不写了，两个方程联立
                     */
                    var fzx=(balls[i].r - balls[j].r)*balls[i].speedX + 2*balls[j].r*balls[j].speedX;
                    var fzx2=2*balls[i].r*balls[i].speedX+(balls[i].r - balls[j].r)*balls[j].speedX;
                    var fzy=(balls[i].r - balls[j].r)*balls[i].speedY + 2*balls[j].r*balls[j].speedY;
                    var fzy2=2*balls[i].r*balls[i].speedY+(balls[i].r - balls[j].r)*balls[j].speedY;
                    var fm=balls[i].r + balls[j].r;

                    balls[i].speedX=(fzx/fm);
                    balls[i].speedY=(fzy/fm);
                    balls[j].speedX=(fzx2/fm);
                    balls[j].speedY=(fzy2/fm);              
                }
            }
        }
    },1)
  

    //碰撞检测
    function ballCrash (ball1,ball2) {

        //两个小球之间的距离
        var distance = Math.sqrt(Math.pow(ball1.x - ball2.x,2) + Math.pow(ball1.y - ball2.y,2));
        //两球的距离小于两个半径的和即为碰撞
        if (distance == ball1.r + ball2.r) {

            return true;//碰撞
        }else if( distance < ball1.r + ball2.r){
            if(Math.pow(ball1.speedX,2)+Math.pow(ball1.speedY,2)>Math.pow(ball2.speedX,2)+Math.pow(ball2.speedY,2)){
                if(ball1.speedX>0){
                    ball2.x=ball2.x+ball1.r + ball2.r - distance;
                    if(ball1.speedY > 0){
                        ball2.y=ball2.y+ball1.r + ball2.r - distance;
                    }else{
                        ball2.y=ball2.y-ball1.r - ball2.r + distance;
                    }
                }else{
                     ball2.x=ball2.x-ball1.r - ball2.r + distance;
                     if(ball1.speedY > 0){
                        ball2.y=ball2.y+ball1.r + ball2.r - distance;
                    }else{
                        ball2.y=ball2.y-ball1.r - ball2.r + distance;
                    }
                }
                
           }else{
                if(ball2.speedX>0){
                    ball1.x=ball1.x+ball1.r + ball2.r - distance;
                    if(ball2.speedY > 0){
                        ball1.y=ball1.y+ball1.r + ball2.r - distance;
                    }else{
                        ball1.y=ball1.y-ball1.r - ball2.r + distance;
                    }
                }else{
                     ball1.x=ball1.x-ball1.r - ball2.r + distance;
                     if(ball2.speedY > 0){
                        ball1.y=ball1.y+ball1.r + ball2.r - distance;
                    }else{
                        ball1.y=ball1.y-ball1.r - ball2.r + distance;
                    }
                }
           }
           return true;
        }
        else{
            return false;//没有碰撞
        }
    }

</script>
</html>