如何重写p5.js代码实现canvas内物体自动下落触底后返回顶部重置

原有代码核心问题是圆形绘制逻辑被包裹在mouseIsPressed判断分支内，只有鼠标按下时才会渲染物体，移除该判断即可实现自动运行，同时调整为数组管理多物体，满足你一组物体从随机位置下落的需求，也预留了后续扩展sprite爆炸效果的空间。

完整修改后代码 #

// 存储所有下落物体
var fallingObjects = [];
// 下落物体数量，可自行调整
const OBJECT_COUNT = 10;

function setup() {
  createCanvas(720, 400);
  // 初始化所有下落物体
  for(let i = 0; i < OBJECT_COUNT; i++) {
    fallingObjects.push({
      // 初始x为随机位置，减去物体半径避免超出画布
      x: random(12, width - 12),
      // 初始y在画布外顶部，避免启动时物体齐刷刷出现
      y: random(-48, 0),
      // 随机下落速度，效果更自然
      speed: random(1, 3)
    })
  }
}

function draw() {
  background(0);
  stroke(50);
  fill(100);
  
  // 遍历更新所有物体
  for(let i = 0; i < fallingObjects.length; i++) {
    let obj = fallingObjects[i];
    // 绘制物体
    ellipse(obj.x, obj.y, 24, 24);
    // 更新y坐标（p5.js坐标系y轴向下为正，数值增加即向下移动）
    obj.y += obj.speed;
    
    // 触底判断
    if(obj.y >= height + 12) {
      // 后续要加爆炸sprite效果时，这里先触发爆炸动画，动画播放完成后再执行重置逻辑即可
      obj.y = -12;
      obj.x = random(12, width - 12);
    }
  }
}

改动说明 #

• 移除了绘制逻辑的mouseIsPressed限制，启动后自动触发下落效果
• 替换单x/y变量为对象数组管理多物体，支持同时下落，每个物体的初始位置、下落速度随机
• 现有结构兼容后续爆炸效果扩展：只需要给物体增加爆炸状态、帧计数字段，触底时先播放sprite序列帧，动画结束后再重置到顶部即可，不需要大幅调整现有逻辑

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