欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-03 08:20:49
本文实例讲述了原生js实现多个小球碰撞反弹效果。分享给大家供大家参考,具体如下: 实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x...

本文实例讲述了原生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>

运行效果:

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

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript运动效果与技巧汇总》、《javascript动画特效与技巧汇总》、《javascript图形绘制技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结

希望本文所述对大家javascript程序设计有所帮助。