Random ball size, random motion collision

<template>
 <GZNormalWrap title=" Building industrialization " style="position: relative;">
   <div class="button-style" @click="handleLink">
      Decision making BI
   </div>
  <ul id="constructionIndustryMain">
    <li v-for="(item, index) in circleData" :key="index" class="ball-style" @click="handleClick(item)">
      <div style="width:100%">
        <div class="num-style">{
    {
     item.value }}</div>
        <div class="name-style">{
    {
    item.name}}</div>
      </div>
    </li>
  </ul>
 </GZNormalWrap>
</template>

<script>
import GZNormalWrap from '../../common/GZNormalWrapTzq'
export default {
    
  data() {
    
    return {
    
      circleData: [],
      circleDom: [],
      circleArr: [],
      //  Initializes the maximum width and height of the motion , The initial definition 0
      maxW: 0,
      maxH: 0,
      timer: null,
      timerArr: [],
      count: 7,
      clientWidthValue: 0,
      ballWidth: 0,
      ballWidthArr: []
    };
  },
  components: {
    
    GZNormalWrap
    // NoData
  },
  mounted() {
    
    this.$nextTick(() => {
    
      this.clientWidthValue = document.querySelector('#constructionIndustryMain').clientWidth
      this.ballWidth = Math.floor(this.clientWidthValue / this.count)
      this.handleBallWidth(this.ballWidth)
      this.getLatest_sign_users('init')
    })
  },
  methods: {
    
    handleLink() {
    },
    handleBallWidth(ballWidth) {
    
      this.ballWidthArr.push(this.ballWidth)
      const cell = ballWidth / (this.count)
      const num = (this.count - 1) % 2 + Math.floor((this.count - 1) / 2)
      for(let i = 0; i < num; i++) {
    
        const value = Math.floor(ballWidth - (cell * (i + 1)))
        const value2 = Math.floor(ballWidth + (cell * (i + 1)))
        this.ballWidthArr.push(value)
        this.ballWidthArr.unshift(value2)
      }
      this.ballWidthArr.sort()
      console.log(this.ballWidthArr)
    },
    handleClick(val) {
    
      alert(val)
    },
    getLatest_sign_users(type = '') {
    
      const data = [
        {
     name: ' Assembly intelligent construction ', value: 56 }, {
     name: ' Robot applications ', value: 560 }, {
     name: ' Lofting robot application ', value: 300 }, {
     name: ' Three dimensional laser machine ', value: 400 }, {
     name: ' Remote control ', value: 1 }, {
     name: ' Wisdom Pavilion ', value: 200 }, {
     name: ' Tilt photography ', value: 0 }
      ]
      data.sort((a, b) => {
    
        return a.value - b.value
      })
      this.circleData = [...data]
      this.$nextTick(() => {
    
        if (data.length) {
    
          this.initBubble()
        }
      })
    },
    initBubble() {
    
      const main = document.getElementById('constructionIndustryMain');
      const divDom = main.querySelectorAll('.ball-style'); //  Get new dom
	  //  Give new dom Set width and height 
      for (let i = 0; i < divDom.length; i++) {
    
        const textValue = divDom[i].querySelector('.name-style').innerText
        const indexValue = this.circleData.findIndex(item => item.name === textValue)
        // divDom[i].style.boxShadow = '0 0 20px' + ' ' + colors[this.circleData[i].gender] + ' ' + 'inset';
        divDom[i].style.background = 'linear-gradient(123deg, rgba(4, 4, 45, 0.43), rgba(38, 142, 161, 0.43))'
        // 10 More than one size becomes smaller 
        let sizeValue = this.ballWidthArr[indexValue]
        if(sizeValue < 60) {
    
          sizeValue = 60
        }
        divDom[i].style.width = sizeValue + 'px' // '80px';
        divDom[i].style.height = sizeValue + 'px';
        divDom[i].style.fontSize = '12px';
        divDom[i].style.lineHeight = '16px';
        this.circleDom.push(divDom[i])
      }

      //  Automatically adjust the motion space of the ball according to the size of the browser window 
      window.onresize = () => {
    
        this.maxW = main.clientWidth - divDom[0].clientWidth; //  To keep the ball from getting stuck on the edge of the browser 
        this.maxH = main.clientHeight - divDom[0].clientHeight; //  So subtract your own width and height 
      };
      onresize();

      //  Initialization of array objects 
      for (let i = 0; i < this.circleDom.length; i++) {
    
        const obj = {
    };
        console.log(this.circleDom[i]);
        //  Increase each ball's own maxW  and  maxH
        const maxW = main.clientWidth - this.circleDom[i].clientWidth; //  To keep the ball from getting stuck on the edge of the browser 
        const maxH = main.clientHeight - this.circleDom[i].clientHeight;

        // if (this.circleDom[i].getAttribute('class') === 'active') {
    
        obj.x = Math.floor(Math.random() * (maxW + 1)); //  initial x coordinate 
        obj.y = Math.floor(Math.random() * (maxH + 1)); //  initial y coordinate 
        obj.cx = obj.x + this.circleDom[i].offsetWidth / 2;//  center of a circle x coordinate 
        obj.cy = obj.y + this.circleDom[i].offsetHeight / 2;//  center of a circle y coordinate 
        obj.movex = Math.floor(Math.random() * 2); // x Direction of axis movement 
        obj.movey = Math.floor(Math.random() * 2); // y Direction of axis movement 
        obj.speed = 0.2; //  Random velocity 
        obj.timer = null; //  timer 
        obj.index = i; //  Index value 
        obj.maxW = maxW; //  The maximum width of each ball 
        obj.maxH = maxH; //  The maximum height of each ball 
        obj.offsetWidthValue = this.circleDom[i].offsetWidth
        this.circleArr.push(obj)
        //  Ball position initialization 
        this.circleDom[i].style.left = obj.x + 'px';
        this.circleDom[i].style.top = obj.y + 'px';
        // } else {
    
        // //  Keep the location information of the previous data , Do not refresh location 
        // obj = this.circleArr[i]
        // }
        this.move(obj);
      }
    },

    //  Moving functions 
    move(balls) {
    
      const self = this
      self.timer = requestAnimationFrame(function fn() {
    
        if (balls.movex === 1) {
    
          //  If you run to the right , The acceleration is always , We hit the border , Change to the opposite direction 
          balls.x += balls.speed;
          if (balls.x + balls.speed >= balls.maxW) {
    
            //  Prevent the ball from going out of bounds 
            balls.x = balls.maxW;
            balls.movex = 0; //  The direction of motion of the ball changes 
          }
        } else {
    
          balls.x -= balls.speed; // 1 and 0 Indicates positive and negative directions 
          if (balls.x - balls.speed <= 0) {
    
            balls.x = 0;
            balls.movex = 1;
          }
        }
        if (balls.movey === 1) {
    
          balls.y += balls.speed;
          if (balls.y + balls.speed >= balls.maxH) {
    
            balls.y = balls.maxH;
            balls.movey = 0;
          }
        } else {
    
          balls.y -= balls.speed;
          if (balls.y - balls.speed <= 0) {
    
            balls.y = 0;
            balls.movey = 1;
          }
        }
        if (self.circleDom[balls.index]) {
    
          balls.cx = balls.x + self.circleDom[balls.index].offsetWidth / 2;//  The center of the ball is equal to ： In motion x Plus its own radius 
          balls.cy = balls.y + self.circleDom[balls.index].offsetHeight / 2;
          self.circleDom[balls.index].style.left = balls.x + 'px'; //  The position of the ball relative to the screen 
          self.circleDom[balls.index].style.top = balls.y + 'px';
          self.crash(balls.index); //  Collision detection for each small ball 
        }
        requestAnimationFrame(fn);
      });


      // //  Each ball has a separate timer 
      // balls.timer = setInterval(() => {
    
      // if (balls.movex === 1) {
    
      // //  If you run to the right , The acceleration is always , We hit the border , Change to the opposite direction 
      // balls.x += balls.speed;
      // if (balls.x + balls.speed >= balls.maxW) {
    
      // //  Prevent the ball from going out of bounds 
      // balls.x = balls.maxW;
      // balls.movex = 0; //  The direction of motion of the ball changes 
      // }
      // } else {
    
      // balls.x -= balls.speed; // 1 and 0 Indicates positive and negative directions 
      // if (balls.x - balls.speed <= 0) {
    
      // balls.x = 0;
      // balls.movex = 1;
      // }
      // }
      // if (balls.movey === 1) {
    
      // balls.y += balls.speed;
      // if (balls.y + balls.speed >= balls.maxH) {
    
      // balls.y = balls.maxH;
      // balls.movey = 0;
      // }
      // } else {
    
      // balls.y -= balls.speed;
      // if (balls.y - balls.speed <= 0) {
    
      // balls.y = 0;
      // balls.movey = 1;
      // }
      // }
      // if (this.circleDom[balls.index]) {
    
      // balls.cx = balls.x + this.circleDom[balls.index].offsetWidth / 2;//  The center of the ball is equal to ： In motion x Plus its own radius 
      // balls.cy = balls.y + this.circleDom[balls.index].offsetHeight / 2;
      // this.circleDom[balls.index].style.left = balls.x + 'px'; //  The position of the ball relative to the screen 
      // this.circleDom[balls.index].style.top = balls.y + 'px';
      // this.crash(balls.index); //  Collision detection for each small ball 
      // }
      // }, 25);
      // this.timerArr.push(balls.timer)
    },
    //  Collision function 
    crash(a) {
    
      const container = [...this.circleArr]
      const ball1x = container[a].cx; //  The coordinates of the center of the free sphere in the array 
      const ball1y = container[a].cy;//  Ideas ： Just grab a ball , Then traverse all the balls , Compare the distance between this ball and the center of all balls 
      for (let i = 0; i < container.length; i++) {
    
        if (i !== a) {
     //  Judge that the ball is not itself , To judge the distance with other balls 
          const ball2x = container[i].cx; //  Assign the coordinates of the center of other balls to the balls 2
          const ball2y = container[i].cy;
          //  Center distance   Find the distance between two points , Square root 
          const distence = Math.sqrt((ball1x - ball2x) * (ball1x - ball2x) + (ball1y - ball2y) * (ball1y - ball2y));
          if (distence <= ((this.circleDom[a].offsetWidth + container[i].offsetWidthValue) / 2)) {
     //  Comparison of the spherical center distance and diameter 
            if (ball1x > ball2x) {
     //  Currently on the right side of the unknown 
              if (ball1y > ball2y) {
     //  Preset the unknown ball to hit the front ball , Then the current ball changes motion 
                container[a].movex = 1; // 1 Expressed as a positive value , Corresponding right and bottom 
                container[a].movey = 1;// 0 Expressed as a negative value , Corresponding left and top 
              } else if (ball1y < ball2y) {
    
                container[a].movex = 1;
                container[a].movey = 0;
              } else {
    
                container[a].movex = 1;
              }
            } else if (ball1x < ball2x) {
    
              if (ball1y > ball2y) {
    
                container[a].movex = 0;
                container[a].movey = 0;
              } else if (ball1y < ball2y) {
    
                container[a].movex = 0;
                container[a].movey = 1;
              } else {
    
                container[a].movex = 0;
              }
            } else {
    
              if (ball1y > ball2y) {
    
                container[a].movey = 1;
              } else if (ball1y < ball2y) {
    
                container[a].movey = 0;
              }
            }
          }
        }
      }
    }
  },
  beforeDestroy() {
    
    cancelAnimationFrame(this.timer)
  }
};
</script>
<style lang='less' scoped>
#constructionIndustryMain {
    
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;

  li {
    
    position: absolute;
    overflow: hidden;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    cursor: pointer;
    &.active {
    
      animation: scaleBox 1s 1;
    }

    @keyframes scaleBox {
    
      0% {
    
        transform: scale(1);
      }
      50% {
    
        transform: scale(1.2);
      }
      100% {
    
        transform: scale(1);
      }
    }

    div {
    
      span {
    
        display: block;
        width: 100%;
        color: #fff;
        text-align: center;
      }
    }
  }
}
.num-style{
    
  font-size: 18px;
  font-weight: bold;
  color: #20E3E1;
  text-align: center;
}
.name-style{
    
  margin-top: 5px;
  font-size: 12px;
  color: #FFFFFF;
  text-align: center;
}
.button-style{
    
  position: absolute;
  right: 30px;
  top: 30px;
  cursor: pointer;
  background: rgba(56, 137, 255, 0.6);
  width: 80px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #FFFFFF;
  border-radius: 2px;
  border: 1px solid #3889FF;
}
</style>

Learn from it
https://blog.csdn.net/weixin_39150852/article/details/123825240