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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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
Windows下的PHP5.0详解
2006/11/18 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
显示、隐藏密码
2006/07/01 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
七年级数学教学反思
2014/01/22 职场文书
网页美工求职信
2014/02/15 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
关于保护环境的建议书
2014/05/13 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
国庆横幅标语
2014/10/08 职场文书
2014年大学生工作总结
2014/11/20 职场文书
如何写辞职书
2015/02/26 职场文书
英文版辞职信
2015/02/28 职场文书
早恋主题班会
2015/08/14 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis