本文實(shí)例講述了JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法。分享給大家供大家參考，具體如下：
這里利用JS語言在Html頁面中實(shí)現(xiàn)重力作用下落地后彈起的效果，如下所示：
在此例中主要涉及以下幾個(gè)問題：
1.給球體一個(gè)釋放初速度，如何實(shí)現(xiàn)越向下運(yùn)動(dòng)且在接觸邊緣之前，豎直方向上的速度speedY越大的效果？
答案：可以在計(jì)時(shí)器中，每及時(shí)一次，豎直方向上的速度speedY自增一個(gè)固定值來實(shí)現(xiàn)，下面代碼中speedY += 6;就是實(shí)現(xiàn)這個(gè)效果。
2.球體接觸地面（此例中指瀏覽器下邊緣）后，如何實(shí)現(xiàn)速度反向效果？
答案：接觸地面后，將方向速度置為當(dāng)前速度的反方向即可，代碼if (iW >= w||iW <= 0){speedX = -speedX;}if中條件表示如果超出運(yùn)動(dòng)范圍，實(shí)現(xiàn)水平方向接觸邊緣后運(yùn)動(dòng)方向相反，代碼if (iH >= h||iH <= 0){speedY = -speedY;}則表示Y方向接觸邊緣后速度變反。
3.球體接觸地面反彈后，如何實(shí)現(xiàn)再次上升的高度低于上一次高度的效果？
答案：在接觸地面后，速度變?yōu)樨?fù)值，計(jì)時(shí)器開始執(zhí)行下一個(gè)間隔，立即執(zhí)行了speedY += 6，彈起速度立刻減小了6，其大小相對(duì)接觸地面前一瞬間小，因此球體不會(huì)彈跳到原來的高度。
4.如何實(shí)現(xiàn)球體豎直方向上的速度絕對(duì)值越來越小直至逼近于0的效果？
答案：事實(shí)上，僅利用speedY += 6;此例中豎直方向上速度speedY不可能達(dá)到0，因?yàn)樵谠摵瘮?shù)設(shè)置好了初速度的前提下，某一次落地速度不可能為6（通過后來打印速度每次執(zhí)行結(jié)果可以確定），所以下一次執(zhí)行不可能為0，那么究竟是怎樣實(shí)現(xiàn)落到地面靜止的效果的呢？實(shí)際上，當(dāng)把speedY增加值設(shè)置為6時(shí)，當(dāng)球體某一次落地瞬間它的速度是1，2，3，4，5中的任何一個(gè)值是，經(jīng)加上6后反彈瞬時(shí)速度分別為-5，-4，-3，-2，-1，經(jīng)過一個(gè)計(jì)時(shí)器周期（此例中為30毫秒），速度再加6立刻變?yōu)?，2，3，4，5，下一次速度變?yōu)?5，-4，-3，-2，-1......，由于speedY += 6在計(jì)時(shí)器的頭處，因此最終結(jié)果將總是在加6之前，停留在-5，-4，-3，-2，-1.中的任何一個(gè)數(shù)值，且計(jì)時(shí)器始終處于動(dòng)態(tài)，最終球體顯示在底部。
5.當(dāng)球體釋放后，也具備有個(gè)橫向速度speedX，如何使橫向速度也逐漸減小值0？
答案：此例中不需要考慮x方向的碰撞，因此每次計(jì)時(shí)可將speedX乘以一個(gè)小于1的數(shù)，最終的speedX值將無限趨近于0，顯示為靜止。
當(dāng)拖動(dòng)窗口時(shí)如何實(shí)現(xiàn)不出現(xiàn)滾動(dòng)條的效果？
答案：拖動(dòng)后瀏覽器窗口后，對(duì)球體設(shè)置新的運(yùn)動(dòng)范圍即可。
實(shí)現(xiàn)代碼及解析如下：
重慶分公司
重慶分公司
彈性運(yùn)動(dòng)
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
