Html5--动能守恒不守恒你说了算

完全弹性碰撞在理想情况下的物理过程满足动量守恒和能量守恒。

如果被碰撞的小球原来静止，则碰撞后该小球具有了与碰撞小球一样大小的速度，而碰撞小球则停止。代码模拟如下：

<canvas id="myCanvas" width="600" height="500">
你的浏览器不支持canvas
</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var cxt = canvas.getContext("2d");
        var r = 15;
        var ball1 = {
            x: 20,
            y: 285,
            r: r,
            vx: 120,
            vy: 0
        };
        var ball2 = {
            x: 400,
            y: 285,
            r: r,
            vx: -30,
            vy: 0
        };
        var balls = [];
        balls.push(ball1);
        balls.push(ball2);
        cxt.fillStyle = "#030303";
        cxt.fillRect(0, 0, canvas.width, canvas.height);
        function init() {
            cxt.fillStyle = "#fff";
            for (i in balls) {
                cxt.beginPath();
                cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                cxt.closePath();
                cxt.fill();
            }
        }
        init();
        var cyc = 20;
        var moveAsync = eval(Jscex.compile("async", function () {
            while (true) {
                cxt.fillStyle = "rgba(0, 0, 0, .3)";
                cxt.fillRect(0, 0, canvas.width, canvas.height);
                cxt.fillStyle = "#fff";

                if (Math.abs(ball1.x - ball2.x) <= 2 * r) {
                    var temp = ball1.vx;
                    ball1.vx = ball2.vx;
                    ball2.vx = temp;
                }
                for (i in balls) {
                    balls[i].x += balls[i].vx * cyc / 1000;
                    cxt.beginPath();
                    cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                }
                $await(Jscex.Async.sleep(cyc));
            }
        }));
        moveAsync().start();
    </script>

运行效果如下：

碰撞前：

碰撞后：

这里的在已知的结果下进行编写的，在真实的物理引擎当中，需要给每个物体设定一个弹性系数和质量，然后根据弹性系数和质量计算碰撞之后的速度变化。

 

碰撞过程中物体往往会发生形变，还会发热、发声。因此在一般情况下，碰撞过程中中会有动能损失，即动能、机械能都不守恒，这类碰撞称为非弹性碰撞。代码模拟如下：

 <canvas id="myCanvas" width="600" height="500">
你的浏览器不支持canvas
</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var cxt = canvas.getContext("2d");
        var r = 15;
        var ball1 = {
            x: 20,
            y: 285,
            r: r,
            vx: 120,
            vy: 0
        };
        var ball2 = {
            x: 400,
            y: 285,
            r: r,
            vx: -30,
            vy: 0
        };
        var balls = [];
        balls.push(ball1);
        balls.push(ball2);
        cxt.fillStyle = "#030303";
        cxt.fillRect(0, 0, canvas.width, canvas.height);
        function init() {
            cxt.fillStyle = "#fff";
            for (i in balls) {
                cxt.beginPath();
                cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                cxt.closePath();
                cxt.fill();
            }
        }
        init();
        var cyc = 20;
        var moveAsync = eval(Jscex.compile("async", function () {
            while (true) {
                cxt.fillStyle = "rgba(0, 0, 0, .3)";
                cxt.fillRect(0, 0, canvas.width, canvas.height);
                cxt.fillStyle = "#fff";

                if (Math.abs(ball1.x - ball2.x) <= 2 * r) {
                    var momentumSummation = ball1.vx + ball2.vx;
                    var temp = ball2.vx;
                    ball2.vx = ball1.vx * 0.65;
                    ball1.vx = momentumSummation-ball2.vx;
                }
                for (i in balls) {
                    balls[i].x += balls[i].vx * cyc / 1000;
                    cxt.beginPath();
                    cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                }
                $await(Jscex.Async.sleep(cyc));
            }
        }));
        moveAsync().start();
    </script>

碰撞后两物体结合在一起，动能损失最大，这种碰撞叫做完全非弹性碰撞。

代码模拟如下：

 <canvas id="myCanvas" width="600" height="500">
你的浏览器不支持canvas
</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var cxt = canvas.getContext("2d");
        var r = 15;
        var ball1 = {
            x: 20,
            y: 285,
            r: r,
            vx: 120,
            vy: 0
        };
        var ball2 = {
            x: 400,
            y: 285,
            r: r,
            vx: -30,
            vy: 0
        };
        var balls = [];
        balls.push(ball1);
        balls.push(ball2);
        cxt.fillStyle = "#030303";
        cxt.fillRect(0, 0, canvas.width, canvas.height);
        function init() {
            cxt.fillStyle = "#fff";
            for (i in balls) {
                cxt.beginPath();
                cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                cxt.closePath();
                cxt.fill();
            }
        }
        init();
        var cyc = 20;
        var moveAsync = eval(Jscex.compile("async", function () {
            while (true) {
                cxt.fillStyle = "rgba(0, 0, 0, .3)";
                cxt.fillRect(0, 0, canvas.width, canvas.height);
                cxt.fillStyle = "#fff";

                if (Math.abs(ball1.x - ball2.x) <= 2 * r) {
                    var momentumSummation = ball1.vx + ball2.vx;
                    //var temp = ball2.vx;
                    ball2.vx = momentumSummation / 2;
                    ball1.vx = momentumSummation / 2;
                }
                for (i in balls) {
                    balls[i].x += balls[i].vx * cyc / 1000;
                    cxt.beginPath();
                    cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                }
                $await(Jscex.Async.sleep(cyc));
            }
        }));
        moveAsync().start();
    </script>

运行效果如下：

碰撞前：

碰撞后：