JavaScript作為一種基於物件和事件驅動並具有相對安全性的客戶端腳本語言，同時也是一種廣泛用於客戶端Web開發的腳本語言，常用於為HTML網頁添加動態功能，例如響應用戶的各種操作。本文主要介紹了JS實現小球的彈性碰撞效果 ,程式碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下，希望能幫助到大家。
一、HTML程式碼（body部分）
<body>
<!--只需要做一个大p包裹几个小p即可，你想要几个小球碰撞就在内部做几个p即可，这里我们做了6个小球-->
<p id="main">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</p>
</body>上面body部分這樣就算完成了，下面我們給body中的p做一些小樣式。
二、CSS小球樣式部分
<style type="text/css">
/*将body默认的margin和padding部分去掉*/
*{
margin: 0px;
padding: 0px;
}
/*采用定位的方式，让小球运动起来*/
#main{
margin: 0px auto;
position: relative;
}
/*小球的样式*/
#main p{
overflow: hidden;
position: absolute;
width: 80px;
height: 80px;
opacity: 0.5;
border-radius: 50%;
background-color: red;
}
</style>小球是要運動起來的，我們透過給小球和它的父元素加入定位，最後用js改變其top、bottom、left、right值來讓小球移動。現在我們小球的樣式已經做好了，下面的js程式碼才是重中之重。
3.1 Android 事件基礎
其實，我們透過上面的程式碼就可以完全實現一個小球碰撞偵測的功能了。但僅僅是上面的程式碼，還是會存在一定的bug，就是當整個網站存在右側滾動條時，當小球碰到螢幕右側的時候，會出現一瞬的橫向滾動條，這就是做網站比較忌諱的了，橫向捲軸的出現太醜了。所以我們可以透過以下程式碼來解決。
//滚动条宽度计算函数
function getScrollbarWidth() {
var oP = document.createElement("p"),
styles = {
width: "100px",
height: "100px",
overflowY: "scroll"
}, i, scrollbarWidth;
for (i in styles) oP.style[i] = styles[i];
document.body.appendChild(oP);
scrollbarWidth = oP.offsetWidth - oP.clientWidth;
oP.remove();
return scrollbarWidth;
}以上是一個計算滾動條寬度的函數，此函數可以計算右側滾動條的寬度，我們只需要在「根據瀏覽器視窗的大小自動調節小球的運動空間」上面，調用此函數
var scrollbarWidth = getScrollbarWidth(); 再修改小球的最大運動寬度 maxW=window.innerWidth-circles[0 ].clientWidth-scrollbarWidth ;這樣這個bug就修改好了。
相關推薦：
以上是實例詳解JS實現小球的彈性碰撞效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
