点击“Add Ball”按钮时，每次应仅新增一个球体，但当前逻辑导致第 n 次点击添加 n 个球；根本原因是 create() 函数误将累计计数 numBalls 当作本次需创建的球数，而非增量值。
点击“add ball”按钮时，每次应仅新增一个球体，但当前逻辑导致第 n 次点击添加 n 个球；根本原因是 `create()` 函数误将累计计数 `numballs` 当作本次需创建的球数，而非增量值。
该问题源于 addBall() 与 create(bCount) 函数之间的职责错位：addBall() 负责更新全局计数并调用 create()，而 create() 本应只负责“添加一个新球”，却错误地将参数 bCount（即当前总球数）理解为本次需生成的球的数量。因此，首次点击传入 create(1) → 添加 1 个球；第二次点击传入 create(2) → 循环执行 2 次创建逻辑 → 添加 2 个球；第三次传入 create(3) → 添加 3 个球……从而形成 1+2+3+… 的指数级累加，最终拖垮浏览器性能。
核心修复方案：确保 create() 始终只创建一个球
最简洁、安全且符合语义的修改方式，是在 create() 函数开头强制将 bCount 重置为 1：
function create(bCount) {
bCount = 1; // ✅ 关键修复：忽略传入的总数，每次只创建 1 个球
// 后续 lines 初始化代码保持不变...
while (bCount--) {
let tries = 100;
while (tries--) {
const dir = Math.rand(0, Math.TAU);
const vel = Math.rand(velMin, velMax);
const ball = new Ball(
Math.rand(maxBallSize + 10, canvas.width - maxBallSize - 10),
Math.rand(maxBallSize + 10, canvas.height - maxBallSize - 10),
Math.cos(dir) * vel,
Math.sin(dir) * vel,
Math.rand(minBallSize, maxBallSize)
);
if (canAdd(ball)) {
balls.push(ball);
break;
}
}
}
}
同时，addBall() 函数无需改动，它仍负责维护显示计数与触发创建逻辑：
function addBall() {
numBalls++;
ballCount.innerHTML = numBalls;
create(numBalls); // 传参不变，但 create 内部已屏蔽其含义
}
✅ 为什么这个修复是最佳实践？
- 低侵入性：不改变函数签名、调用链或状态管理逻辑，避免连锁修改风险；
- 语义清晰：create() 的职责明确为“创建一批球”，而“一批”在此场景下恒为 1，符合直觉；
- 健壮性高：即使未来 addBall() 被多处调用或传入异常值，bCount = 1 也能兜底保障单球创建；
- 可扩展友好：若后续需支持“一次添加多个球”（如批量导入），只需新增独立函数（如 addBalls(n)），而非改造现有逻辑。
⚠️ 注意事项
- 切勿改为在 addBall() 中传入 1（即 create(1)）——这虽能暂时解决问题，但会割裂“计数更新”与“实例创建”的逻辑耦合，使 numBalls 变量失去实际意义，增加维护成本；
- lines 的初始化（四条边界线）目前放在 create() 内属于设计缺陷（应只初始化一次），建议移至脚本顶层或单独的 initEnvironment() 函数中，避免重复添加导致碰撞检测异常；
- canAdd() 的重叠检测依赖随机位置重试（最多 100 次），当画布接近满载时可能失败。生产环境建议增加 fallback 机制（如自动缩放球体、提示空间不足或启用网格布局）。
综上，通过一行关键赋值 bCount = 1，即可彻底解决球体数量指数膨胀问题，让交互回归预期：每次点击，精准新增一颗弹跳小球。
