這篇文章主要介紹了原生JS怎么實(shí)現(xiàn)多個(gè)小球碰撞反彈效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司提供高防主機(jī)、云服務(wù)器、香港服務(wù)器、綿陽(yáng)電信機(jī)房等

js有什么特點(diǎn)

1、js屬于一種解釋性腳本語(yǔ)言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺(tái)下運(yùn)行，擁有著跨平臺(tái)特性；3、js屬于一種弱類(lèi)型腳本語(yǔ)言，對(duì)使用的數(shù)據(jù)類(lèi)型未做出嚴(yán)格的要求，能夠進(jìn)行類(lèi)型轉(zhuǎn)換，簡(jiǎn)單又容易上手；4、js語(yǔ)言安全性高，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對(duì)象的腳本語(yǔ)言，js不僅可以創(chuàng)建對(duì)象，也能使用現(xiàn)有的對(duì)象。

具體如下：

實(shí)現(xiàn)思路：小球的移動(dòng)，是通過(guò)改變小球的left和top值來(lái)改變，坐標(biāo)分別為(x,y)當(dāng)x/y值加到最大，即加到父級(jí)的寬度或者高度時(shí)，使x值或者y值減小，同理當(dāng)x值或者y值減到最小時(shí)，同樣的使x值或者y值增加，以上的思路可以實(shí)現(xiàn)小球的碰壁反彈

小球與小球之間的碰撞，要判斷小球在被撞小球的哪個(gè)方向，從而判斷小球該向哪個(gè)方向移動(dòng)，同樣的改變小球的坐標(biāo)值，來(lái)實(shí)現(xiàn)小球的反彈

實(shí)現(xiàn)代碼：

  
    
    
    
      * {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 800px;
        width: 1300px;
        border: 1px solid red;
        /*小球設(shè)置相對(duì)定位*/
        position: relative;
        margin: 0 auto;
        overflow: hidden;
      }
      p {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
        color: white;
        font-size: 25px;
        text-align: center;
        line-height: 40px;
      }