快捷導(dǎo)航

JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法分析

更新時(shí)間：2017年12月20日 10:37:29 作者：騎著代碼去流浪

這篇文章主要介紹了JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法,結(jié)合實(shí)例形式分析了javascript重力下落及彈性效果的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法。分享給大家供大家參考，具體如下：

這里利用JS語(yǔ)言在Html頁(yè)面中實(shí)現(xiàn)重力作用下落地后彈起的效果，如下所示：

在此例中主要涉及以下幾個(gè)問(wèn)題：

1.給球體一個(gè)釋放初速度，如何實(shí)現(xiàn)越向下運(yùn)動(dòng)且在接觸邊緣之前，豎直方向上的速度speedY越大的效果？
答案：可以在計(jì)時(shí)器中，每及時(shí)一次，豎直方向上的速度speedY自增一個(gè)固定值來(lái)實(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ì)彈跳到原來(lái)的高度。

4.如何實(shí)現(xiàn)球體豎直方向上的速度絕對(duì)值越來(lái)越小直至逼近于0的效果？
答案：事實(shí)上，僅利用speedY += 6;此例中豎直方向上速度speedY不可能達(dá)到0，因?yàn)樵谠摵瘮?shù)設(shè)置好了初速度的前提下，某一次落地速度不可能為6（通過(guò)后來(lái)打印速度每次執(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)過(guò)一個(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值將無(wú)限趨近于0，顯示為靜止。
當(dāng)拖動(dòng)窗口時(shí)如何實(shí)現(xiàn)不出現(xiàn)滾動(dòng)條的效果？
答案：拖動(dòng)后瀏覽器窗口后，對(duì)球體設(shè)置新的運(yùn)動(dòng)范圍即可。

實(shí)現(xiàn)代碼及解析如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>彈性運(yùn)動(dòng)</title>
    <style type="text/css">
      #div {
        width: 100px;
        height: 100px;
        background: green;
        position: absolute;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      //window.onload表示等頁(yè)面標(biāo)簽內(nèi)容加載完之后再加載window.onload里面的內(nèi)容
      window.onload = function(){
        //分別設(shè)置div在x和y方向的的初速度
        var speedX = 2;
        var speedY = 3;
        //獲取div標(biāo)簽
        var div = document.getElementById("div");
        //獲取按鈕
        var btn = document.getElementById("btn");
        //定義點(diǎn)擊事件
        btn.onclick = function(){
          startMove();
        };
        //定義一個(gè)空的定時(shí)器，防止上次事件定時(shí)器的返回值疊加
        var timer = null;
        //定義點(diǎn)擊事件函數(shù)
        function startMove(){
          //內(nèi)部清空計(jì)時(shí)器，防止上次返回值疊加
          clearInterval(timer);
          //設(shè)置計(jì)時(shí)器
          timer = setInterval(function(){
            //豎直方向上反向運(yùn)動(dòng)時(shí)速度為負(fù)值，為了達(dá)到反彈逐漸速度逐漸減小的效果，可以在向下碰撞后速度加上一個(gè)正值
            speedY += 6;
            //分別獲取div距離左邊距和上邊距的動(dòng)態(tài)距離
            var iW = div.offsetLeft + speedX;
            var iH = div.offsetTop + speedY;
            //獲取div水平方向運(yùn)動(dòng)的最大距離，即不包含邊框的瀏覽器窗口的寬度clientWidth減去div的寬度
            var w = document.documentElement.clientWidth - div.offsetWidth;
            //獲取div垂直方向運(yùn)動(dòng)的最大距離
            var h = document.documentElement.clientHeight - div.offsetHeight;
            //當(dāng)動(dòng)態(tài)寬度達(dá)到div最大運(yùn)動(dòng)寬度范圍時(shí)，立刻轉(zhuǎn)換速度為反方向負(fù)值，同時(shí)把w的值負(fù)值給iw，因?yàn)閣是可視窗口范圍，當(dāng)w縮小時(shí)，iw保存的還是上一次窗口條件下的距離左邊距的距離
            if (iW >= w||iW <= 0){speedX = -speedX;iW = w;}
            //當(dāng)動(dòng)態(tài)高度達(dá)到div最大運(yùn)動(dòng)高度范圍時(shí)，立刻轉(zhuǎn)向速度，同時(shí)將x方向速度乘以0.8，使之速度逐漸減小
if (iH >= h||iH <= 0){speedY = -speedY;iH = h;speedX *= 0.95;}
            //由于div.style.left和div.style.top還儲(chǔ)存這上一次或第一次的計(jì)時(shí)后的值，此次計(jì)時(shí)后應(yīng)把新的值儲(chǔ)存起來(lái)，使div出現(xiàn)動(dòng)態(tài)效果
            div.style.left = iW + "px";
            div.style.top = iH + "px";
            console.log(speedX);
          },30);
        }
      }
    </script>
    <input type="button" name="btn" id="btn" value="開始運(yùn)動(dòng)" />
    <div id="div"></div>
  </body>
</html>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: