JavaScript模拟实现自由落体效果


Posted in Javascript onAugust 28, 2018

本文实例为大家分享了js实现自由落体效果的具体代码,供大家参考,具体内容如下

1.效果图

JavaScript模拟实现自由落体效果

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 相关文章推荐
关于js datetime的那点事
Nov 15 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 #Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 #Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 #Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 #Javascript
微信小程序多音频播放进度条问题
Aug 28 #Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 #Javascript
vue表单自定义校验规则介绍
Aug 28 #Javascript
You might like
PHP面向对象编程快速入门
2006/10/09 PHP
如何在PHP程序中防止盗链
2008/04/09 PHP
PHP实现简单登录界面
2019/10/23 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
js身份证验证超强脚本
2008/10/26 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
flexigrid 参数说明
2010/11/23 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
vue中appear的用法
2017/08/17 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
交通法规咨询中心工作职责
2013/11/27 职场文书
中班中秋节活动反思
2014/02/18 职场文书
二人合伙经营协议书
2014/09/13 职场文书
综治工作汇报材料
2014/10/27 职场文书
党员违纪检讨书
2015/05/05 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
Python实现socket库网络通信套接字
2021/06/04 Python