原生JS实现多个小球碰撞反弹效果示例

2019-11-19 14:26:27

字体：大中小

来源：转载

供稿：网友

本文实例讲述了原生JS实现多个小球碰撞反弹效果。分享给大家供大家参考，具体如下：

实现思路：小球的移动，是通过改变小球的left和top值来改变，坐标分别为(x,y)当x/y值加到最大，即加到父级的宽度或者高度时，使x值或者y值减小，同理当x值或者y值减到最小时，同样的使x值或者y值增加，以上的思路可以实现小球的碰壁反弹

小球与小球之间的碰撞，要判断小球在被撞小球的哪个方向，从而判断小球该向哪个方向移动，同样的改变小球的坐标值，来实现小球的反弹

实现代码：

<!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;        /*小球设置相对定位*/        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">    /**     * 生成并返回一个从m到n全区间的随机数     * @param {Object} m     * @param {Object} n     */    function randomNum(m, n) {      return Math.floor(Math.random() * (n - m + 1) + m);    }    /**     * 生成一个随机颜色，并返回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");    //定义数组存储所有的小球    var balls = [];    //生成小球函数    function createBalls() {      for (var i = 0; i < 20; i++) {        var ball = document.createElement("p");        //随机小球起始的X坐标和小球的Y坐标        ball.x = randomNum(0, 1200);        ball.y = randomNum(0, 700);        //随机小球的移动速度        ball.speed = randomNum(2, 5);        //随机小球移动的方向        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;        }        //随机小球的背景颜色        ball.style.backgroundColor = randomColor();        ball.innerHTML = i + 1;        //将小球插入当wrapDiv中        wrapDiv.appendChild(ball);        //将所有的小球存储到数组中        balls.push(ball);      }    }    createBalls();    //小球移动函数，判断小球的位置    function moveBalls(ballObj) {      setInterval(function() {        ballObj.style.top = ballObj.y + "px";        ballObj.style.left = ballObj.x + "px";        //判断小球的标志量，对小球作出相应操作        if (ballObj.yflag) {          //小球向下移动          ballObj.y += ballObj.speed;          if (ballObj.y >= 800 - ballObj.offsetWidth) {            ballObj.y = 800 - ballObj.offsetWidth;            ballObj.yflag = false;          }        } else {          //小球向上移动          ballObj.y -= ballObj.speed;          if (ballObj.y <= 0) {            ballObj.y = 0;            ballObj.yflag = true;          }        }        if (ballObj.xflag) {          //小球向右移动          ballObj.x += ballObj.speed;          if (ballObj.x >= 1300 - ballObj.offsetHeight) {            ballObj.x = 1300 - ballObj.offsetHeight;            ballObj.xflag = false;          }        } else {          //小球向左移动          ballObj.x -= ballObj.speed;          if (ballObj.x <= 0) {            ballObj.x = 0;            ballObj.xflag = true;          }        }        crash(ballObj);      }, 10);    }    var x1, y1, x2, y2;    //碰撞函数    function crash(ballObj) {      //通过传过来的小球对象来获取小球的X坐标和Y坐标      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;          //判断位置的平方和小球的圆心坐标的关系          if (Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) + 800 <= Math.pow(ballObj.offsetWidth + balls[i].offsetWidth, 2)) {            //判断传过来的小球对象，相对于碰撞小球的哪个方位            if (ballObj.x < balls[i].x) {              if (ballObj.y < balls[i].y) {                //小球对象在被碰小球的左上角                ballObj.yflag = false;                ballObj.xflag = false;              } else if (ballObj.y > balls[i].y) {                //小球对象在被碰小球的左下角                ballObj.xflag = false;                ballObj.yflag = true;              } else {                //小球对象在被撞小球的正左方                ballObj.xflag = false;              }            } else if (ballObj.x > balls[i].x) {              if (ballObj.y < balls[i].y) {                //小球对象在被碰撞小球的右上方                ballObj.yflag = false;                ballObj.xflag = true;              } else if (ballObj.y > balls[i].y) {                //小球对象在被碰撞小球的右下方                ballObj.xflag = true;                ballObj.yflag = true;              } else {                //小球对象在被撞小球的正右方                ballObj.xflag = true;              }            } else if (ballObj.y > balls[i].y) {              //小球对象在被撞小球的正下方              ballObj.yflag = true;            } else if (ballObj.y < balls[i].y) {              //小球对象在被撞小球的正上方              ballObj.yflag = false;            }          }        }      }    }    for (var i = 0; i < balls.length; i++) {      //将所有的小球传到函数中,来实现对小球的移动      moveBalls(balls[i]);    }  </script></html>

运行效果：