JavaScript模拟实现自由落体效果
2018-08-28 14:14
796 查看
本文实例为大家分享了js实现自由落体效果的具体代码,供大家参考,具体内容如下
1.效果图
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模拟实现键盘打字效果
- Dom利用javascript实现模拟弹出对话框效果的代码,类似JQuery中的dialog!
- JavaScript中通过鼠标事件实现模拟拖放效果
- JavaScript模拟实现键盘打字效果
- JavaScript利用装饰模拟实现私有状态
- 原生javascript实现图片弹窗交互效果
- javascript实现上传图片前的预览效果
- Javascript 命令模式结合HTML5实现动画效果
- JavaScript实现重力和弹性效果
- javascript实现的弹出层背景置灰-模拟(easyui dialog)
- javascript实现瀑布流效果
- javascript+jQuery实现360开机时间显示效果
- 利用JavaScript脚本实现滚屏效果的方法
- 基于javascript实现动态时钟效果
- JavaScript实现走马灯效果[无缝连接、循环滚动]
- JavaScript实现页面滚动图片加载(仿lazyload效果)
- javascript放大镜效果的简单实现
- JavaScript实现向右伸出的多级网页菜单效果
- JavaScript实现下雪(Snow)效果
- javascript实现延时显示提示框效果