html5--质点运动与反射

匀速直线运动：

         物体在一条直线上运动，且在任意相等的时间间隔内位移相等，这种运行称为匀速直线运动。

         在台球的实验中，按照如下方式定义小球：

var ball = {
            position: { x: 100, y: 100 },
            r: 15
        };

    其中包含了小球的位置和半径两个属性，因为要用小球来做物理实验，所以为小球增加两上属性，VX和VY，分别代表小球沿X轴方向和Y轴方向上的速度，这在物理学上叫做　运动独立性原理：

var ball = {
            position: { x: 100, y: 100 },
            r: 15,
            vx: 190,
            vy: 110
        };

代码中假定了小球沿X轴方向的速度为190,沿Y轴的方向上的速度为110.

  定义好了小球的速度，如何把它的运动状态体现在Canvas中呢？在以前的例子中，已经用到了Jscex来实现，这里我们继续使用。

  首先我们要引用类库文件：

 <script src="../../Scripts/jscex.jscexRequire.min.js" type="text/javascript"></script>

这样就可以使用Jscex了。

 <canvas id="myCanvas" width="600" height="500">
你的浏览器不支持canvas
</canvas>
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        var ball = {
            position: { x: 100, y: 100 },
            r: 15,
            vx: 190,
            vy: 110
        };
        var cyc = 10;
        var moveAsync = eval(Jscex.compile("async", function () {
            while (true) {
                    cxt.fillStyle = "rgba(0,0,0,.3)";
                    cxt.fillRect(0, 0, c.width, c.height);
                    cxt.fillStyle = "#fff";
                    cxt.beginPath();
                    cxt.arc(ball.position.x, ball.position.y, ball.r, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                    ball.position.x += ball.vx * cyc / 1000;
                    ball.position.y += ball.vy * cyc / 1000;
                    $await(Jscex.Async.sleep(cyc));
                           }
        }));
        moveAsync().start();
    </script>

也可以让小球往返不停的运动：

 <canvas id="myCanvas" width="600" height="500">
你的浏览器不支持canvas
</canvas>
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        var ball = {
            position: { x: 100, y: 100 },
            r: 15,
            vx: 190,
            vy: 110
        };
        var cyc = 10;
        var moveAsync = eval(Jscex.compile("async", function () {
            while (true) {
                while (ball.position.x < 600) {
                    cxt.fillStyle = "rgba(0,0,0,.3)";
                    cxt.fillRect(0, 0, c.width, c.height);
                    cxt.fillStyle = "#fff";
                    cxt.beginPath();
                    cxt.arc(ball.position.x, ball.position.y, ball.r, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                    ball.position.x += ball.vx * cyc / 1000;
                    ball.position.y += ball.vy * cyc / 1000;
                    $await(Jscex.Async.sleep(cyc));
                }
                while (ball.position.x > 0) {
                    cxt.fillStyle = "rgba(0,0,0,.3)";
                    cxt.fillRect(0, 0, c.width, c.height);
                    cxt.fillStyle = "#fff";
                    cxt.beginPath();
                    cxt.arc(ball.position.x, ball.position.y, 15, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                    ball.position.x -= ball.vx * cyc / 1000;
                    ball.position.y -= ball.vy * cyc / 1000;
                    $await(Jscex.Async.sleep(cyc));
                }
            }
        }));
        moveAsync().start();
    </script>

可以看到上面的代码共有3个while，从上到下依次无限循环执行下去，效果如下所示：

 

倘若小球和四壁碰撞，就会发生反射，反弹符合反射定律。

所以在Canvas中模拟的结果就是：当小球与上下壁相撞时，Y轴速度方向变成其反方向，大小写不变，X轴速度不变；当小球与左右两壁纸碰撞时，X轴速度方向变成其反方向，大小写不变，Y轴速度大小方向都不变，可以得出：

  cxt.fillStyle = "rgba(0,0,0,.3)";
                cxt.fillRect(0, 0, c.width, c.height);
                cxt.fillStyle = "#fff";
                cxt.beginPath();
                cxt.arc(ball.position.x, ball.position.y, ball.r, 0, Math.PI * 2, true);
                cxt.closePath();
                cxt.fill();

                if (ball.r + ball.position.x > c.width || ball.position.x < ball.r)
                    ball.vx *= -1;
                if (ball.r + ball.position.y > c.height || ball.position.y < ball.r)
                    ball.vy *= -1;
                ball.position.x += ball.vx * cyc / 1000;
                ball.position.y += ball.vy * cyc / 1000;

                $await(Jscex.Async.sleep(cyc));

这样小球永远逃不出Canvas画布的范围了，当然这是碰撞的一种特殊情况，因为碰撞面分别与X轴和Y轴平行，所以处理起来非常方便，如果遇到任意碰撞面，就不能这么简单地处理，在后面的例子中将进一步学习。