JavaScript模擬實(shí)現(xiàn)自由落體效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)自由落體效果的具體代碼,供大家參考,具體內(nèi)容如下
1.效果圖
2.實(shí)現(xiàn)分析
利用Canvas畫(huà)圓球、地面;
1.下落過(guò)程
物理知識(shí)回顧,物體下落過(guò)程(不計(jì)損耗)由重力勢(shì)能轉(zhuǎn)換成動(dòng)能
重力勢(shì)能 Ep = mgh
動(dòng)能 Ek = (1/2)mv^2
速度右0增加至gt
此間需要計(jì)算瀏覽器每次渲染的圓球y坐標(biāo)
y = (1/2)gt^2
2.反彈過(guò)程
動(dòng)能轉(zhuǎn)化成重力勢(shì)能
速度是逐漸減少直至為0
本打算設(shè)置 y = (1/2)g(t-t1)^2,t1為下落或者反彈消耗的時(shí)長(zhǎng)
但是實(shí)際呈現(xiàn)的效果卻不盡人意,應(yīng)該是反彈位移計(jì)算有誤,經(jīng)反復(fù)思考無(wú)果(若哪位大拿有更好的實(shí)現(xiàn)方式歡迎評(píng)論告知)
所以決定將下落過(guò)程的位移保存在一個(gè)數(shù)組里,待反彈時(shí)再逐一取出賦值
3.代碼實(shí)現(xiàn)
<!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 動(dòng)能 Ek=(mv^2)/2 重力勢(shì)能:Ep = mgh let x=300,y=60, //圓心坐標(biāo) 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(); //開(kāi)始毫秒數(shù),折返記錄一次currentTime let arr_y = []; //設(shè)置下落位移的數(shù)組 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.結(jié)語(yǔ)
雖然只是一個(gè)簡(jiǎn)單的下落和彈起,但是為了彈起位移的實(shí)現(xiàn)整整花費(fèi)本人6天的時(shí)間(主要是每天都思考怎么計(jì)算彈起位移)
主要開(kāi)始的思路一直關(guān)注在
下落位移 (開(kāi)口線上拋物線方程)
y = (1/2)gt^2
思考反彈的位移應(yīng)該改是將拋物線沿x軸右移t1,得出
y = (1/2)g(t-t1)^2
有興趣的同學(xué)可以試試看看效果
瀏覽器渲染反彈的效果不盡人意,所以一直沒(méi)想出計(jì)算的位移方法,故使用數(shù)組實(shí)現(xiàn)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js+html5實(shí)現(xiàn)的自由落體運(yùn)動(dòng)效果代碼
- javascript 實(shí)現(xiàn)自由落體的方塊效果
- 原生javascript運(yùn)動(dòng)函數(shù)的封裝示例【勻速、拋物線、多屬性的運(yùn)動(dòng)等】
- JS拋物線動(dòng)畫(huà)實(shí)例制作
- JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果示例
- JS小球拋物線軌跡運(yùn)動(dòng)的兩種實(shí)現(xiàn)方法詳解
- js彈性勢(shì)能動(dòng)畫(huà)之拋物線運(yùn)動(dòng)實(shí)例詳解
- js繪制購(gòu)物車(chē)拋物線動(dòng)畫(huà)
- JavaScript模擬重力狀態(tài)下拋物運(yùn)動(dòng)的方法
- Javascript摸擬自由落體與上拋運(yùn)動(dòng)原理與實(shí)現(xiàn)方法詳解
相關(guān)文章
郁悶!ionic中獲取ng-model綁定的值為undefined如何解決
很是郁悶!ionic中獲取ng-model綁定的值為undefined,如何解決?2016-08-08使用JavaScript實(shí)現(xiàn)Java的List功能(實(shí)例講解)
使用JavaScript實(shí)現(xiàn)Java的List功能(實(shí)例講解)。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11JS實(shí)現(xiàn)延遲隱藏功能的方法(類(lèi)似QQ頭像鼠標(biāo)放上展示信息)
下面小編就為大家分享一篇JS實(shí)現(xiàn)延遲隱藏功能的方法(類(lèi)似QQ頭像鼠標(biāo)放上展示信息),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12CORS cross-origin resourse sharing跨域資源共享解決
這篇文章主要為大家介紹了CORS cross-origin resourse sharing跨域資源共享的解決方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04js+canvas實(shí)現(xiàn)驗(yàn)證碼功能
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)驗(yàn)證碼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07JS 在數(shù)組插入字符的實(shí)現(xiàn)代碼(可參考JavaScript splice() 方法)
在數(shù)組插入字符,添加數(shù)組,刪除數(shù)組可以用slice自帶的方法。操作比較方便,這個(gè)代碼是作者通過(guò)push與shift方法實(shí)現(xiàn),只能是個(gè)思路,但不推薦這樣的方法。2009-12-12