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

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

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

欢迎纠错~

JavaScript模拟自由落体的更多相关文章

  1. 使用CSS3动画模拟实现小球自由落体效果

    使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...

  2. Javascript摸拟自由落体与上抛运动 说明!

    JavaScript 代码 //**************************************** //名称:Javascript摸拟自由落体与上抛运动! //作者:Gloot //邮箱 ...

  3. javascript---在自由落体实现

    实现一些简单的物业自由落体需要理解: clientHeight:浏览器客户机的整体高度 offsetHeight:物(实例div)高低 offsetTop:从对象client最顶层的距离 简单demo ...

  4. canvas动画:自由落体运动

    经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...

  5. 洛谷——P1033 自由落体

    P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...

  6. js实现自由落体

    实现自由落体运动需要理解的几个简单属性: clientHeight:浏览器客户端整体高度 offsetHeight:对象(比如div)的高度 offsetTop:对象离客户端最顶端的距离 <!d ...

  7. Javascript模拟继承（赠送.net吐槽一段）

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  8. Android游戏开发：物理游戏之重力系统开发--圆形自由落体Demo

    本节为大家提供有关物理游戏的知识,讲解了一个简单的圆形自由落体Demo的编写.. Java代码 package com.himi; import java.util.Random; import ja ...

  9. 用原生javascript模拟经典FC游戏公路争霸

    #用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...

随机推荐

  1. Android SDK Manager 无法打开

    环境变量已经设置(安装JDK8后 其实无需设置,之前记得Win7有个巧妙的地方是创建了3个快捷方式到某文件夹,现在Win10上直接将java.exe等放到System32目录下). 但是依然不行,网上 ...

  2. 一不注意,在Unity3D中DllImport 引起的Bug.

    单要说这个Bug是很简单,但是得从头说起. 一些大型的网络游戏,或者加载比较多的一些场景时,如果要等待所有模型,贴图等各种资源文件加载完毕才能执行游戏,对用户将会是一个很头大的事情.所以就需要用到动态 ...

  3. Java流程控制语句

    流程控制语句 内容: if... if...else if...else if...else switch...case for while do...while 分支结构if 接下来要学习的if条件 ...

  4. Spring 的属性注入

    一.注入方式 (1)set方法注入 (2)构造函数注入 (3)p名称空间注入 (4)spel注入 二.复杂类型注入

  5. 2019.02.15 bzoj5210: 最大连通子块和（链分治+ddp）

    传送门 题意:支持单点修改,维护子树里的最大连通子块和. 思路: 扯皮: bzojbzojbzoj卡常差评. 网上的题解大多用了跟什么最大子段和一样的转移方法. 但是我们实际上是可以用矩阵转移的传统d ...

  6. 初识RabbitMQ

    1.安装 rabbitmq官网:http://www.rabbitmq.com/ 下载地址:https://packagecloud.io/rabbitmq 下载rabbitmq-server 安装脚 ...

  7. Linux下nautilus的右键快捷菜单项设置

    某一天我的Linux更新完后, 我照常在文件夹下点击右键想打开终端, 却发现右键快捷菜单没有Open in terminal的菜单项了. 在网上查找了一下, 结合自己系统的情况发现了解决办法. 由于我 ...

  8. Java RMI 使用例子

    1.创建协议接口(UserService) /** * */ package com.junge.demo.rmi.protocol.service; import java.io.Serializa ...

  9. Centos7中docker开启远程访问

    在作为docker远程服务的centos7机器中配置: 1.在/usr/lib/systemd/system/docker.service,配置远程访问.主要是在[Service]这个部分,加上下面两 ...

  10. 【接口时序】1、软件与Verilog基本格式规范说明

    一. 说明 以前总是没有记录的习惯,导致遇到问题时总得重新回忆与摸索,大大降低了学习效率,从今天开始决定改掉这个坏毛病,认真记录自己的Verilog学习之路,希望自己能一直坚持下去. 二. 软件资源与 ...