样式：

核心代码：

1、添加气泡的方法

javascript">addCircle() {let height = 645;let width = 312;let minSize = 38;let maxSize = 78;let newCircle = {x: Math.random() * width, // 随机位置，留出边界y: Math.random() * height,size: (minSize + Math.random() * (maxSize - minSize + 1)) // 随机大小};// 检查超出边框,则重新生成if ((newCircle.x + newCircle.size * 2 > width) || (newCircle.y + newCircle.size * 2 > height)) {return this.addCircle();}// 检查重叠，如果重叠则重新生成let isOverlap = this.circles?.some(item => this.checkOverlap(newCircle, item));// 如果重叠，则重新生成新圆if (isOverlap) {return this.addCircle();}// 每次生成随机颜色let color = this.getRandomHslaColor();newCircle.color = color;this.circles.push(newCircle);
}

2、校验是否有重叠

javascript">checkOverlap(circle1, circle2) {// 简单的圆与圆的重叠检测let x1 = circle1.x + circle1.size;let x2 = circle2.x + circle2.size;let y1 = circle1.y + circle1.size;let y2 = circle2.y + circle2.size;const distance = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));// +10是为了留出边距return distance < circle1.size + circle2.size + 10;
}

3、生成随机颜色

javascript">getRandomHslaColor() {let h = Math.floor(Math.random() * 360);let s = Math.floor(Math.random() * 100) + '%';let l = Math.floor(Math.random() * 100) + '%';let a = Math.random().toFixed(2); // 生成0.00到1.00之间的透明度值return `hsla(${h},${s},${l},${a})`;
}