多个小球碰撞用vue实现

在 Vue 中实现多个小球的碰撞，可以按照以下步骤进行：

1. 创建一个 Ball 组件，用于显示单个小球的界面。这个组件需要包含小球的位置、速度等信息，并且需要实现小球的移动和碰撞检测等功能。

   <template>
     <div :style="{ left: x + 'px', top: y + 'px' }"></div>
   </template>

   <script>
   export default {
     props: {
       x: Number,
       y: Number,
       speedX: Number,
       speedY: Number,
       radius: Number,
       color: String,
       bounds: Object
     },
     data() {
       return {
         timerId: null
       }
     },
     created() {
       this.timerId = setInterval(this.move, 10);
     },
     methods: {
       move() {
         let x = this.x + this.speedX;
         let y = this.y + this.speedY;

         if (x - this.radius < this.bounds.left || x + this.radius > this.bounds.right) {
           this.speedX = -this.speedX;
         }

         if (y - this.radius < this.bounds.top || y + this.radius > this.bounds.bottom) {
           this.speedY = -this.speedY;
         }

         this.$emit('update:x', x);
         this.$emit('update:y', y);
       }
     }
   }
   </script>

   <style>
   div {
     position: absolute;
     width: 20px;
     height: 20px;
     border-radius: 50%;
   }
   </style>

2. 在父组件中，创建多个 Ball 组件，并为每个组件设置不同的位置、速度等信息。同时，还需要为每个组件设置边框信息，用于碰撞检测。

   <template>
     <div ref="container" style="position: relative; width: 400px; height: 400px; border: 1px solid black;">
       <Ball v-for="(ball, index) in balls" :key="index"
             :x.sync="ball.x" :y.sync="ball.y"
             :speedX="ball.speedX" :speedY="ball.speedY"
             :radius="ball.radius" :color="ball.color"
             :bounds="bounds" />
     </div>
   </template>

   <script>
   import Ball from './Ball.vue';

   export default {
     components: {
       Ball
     },
     data() {
       return {
         balls: [
           { x: 50, y: 50, speedX: 5, speedY: 3, radius: 10, color: 'red' },
           { x: 100, y: 100, speedX: -3, speedY: 4, radius: 15, color: 'blue' },
           { x: 150, y: 150, speedX: 4, speedY: -5, radius: 20, color: 'green' }
         ],
         bounds: {
           left: 0,
           top: 0,
           right: 400,
           bottom: 400
         }
       }
     }
   }
   </script>

3. 在 Ball 组件中，实现碰撞检测的功能。可以在 move 方法中，遍历所有其他的 Ball 组件，检测当前小球是否与其他小球相交。如果相交了，就需要计算当前小球的新速度，并更新位置。

   move() {
     let x = this.x + this.speedX;
     let y = this.y + this.speedY;
     let radius = this.radius;

     if (x - radius < this.bounds.left || x + radius > this.bounds.right) {
       this.speedX = -this.speedX;
     }

     if (y - radius < this.bounds.top || y + radius > this.bounds.bottom) {
       this.speedY = -this.speedY;
     }

     this.balls.forEach(ball => {
       if (ball !== this) {
         let dx = ball.x - x;
         let dy = ball.y - y;
         let distance = Math.sqrt(dx * dx + dy * dy);

         if (distance < radius + ball.radius) {
           let angle = Math.atan2(dy, dx);
           let sin = Math.sin(angle);
           let cos = Math.cos(angle);

           // 旋转坐标系
           let vx1 = this.speedX * cos + this.speedY * sin;
           let vy1 = this.speedY * cos - this.speedX * sin;
           let vx2 = ball.speedX * cos + ball.speedY * sin;
           let vy2 = ball.speedY * cos - ball.speedX * sin;

           // 碰撞后的新速度
           let vx1Final = ((this.radius - ball.radius) * vx1 + (2 * ball.radius) * vx2) / (this.radius + ball.radius);
           let vx2Final = ((2 * this.radius) * vx1 + (ball.radius - this.radius) * vx2) / (this.radius + ball.radius);

           // 更新速度
           this.speedX = vx1Final * cos - vy1 * sin;
           this.speedY = vy1 * cos + vx1Final * sin;
           ball.speedX = vx2Final * cos - vy2 * sin;
           ball.speedY = vy2 * cos + vx2Final * sin;

           // 更新位置
           x += this.speedX;
           y += this.speedY;
           ball.x += ball.speedX;
           ball.y += ball.speedY;
         }
       }
     });

     this.$emit('update:x', x);
     this.$emit('update:y', y);
   }

通过以上步骤，就可以实现多个小球的碰撞，并且在 Vue 中动态更新小球的位置和速度。