本文實例講述了JavaScript實現(xiàn)重力下落與彈性效果的方法。分享給大家供大家參考，具體如下：
這里利用JS語言在Html頁面中實現(xiàn)重力作用下落地后彈起的效果，如下所示：
在此例中主要涉及以下幾個問題：
1.給球體一個釋放初速度，如何實現(xiàn)越向下運(yùn)動且在接觸邊緣之前，豎直方向上的速度speedY越大的效果？
答案：可以在計時器中，每及時一次，豎直方向上的速度speedY自增一個固定值來實現(xiàn)，下面代碼中speedY += 6;就是實現(xiàn)這個效果。
2.球體接觸地面（此例中指瀏覽器下邊緣）后，如何實現(xiàn)速度反向效果？
答案：接觸地面后，將方向速度置為當(dāng)前速度的反方向即可，代碼if (iW >= w||iW <= 0){speedX = -speedX;}if中條件表示如果超出運(yùn)動范圍，實現(xiàn)水平方向接觸邊緣后運(yùn)動方向相反，代碼if (iH >= h||iH <= 0){speedY = -speedY;}則表示Y方向接觸邊緣后速度變反。
3.球體接觸地面反彈后，如何實現(xiàn)再次上升的高度低于上一次高度的效果？
答案：在接觸地面后，速度變?yōu)樨?fù)值，計時器開始執(zhí)行下一個間隔，立即執(zhí)行了speedY += 6，彈起速度立刻減小了6，其大小相對接觸地面前一瞬間小，因此球體不會彈跳到原來的高度。
4.如何實現(xiàn)球體豎直方向上的速度絕對值越來越小直至逼近于0的效果？
答案：事實上，僅利用speedY += 6;此例中豎直方向上速度speedY不可能達(dá)到0，因為在該函數(shù)設(shè)置好了初速度的前提下，某一次落地速度不可能為6（通過后來打印速度每次執(zhí)行結(jié)果可以確定），所以下一次執(zhí)行不可能為0，那么究竟是怎樣實現(xiàn)落到地面靜止的效果的呢？實際上，當(dāng)把speedY增加值設(shè)置為6時，當(dāng)球體某一次落地瞬間它的速度是1，2，3，4，5中的任何一個值是，經(jīng)加上6后反彈瞬時速度分別為-5，-4，-3，-2，-1，經(jīng)過一個計時器周期（此例中為30毫秒），速度再加6立刻變?yōu)?，2，3，4，5，下一次速度變?yōu)?5，-4，-3，-2，-1......，由于speedY += 6在計時器的頭處，因此最終結(jié)果將總是在加6之前，停留在-5，-4，-3，-2，-1.中的任何一個數(shù)值，且計時器始終處于動態(tài)，最終球體顯示在底部。
5.當(dāng)球體釋放后，也具備有個橫向速度speedX，如何使橫向速度也逐漸減小值0？
答案：此例中不需要考慮x方向的碰撞，因此每次計時可將speedX乘以一個小于1的數(shù)，最終的speedX值將無限趨近于0，顯示為靜止。
當(dāng)拖動窗口時如何實現(xiàn)不出現(xiàn)滾動條的效果？
答案：拖動后瀏覽器窗口后，對球體設(shè)置新的運(yùn)動范圍即可。
實現(xiàn)代碼及解析如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>彈性運(yùn)動</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表示等頁面標(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");
//定義點擊事件
btn.onclick = function(){
startMove();
};
//定義一個空的定時器，防止上次事件定時器的返回值疊加
var timer = null;
//定義點擊事件函數(shù)
function startMove(){
//內(nèi)部清空計時器，防止上次返回值疊加
clearInterval(timer);
//設(shè)置計時器
timer = setInterval(function(){
//豎直方向上反向運(yùn)動時速度為負(fù)值，為了達(dá)到反彈逐漸速度逐漸減小的效果，可以在向下碰撞后速度加上一個正值
speedY += 6;
//分別獲取div距離左邊距和上邊距的動態(tài)距離
var iW = div.offsetLeft + speedX;
var iH = div.offsetTop + speedY;
//獲取div水平方向運(yùn)動的最大距離，即不包含邊框的瀏覽器窗口的寬度clientWidth減去div的寬度
var w = document.documentElement.clientWidth - div.offsetWidth;
//獲取div垂直方向運(yùn)動的最大距離
var h = document.documentElement.clientHeight - div.offsetHeight;
//當(dāng)動態(tài)寬度達(dá)到div最大運(yùn)動寬度范圍時，立刻轉(zhuǎn)換速度為反方向負(fù)值，同時把w的值負(fù)值給iw，因為w是可視窗口范圍，當(dāng)w縮小時，iw保存的還是上一次窗口條件下的距離左邊距的距離
if (iW >= w||iW <= 0){speedX = -speedX;iW = w;}
//當(dāng)動態(tài)高度達(dá)到div最大運(yùn)動高度范圍時，立刻轉(zhuǎn)向速度，同時將x方向速度乘以0.8，使之速度逐漸減小
if (iH >= h||iH <= 0){speedY = -speedY;iH = h;speedX *= 0.95;}
//由于div.style.left和div.style.top還儲存這上一次或第一次的計時后的值，此次計時后應(yīng)把新的值儲存起來，使div出現(xiàn)動態(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)動" />
<div id="div"></div>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 www.polareal.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
