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 相关文章推荐
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
js内置对象 学习笔记
Aug 01 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
jquery实现submit提交表单
Feb 03 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
javascript实现抢购倒计时程序
Aug 26 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 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
1.PHP简介
2006/10/09 PHP
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Python函数参数分类原理详解
2020/05/28 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
Python 远程开关机的方法
2020/11/18 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
驾驶员培训方案
2014/05/01 职场文书
法律专业自荐信
2014/06/03 职场文书
本科生求职信
2014/06/17 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
导游欢送词
2015/01/31 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
Python实现双向链表基本操作
2022/05/25 Python