专栏首页ccylovehsJavaScript模拟自由落体

JavaScript模拟自由落体

1.效果图

2.实现分析

利用Canvas画圆球、地面;

1.下落过程

物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能

重力势能 Ep = mgh

动能   Ek = (1/2)mv^2

速度右0增加至gt

此间需要计算浏览器每次渲染的圆球y坐标

y = (1/2)gt^2

2.反弹过程

动能转化成重力势能

速度是逐渐减少直至为0

本打算设置 y = (1/2)g(t-t1)^2,t1为下落或者反弹消耗的时长

但是实际呈现的效果却不尽人意,应该是反弹位移计算有误,经反复思考无果(若哪位大拿有更好的实现方式欢迎评论告知)

所以决定将下落过程的位移保存在一个数组里,待反弹时再逐一取出赋值

3.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: rgba(0, 0, 0, 1);
        }
        #canvas{
            display: block;
            margin: 10px auto;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600" height="600">your browser is not support canvas</canvas>
<script type="text/javascript">
    //自由落体 H=(gt^2)/2 动能 Ek=(mv^2)/2 重力势能:Ep = mgh
    let x=300,y=60,                 //圆心坐标
        minHeight = 60,             //最小下落位移
        maxHeight = 446,            //最大下落位移
        dir = true;                 //dir true下落,false为弹起
    (function(){
        let canvas= document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        draw(ctx);
    })();
    function draw(ctx){
        let currentTime = new Date().getTime();     //开始毫秒数,折返记录一次currentTime
        let arr_y = [];                             //设置下落位移的数组
        window.requestAnimationFrame(function init(){
            if(dir){
                if(y >= maxHeight){
                    dir = false;
                    currentTime = new Date().getTime();
                }else{
                    y = y + Math.pow((new Date().getTime() - currentTime)/1000,2)*10/2;
                    arr_y.push(y);
                }
            }else{
                if(y <= minHeight){
                    dir = true;
                    currentTime = new Date().getTime();
                }else{
                    y = arr_y.splice(-1,1)[0] || 60;
                }
            }
            drawArc(ctx,x,y);
            requestAnimationFrame(init);
        });
    }
    //绘制圆球和地面
    function drawArc(ctx,x,y){
        ctx.clearRect(0, 0, 600, 600);
        ctx.beginPath();
        ctx.arc(x,y,50,0,Math.PI*2);
        ctx.fillStyle='#98adf0';
        ctx.fill();
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = '#ffffff';
        ctx.moveTo(0,500);
        ctx.lineTo(600,500);
        ctx.lineWidth = 4;
        ctx.stroke();
        ctx.closePath();
        ctx.save();
    }
</script>
</body>
</html>

4.结语

虽然只是一个简单的下落和弹起,但是为了弹起位移的实现整整花费本人6天的时间(主要是每天都思考怎么计算弹起位移)

主要开始的思路一直关注在

下落位移 (开口线上抛物线方程)

y = (1/2)gt^2

思考反弹的位移应该改是将抛物线沿x轴右移t1,得出

y = (1/2)g(t-t1)^2

有兴趣的同学可以试试看看效果

浏览器渲染反弹的效果不尽人意,所以一直没想出计算的位移方法,故使用数组实现

欢迎纠错~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript实现iphone时钟

    http://www.w3school.com.cn/tags/html_ref_canvas.asp

    Jack Chen
  • linux环境下安装tomcat并配置tomcat日志分割

    ./configure  如果此步骤报错则根据提示对应解决,一般情况下是系统没有安装gcc

    Jack Chen
  • 再也不用被this苦恼了

    前端编程对于this再熟悉不过了,今日来个老调重弹温故知新,肯定有很多大佬已经完全吃透了this原理,敬请出门左拐。对于理解this似懂非懂的同学可以借鉴一波

    Jack Chen
  • canvas之clip使用 原

    裁切路径和普通的canvas图形差不多,不同的是它的作用是遮罩,用来隐藏路径以外的部分。 clip() 将当前正在构建的路径转换为当前的裁剪路径,默认情况下,...

    tianyawhl
  • canvas绘制闹钟-方法2 原

     drawBackground()里面的ctx.save() 为什么不能放到上面的原因:一般ctx.save() 与ctx.restore()是成对出现的。ct...

    tianyawhl
  • 利用canvas的fillText属性绘制文字并实现居中和清空画布

    其实上半部分是绘制圆环,最后 8 行才是文字部分,可以设置字体样式、颜色、是否居中等。

    德顺
  • Canvas绘制圆点线段 思路二 setLineDash方法+lineCap设置扩展

    他自己实现了一种思路,然后咨询我有没有更好的思路。 先看看他的思路是如何实现的,大致代码如下:

    用户3158888
  • js如何操作本地程序

    假设有这样一个产品,一个web和一个winform客户端,在客户在web的网页上面点击启动客户端来处理,这个时候开始调用本地的客户端,来完成指定的工作。这种场景...

    付威
  • JAVASCRIPT生成图形验证码

    ihoey
  • HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技...

    张果

扫码关注云+社区

领取腾讯云代金券