模拟蚂蚁森林小球收集能量方法

想要效果，点击前

点击后

技术栈：vue js
HTML：

<div class="main_contain">
    <div v-for="(item,index) in ballList" :key="index" class="ball_small" :style="{top:item.top+'px',left:item.left+'px',transition:'all 2s'}">
      10
    </div>
    <div class="main_ball" @click="in_ball">100</div>
  </div>

data:控制浮动能量小球的位置

data() {
   
      return {
   
        ballList:[
          {
   
            top:120,
            left:20,
          },
          {
   
            top:20,
            left:80,
          },
          {
   
            top:20,
            left:160,
          },
          {
   
            top:120,
            left:320,
          },
        ]
      }

点击小球后，小球的移动位置：

in_ball(){
   
        this.ballList[0].left=150
        this.ballList[1