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 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
详解Vue3使用axios的配置教程
Apr 29 Vue.js
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中文本操作的类
2007/03/17 PHP
关于svn冲突的解决方法
2013/06/21 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
python实现的简单抽奖系统实例
2015/05/22 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
精彩的英文自荐信
2014/01/30 职场文书
社会公德演讲稿
2014/05/20 职场文书
群众路线剖析材料
2014/09/30 职场文书
公务员检讨书
2014/11/01 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL