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轴平行,所以处理起来非常方便,如果遇到任意碰撞面,就不能这么简单地处理,在后面的例子中将进一步学习。

 

相关推荐
程序员的必经之路! 【限时优惠】 现在下单,还享四重好礼: 1、教学课件免费下载 2、课程案例代码免费下载 3、专属VIP学员群免费答疑 4、下单还送800元编程大礼包 【超实用课程内容】  根据《2019-2020年中国开发者调查报告》显示,超83%的开发者都在使用MySQL数据库。使用量大同时,掌握MySQL早已是运维、DBA的必备技能,甚至部分IT开发岗位也要求对数据库使用和原理有深入的了解和掌握。 学习编程,你可能会犹豫选择 C++ 还是 Java;入门数据科学,你可能会纠结于选择 Python 还是 R;但无论如何, MySQL 都是 IT 从业人员不可或缺的技能!   套餐中一共包含2门MySQL数据库必学的核心课程(共98课时)   课程1:《MySQL数据库从入门到实战应用》   课程2:《高性能MySQL实战课》   【哪些人适合学习这门课程?】  1)平时只接触了语言基础,并未学习任何数据库知识的人;  2)对MySQL掌握程度薄弱的人,课程可以让你更好发挥MySQL最佳性能; 3)想修炼更好的MySQL内功,工作中遇到高并发场景可以游刃有余; 4)被面试官打破沙锅问到底的问题问到怀疑人生的应聘者。 【课程主要讲哪些内容?】 课程一:《MySQL数据库从入门到实战应用》 主要从基础篇,SQL语言篇、MySQL进阶篇三个角度展开讲解,帮助大家更加高效的管理MySQL数据库。 课程二:《高性能MySQL实战课》主要从高可用篇、MySQL8.0新特性篇,性能优化篇,面试篇四个角度展开讲解,帮助大家发挥MySQL的最佳性能的优化方法,掌握如何处理海量业务数据和高并发请求 【你能收获到什么?】  1.基础再提高,针对MySQL核心知识点学透,用对; 2.能力再提高,日常工作中的代码换新貌,不怕问题; 3.面试再加分,巴不得面试官打破沙锅问到底,竞争力MAX。 【课程如何观看?】  1、登录CSDN学院 APP 在我的课程中进行学习; 2、移动端:CSDN 学院APP(注意不是CSDN APP哦)  本课程为录播课,课程永久有效观看时长 【资料开放】 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化。  下载方式:电脑登录课程观看页面,点击右侧课件,可进行课程资料的打包下载。
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页