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.代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             padding: 0;
  9.             margin: 0;
  10.             background-color: rgba(0, 0, 0, 1);
  11.         }
  12.         #canvas{
  13.             display: block;
  14.             margin: 10px auto;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <canvas id="canvas" width="600" height="600">your browser is not support canvas</canvas>
  20. <script type="text/javascript">
  21.     //自由落体 H=(gt^2)/2 动能 Ek=(mv^2)/2 重力势能:Ep = mgh
  22.     let x=300,y=60,                 //圆心坐标
  23.         minHeight = 60,             //最小下落位移
  24.         maxHeight = 446,            //最大下落位移
  25.         dir = true;                 //dir true下落，false为弹起
  26.     (function(){
  27.         let canvas= document.getElementById('canvas');
  28.         let ctx = canvas.getContext('2d');
  29.         draw(ctx);
  30.     })();
  31.     function draw(ctx){
  32.         let currentTime = new Date().getTime();     //开始毫秒数,折返记录一次currentTime
  33.         let arr_y = [];                             //设置下落位移的数组
  34.         window.requestAnimationFrame(function init(){
  35.             if(dir){
  36.                 if(y >= maxHeight){
  37.                     dir = false;
  38.                     currentTime = new Date().getTime();
  39.                 }else{
  40.                     y = y + Math.pow((new Date().getTime() - currentTime)/1000,2)*10/2;
  41.                     arr_y.push(y);
  42.                 }
  43.             }else{
  44.                 if(y <= minHeight){
  45.                     dir = true;
  46.                     currentTime = new Date().getTime();
  47.                 }else{
  48.                     y = arr_y.splice(-1,1)[0] || 60;
  49.                 }
  50.             }
  51.             drawArc(ctx,x,y);
  52.             requestAnimationFrame(init);
  53.         });
  54.     }
  55.     //绘制圆球和地面
  56.     function drawArc(ctx,x,y){
  57.         ctx.clearRect(0, 0, 600, 600);
  58.         ctx.beginPath();
  59.         ctx.arc(x,y,50,0,Math.PI*2);
  60.         ctx.fillStyle='#98adf0';
  61.         ctx.fill();
  62.         ctx.save();
  63.         ctx.beginPath();
  64.         ctx.strokeStyle = '#ffffff';
  65.         ctx.moveTo(0,500);
  66.         ctx.lineTo(600,500);
  67.         ctx.lineWidth = 4;
  68.         ctx.stroke();
  69.         ctx.closePath();
  70.         ctx.save();
  71.     }
  72. </script>
  73. </body>
  74. </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. Delphi 域名解析为IP地址

    花生壳:1.LJSZForm-Lable1-Caption改成 “IP地址或域名:”2.LJSZForm-BitBtn1Click-注释掉--else if IsIP(Trim(IPEdit.Text ...

  2. GBDT（MART） 迭代决策树详解

    在网上看到一篇对从代码层面理解gbdt比较好的文章,转载记录一下: GBDT(Gradient Boosting Decision Tree) 又叫 MART(Multiple Additive Re ...

  3. springboot 简单使用 activemq 接收消息

    1.在pom.xml 加入配置文件 <dependency> <groupId>org.springframework.boot</groupId> <art ...

  4. python模块：time

    # encoding: utf-8 # module time # from (built-in) # by generator 1.145 """ This modul ...

  5. VS2015 类模板保存位置

    如果安装在C盘,则是如下位置: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\ItemTemplates\CSharp ...

  6. maven理论基础

    Maven介绍 Maven是一个Java项目管理和构建工具 Maven使用pom.xml定义项目内容,并使用预设的目录结构 在Maven中声明一个依赖项可以自动下载并导入classpath Maven ...

  7. Android数据存储之SQLite使用

    SQLite是D.Richard Hipp用C语言编写的开源嵌入式数据库引擎.它支持大多数的SQL92标准,并且可以在所有主要的操作系统上运行. 在Android中创建的SQLite数据库存储在:/d ...

  8. 基于vue的颜色选择器vue-color-picker

    项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...

  9. Servlet案例3：验证码功能

    这里介绍简单的验证码功能 动态生成图片 一个简单的页面: <!DOCTYPE html> <html> <head> <meta charset=" ...

  10. OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 5.在控制节点上部署计算服务Nova

    计算服务Nova使用OpenStack Compute来托管和管理云计算系统. OpenStack Compute是基础架构即服务(IaaS)系统的主要部分. 主要模块用Python实现.OpenSt ...