本文實例為大家分享了js實現(xiàn)自由落體效果的具體代碼，供大家參考，具體內(nèi)容如下

成都創(chuàng)新互聯(lián)專注于普安企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站開發(fā)。普安網(wǎng)站建設(shè)公司,為普安等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站設(shè)計，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

1.效果圖

2.實現(xiàn)分析

利用Canvas畫圓球、地面；

1.下落過程

物理知識回顧，物體下落過程（不計損耗）由重力勢能轉(zhuǎn)換成動能

重力勢能 Ep = mgh

動能  Ek = (1/2)mv^2

速度右0增加至gt

此間需要計算瀏覽器每次渲染的圓球y坐標

y = (1/2)gt^2

2.反彈過程

動能轉(zhuǎn)化成重力勢能

速度是逐漸減少直至為0

本打算設(shè)置 y = (1/2)g(t-t1)^2，t1為下落或者反彈消耗的時長

但是實際呈現(xiàn)的效果卻不盡人意，應(yīng)該是反彈位移計算有誤，經(jīng)反復(fù)思考無果（若哪位大拿有更好的實現(xiàn)方式歡迎評論告知）

所以決定將下落過程的位移保存在一個數(shù)組里，待反彈時再逐一取出賦值

3.代碼實現(xiàn)

 
 
 


your browser is not support canvas

4.結(jié)語

雖然只是一個簡單的下落和彈起，但是為了彈起位移的實現(xiàn)整整花費本人6天的時間（主要是每天都思考怎么計算彈起位移）

主要開始的思路一直關(guān)注在

下落位移 （開口線上拋物線方程）

y = (1/2)gt^2

思考反彈的位移應(yīng)該改是將拋物線沿x軸右移t1，得出

y = (1/2)g(t-t1)^2

有興趣的同學(xué)可以試試看看效果

瀏覽器渲染反彈的效果不盡人意，所以一直沒想出計算的位移方法，故使用數(shù)組實現(xiàn)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。