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 相关文章推荐
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
解决小程序无法触发SESSION问题
Feb 03 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之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现在windows下操作word的方法
2015/04/28 Python
python回调函数用法实例分析
2015/05/09 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
计算机求职信
2013/12/01 职场文书
采购主管工作职责
2013/12/12 职场文书
英文演讲稿开场白
2014/08/25 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
求职意向书范本
2015/05/11 职场文书
学会感恩主题班会
2015/08/12 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang