溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JavaScript實現重力下落與彈性效果的方法。分享給大家供大家參考，具體如下：
這里利用JS語言在Html頁面中實現重力作用下落地后彈起的效果，如下所示：
在此例中主要涉及以下幾個問題：
1.給球體一個釋放初速度，如何實現越向下運動且在接觸邊緣之前，豎直方向上的速度speedY越大的效果？
答案：可以在計時器中，每及時一次，豎直方向上的速度speedY自增一個固定值來實現，下面代碼中speedY += 6;就是實現這個效果。
2.球體接觸地面（此例中指瀏覽器下邊緣）后，如何實現速度反向效果？
答案：接觸地面后，將方向速度置為當前速度的反方向即可，代碼if (iW >= w||iW <= 0){speedX = -speedX;}if中條件表示如果超出運動范圍，實現水平方向接觸邊緣后運動方向相反，代碼if (iH >= h||iH <= 0){speedY = -speedY;}則表示Y方向接觸邊緣后速度變反。
3.球體接觸地面反彈后，如何實現再次上升的高度低于上一次高度的效果？
答案：在接觸地面后，速度變為負值，計時器開始執行下一個間隔，立即執行了speedY += 6，彈起速度立刻減小了6，其大小相對接觸地面前一瞬間小，因此球體不會彈跳到原來的高度。
4.如何實現球體豎直方向上的速度絕對值越來越小直至逼近于0的效果？
答案：事實上，僅利用speedY += 6;此例中豎直方向上速度speedY不可能達到0，因為在該函數設置好了初速度的前提下，某一次落地速度不可能為6（通過后來打印速度每次執行結果可以確定），所以下一次執行不可能為0，那么究竟是怎樣實現落到地面靜止的效果的呢？實際上，當把speedY增加值設置為6時，當球體某一次落地瞬間它的速度是1，2，3，4，5中的任何一個值是，經加上6后反彈瞬時速度分別為-5，-4，-3，-2，-1，經過一個計時器周期（此例中為30毫秒），速度再加6立刻變為1，2，3，4，5，下一次速度變為-5，-4，-3，-2，-1......，由于speedY += 6在計時器的頭處，因此最終結果將總是在加6之前，停留在-5，-4，-3，-2，-1.中的任何一個數值，且計時器始終處于動態，最終球體顯示在底部。
5.當球體釋放后，也具備有個橫向速度speedX，如何使橫向速度也逐漸減小值0？
答案：此例中不需要考慮x方向的碰撞，因此每次計時可將speedX乘以一個小于1的數，最終的speedX值將無限趨近于0，顯示為靜止。
當拖動窗口時如何實現不出現滾動條的效果？
答案：拖動后瀏覽器窗口后，對球體設置新的運動范圍即可。
實現代碼及解析如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>彈性運動</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表示等頁面標簽內容加載完之后再加載window.onload里面的內容
window.onload = function(){
//分別設置div在x和y方向的的初速度
var speedX = 2;
var speedY = 3;
//獲取div標簽
var div = document.getElementById("div");
//獲取按鈕
var btn = document.getElementById("btn");
//定義點擊事件
btn.onclick = function(){
startMove();
};
//定義一個空的定時器，防止上次事件定時器的返回值疊加
var timer = null;
//定義點擊事件函數
function startMove(){
//內部清空計時器，防止上次返回值疊加
clearInterval(timer);
//設置計時器
timer = setInterval(function(){
//豎直方向上反向運動時速度為負值，為了達到反彈逐漸速度逐漸減小的效果，可以在向下碰撞后速度加上一個正值
speedY += 6;
//分別獲取div距離左邊距和上邊距的動態距離
var iW = div.offsetLeft + speedX;
var iH = div.offsetTop + speedY;
//獲取div水平方向運動的最大距離，即不包含邊框的瀏覽器窗口的寬度clientWidth減去div的寬度
var w = document.documentElement.clientWidth - div.offsetWidth;
//獲取div垂直方向運動的最大距離
var h = document.documentElement.clientHeight - div.offsetHeight;
//當動態寬度達到div最大運動寬度范圍時，立刻轉換速度為反方向負值，同時把w的值負值給iw，因為w是可視窗口范圍，當w縮小時，iw保存的還是上一次窗口條件下的距離左邊距的距離
if (iW >= w||iW <= 0){speedX = -speedX;iW = w;}
//當動態高度達到div最大運動高度范圍時，立刻轉向速度，同時將x方向速度乘以0.8，使之速度逐漸減小
if (iH >= h||iH <= 0){speedY = -speedY;iH = h;speedX *= 0.95;}
//由于div.style.left和div.style.top還儲存這上一次或第一次的計時后的值，此次計時后應把新的值儲存起來，使div出現動態效果
div.style.left = iW + "px";
div.style.top = iH + "px";
console.log(speedX);
},30);
}
}
</script>
<input type="button" name="btn" id="btn" value="開始運動" />
<div id="div"></div>
</body>
</html>
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript圖形繪制技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
