p5.js结合play库开发，如何实现收集完所有sprinkles后显示图片

核心原理：p5.play 的 Group 实例会自动维护 length 属性，组内精灵被 remove() 后数量同步减少，当 sprinkles.length === 0 时即代表所有sprinkles已被收集，此时触发胜利状态渲染即可。

具体修改步骤 #

• 新增全局状态变量，标记游戏是否进入胜利状态，避免重复触发胜利逻辑
• 新增 preload() 函数预加载胜利图片，避免运行时加载出现闪烁
• 修改 collect 函数，每次收集sprinkle后校验组内剩余数量
• 在 draw 函数末尾增加胜利状态判断，满足条件时渲染目标图片

修改后核心代码 #

// 新增全局变量
let gameWon = false;
let winImg;

// 新增preload函数，p5会在setup执行前自动调用
function preload() {
  // 替换为你自己的胜利图片路径
  winImg = loadImage('assets/win.png');
}

function setup(){
  sprinkles = new Group();
  for(var i = 0; i <25; i++) {
    var ang = random(360);
    var px = SCENE_W/2 + 1000*cos(radians(ang));
    var py = SCENE_H/2 + 1000*sin(radians(ang));
    createSprinkles(2, px, py);
  }
}

function draw(){
  // 原有边界循环逻辑保持不变
  for(var j=0; j<sprinkles.length; j++) {
    var s = sprinkles[j];
    if(s.position.x<-MARGIN) s.position.x = SCENE_W+MARGIN;
    if(s.position.x>SCENE_W+MARGIN) s.position.x = -MARGIN;
    if(s.position.y<-MARGIN) s.position.y = SCENE_H+MARGIN;
    if(s.position.y>SCENE_H+MARGIN) s.position.y = -MARGIN;
  }
  mouse.overlap(sprinkles, collect);

  // 新增胜利渲染逻辑
  if (gameWon) {
    background(255); // 可替换为原有胜利背景色
    image(winImg, 0, 0, SCENE_W, SCENE_H); // 按需调整图片位置、宽高
    // 可选：增加通关提示
    fill(0);
    textSize(48);
    textAlign(CENTER, CENTER);
    text('恭喜通关！', SCENE_W/2, SCENE_H/2 + 120);
  }
}

function createSprinkles(type, x, y){
  var a = createSprite(x, y);
  // 建议将sprinkle图片也移到preload中预加载，减少性能损耗
  var img = loadImage('assets/sprinkles/sprinkle'+floor(random(0,5))+'.png');
  a.addImage(img);
  a.setSpeed(2.5-(type/2), random(360));
  a.rotationSpeed = 0.5;
  sprinkles.add(a);
}

function collect(collector, collected) {
  collector.changeAnimation('stretch');
  collector.animation.rewind();
  collected.remove();
  // 新增：收集后校验剩余sprinkles数量
  if (sprinkles.length === 0 && !gameWon) {
    gameWon = true;
    // 可选优化：移除碰撞检测，减少无意义运算
    mouse.remove.overlap(sprinkles, collect);
  }
}

注意：如果后续添加了动态生成sprinkles的逻辑，需要单独维护全局总收集数/剩余数变量做校验，不能直接依赖组的length属性。

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