本文實(shí)例為大家分享了js實(shí)現(xiàn)自由落體效果的具體代碼，供大家參考，具體內(nèi)容如下
1.效果圖
2.實(shí)現(xiàn)分析
利用Canvas畫圓球、地面；
1.下落過程
物理知識回顧，物體下落過程（不計(jì)損耗）由重力勢能轉(zhuǎn)換成動能
重力勢能 Ep = mgh
動能 Ek = (1/2)mv^2
速度右0增加至gt
此間需要計(jì)算瀏覽器每次渲染的圓球y坐標(biāo)
y = (1/2)gt^2
2.反彈過程
動能轉(zhuǎn)化成重力勢能
速度是逐漸減少直至為0
本打算設(shè)置 y = (1/2)g(t-t1)^2，t1為下落或者反彈消耗的時(shí)長
但是實(shí)際呈現(xiàn)的效果卻不盡人意，應(yīng)該是反彈位移計(jì)算有誤，經(jīng)反復(fù)思考無果（若哪位大拿有更好的實(shí)現(xiàn)方式歡迎評論告知）
所以決定將下落過程的位移保存在一個數(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 動能 Ek=(mv^2)/2 重力勢能: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(); //開始毫秒數(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é)語
雖然只是一個簡單的下落和彈起，但是為了彈起位移的實(shí)現(xiàn)整整花費(fèi)本人6天的時(shí)間（主要是每天都思考怎么計(jì)算彈起位移）
主要開始的思路一直關(guān)注在
下落位移 （開口線上拋物線方程）
y = (1/2)gt^2
思考反彈的位移應(yīng)該改是將拋物線沿x軸右移t1，得出
y = (1/2)g(t-t1)^2
有興趣的同學(xué)可以試試看看效果
瀏覽器渲染反彈的效果不盡人意，所以一直沒想出計(jì)算的位移方法，故使用數(shù)組實(shí)現(xiàn)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
