原生JS怎么實(shí)現(xiàn)多個(gè)小球碰撞反彈效果

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

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

js有什么特點(diǎn)

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

具體如下：

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

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

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>小球碰撞</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 800px;
        width: 1300px;
        border: 1px solid red;
        /*小球設(shè)置相對定位*/
        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;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
    </div>
  </body>
  <!--<script src="js/common.js" type="text/javascript" charset="utf-8"></script>-->
  <script type="text/javascript">
    /**
     * 生成并返回一個(gè)從m到n全區(qū)間的隨機(jī)數(shù)
     * @param {Object} m
     * @param {Object} n
     */
    function randomNum(m, n) {
      return Math.floor(Math.random() * (n - m + 1) + m);
    }
    /**
     * 生成一個(gè)隨機(jī)顏色，并返回rgb字符串值
     */
    function randomColor() {
      var r = randomNum(0, 255);
      var g = randomNum(0, 255);
      var b = randomNum(0, 255);
      return "rgb(" + r + "," + g + "," + b + ")";
    }
    //獲得wrapDiv
    var wrapDiv = document.getElementById("wrap");
    //定義數(shù)組存儲所有的小球
    var balls = [];
    //生成小球函數(shù)
    function createBalls() {
      for (var i = 0; i < 20; i++) {
        var ball = document.createElement("p");
        //隨機(jī)小球起始的X坐標(biāo)和小球的Y坐標(biāo)
        ball.x = randomNum(0, 1200);
        ball.y = randomNum(0, 700);
        //隨機(jī)小球的移動(dòng)速度
        ball.speed = randomNum(2, 5);
        //隨機(jī)小球移動(dòng)的方向
        if (Math.random() - 0.5 > 0) {
          ball.xflag = true;
        } else {
          ball.xflag = false;
        }
        if (Math.random() - 0.5 > 0) {
          ball.yflag = true;
        } else {
          ball.yflag = false;
        }
        //隨機(jī)小球的背景顏色
        ball.style.backgroundColor = randomColor();
        ball.innerHTML = i + 1;
        //將小球插入當(dāng)wrapDiv中
        wrapDiv.appendChild(ball);
        //將所有的小球存儲到數(shù)組中
        balls.push(ball);
      }
    }
    createBalls();
    //小球移動(dòng)函數(shù)，判斷小球的位置
    function moveBalls(ballObj) {
      setInterval(function() {
        ballObj.style.top = ballObj.y + "px";
        ballObj.style.left = ballObj.x + "px";
        //判斷小球的標(biāo)志量，對小球作出相應(yīng)操作
        if (ballObj.yflag) {
          //小球向下移動(dòng)
          ballObj.y += ballObj.speed;
          if (ballObj.y >= 800 - ballObj.offsetWidth) {
            ballObj.y = 800 - ballObj.offsetWidth;
            ballObj.yflag = false;
          }
        } else {
          //小球向上移動(dòng)
          ballObj.y -= ballObj.speed;
          if (ballObj.y <= 0) {
            ballObj.y = 0;
            ballObj.yflag = true;
          }
        }
        if (ballObj.xflag) {
          //小球向右移動(dòng)
          ballObj.x += ballObj.speed;
          if (ballObj.x >= 1300 - ballObj.offsetHeight) {
            ballObj.x = 1300 - ballObj.offsetHeight;
            ballObj.xflag = false;
          }
        } else {
          //小球向左移動(dòng)
          ballObj.x -= ballObj.speed;
          if (ballObj.x <= 0) {
            ballObj.x = 0;
            ballObj.xflag = true;
          }
        }
        crash(ballObj);
      }, 10);
    }
    var x1, y1, x2, y2;
    //碰撞函數(shù)
    function crash(ballObj) {
      //通過傳過來的小球?qū)ο髞慝@取小球的X坐標(biāo)和Y坐標(biāo)
      x1 = ballObj.x;
      y1 = ballObj.y;
      for (var i = 0; i < balls.length; i++) {
        //確保不和自己對比
        if (ballObj != balls[i]) {
          x2 = balls[i].x;
          y2 = balls[i].y;
          //判斷位置的平方和小球的圓心坐標(biāo)的關(guān)系
          if (Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) + 800 <= Math.pow(ballObj.offsetWidth + balls[i].offsetWidth, 2)) {
            //判斷傳過來的小球?qū)ο螅鄬τ谂鲎残∏虻哪膫€(gè)方位
            if (ballObj.x < balls[i].x) {
              if (ballObj.y < balls[i].y) {
                //小球?qū)ο笤诒慌鲂∏虻淖笊辖?
                ballObj.yflag = false;
                ballObj.xflag = false;
              } else if (ballObj.y > balls[i].y) {
                //小球?qū)ο笤诒慌鲂∏虻淖笙陆?
                ballObj.xflag = false;
                ballObj.yflag = true;
              } else {
                //小球?qū)ο笤诒蛔残∏虻恼蠓?
                ballObj.xflag = false;
              }
            } else if (ballObj.x > balls[i].x) {
              if (ballObj.y < balls[i].y) {
                //小球?qū)ο笤诒慌鲎残∏虻挠疑戏?
                ballObj.yflag = false;
                ballObj.xflag = true;
              } else if (ballObj.y > balls[i].y) {
                //小球?qū)ο笤诒慌鲎残∏虻挠蚁路?
                ballObj.xflag = true;
                ballObj.yflag = true;
              } else {
                //小球?qū)ο笤诒蛔残∏虻恼曳?
                ballObj.xflag = true;
              }
            } else if (ballObj.y > balls[i].y) {
              //小球?qū)ο笤诒蛔残∏虻恼路?
              ballObj.yflag = true;
            } else if (ballObj.y < balls[i].y) {
              //小球?qū)ο笤诒蛔残∏虻恼戏?
              ballObj.yflag = false;
            }
          }
        }
      }
    }
    for (var i = 0; i < balls.length; i++) {
      //將所有的小球傳到函數(shù)中,來實(shí)現(xiàn)對小球的移動(dòng)
      moveBalls(balls[i]);
    }
  </script>
</html>

運(yùn)行效果：

原生JS怎么實(shí)現(xiàn)多個(gè)小球碰撞反彈效果

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“原生JS怎么實(shí)現(xiàn)多個(gè)小球碰撞反彈效果”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

當(dāng)前題目：原生JS怎么實(shí)現(xiàn)多個(gè)小球碰撞反彈效果
文章分享：http://muchs.cn/article48/jpdghp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、商城網(wǎng)站、企業(yè)網(wǎng)站制作、做網(wǎng)站、網(wǎng)站營銷、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容