Circle半径大小异常：生成触canvas底部的随机圆形脚本无法正常运行

现有代码核心问题 #

• 循环起始索引为0，执行到radius /= i时触发除以0错误，直接导致radius变为NaN，后续所有逻辑失效
• 圆心Y坐标赋值时机错误：第一个圆创建时用的是初始CENTER_Y，没有按照「触底」要求设置为画布高度减半径
• 缺少X轴随机逻辑：所有圆的X坐标固定，无法实现随机分布效果
• 半径缩放逻辑不合理：每次直接除以当前循环索引，半径会以阶乘级速度快速缩小，大概率后续圆会小到不可见

修复后代码 #

// 可自行调整初始参数
const NUM_CIRCLES = 10; // 生成圆的总数量
let initRadius = 80; // 第一个圆的初始半径
let color = Randomizer.nextColor();

for (var i = 1; i <= NUM_CIRCLES; i++){
   // 提前计算当前圆的有效参数
   const currentRadius = initRadius / i;
   // 随机X坐标，限制范围避免圆超出左右边界
   const centerX = Randomizer.nextFloat(currentRadius, getWidth() - currentRadius);
   // 圆心Y坐标固定为画布高度减半径，保证圆底部刚好触碰画布底部
   const centerY = getHeight() - currentRadius;

   var circle = new Circle(currentRadius);
   circle.setPosition(centerX, centerY);
   circle.setColor(color);
   add(circle);
    
   // 更新下一个圆的颜色
   color = Randomizer.nextColor();
}

改动说明 #

• 循环起始值改为1，彻底规避除以0问题，同时循环条件改为<= NUM_CIRCLES保证生成数量正确
• 调整参数计算顺序：生成圆前先算好当前圆的半径、坐标，保证参数正确性
• 新增X坐标随机逻辑，取值范围限制在[当前半径, 画布宽度-当前半径]，避免圆超出画布边缘
• 半径缩放逻辑改为用初始半径除以当前生成序号，缩放速度更平滑可控；如果需要调整缩小速度，可以把currentRadius = initRadius / i改成currentRadius = initRadius * (0.8 ** i)等自定义缩放规则

内容的提问来源于stack exchange，提问作者Lerb_games