初学p5.js，如何在数组中隐藏图片

Question

我是 p5.js 和一般编码的初学者。对于我的课堂项目，我正在创建一张可定制的生日贺卡。卡片的三个部分是可定制的：蛋糕样式、帽子样式和蛋糕上的面部表情。理想情况下，用户会单击卡片的每个部分来循环选择适合自己口味的自定义选项。

我现在粘贴在这篇文章中的代码只是蛋糕样式选项。此外，我对其进行了编码，以便用户可以单击一个按钮来选择他们的蛋糕样式，而不是单击卡片上的特定区域，因为这对我来说更容易弄清楚。

我的问题是，我将如何对其进行编码，以便在用户第一次单击按钮时弹出第一个蛋糕选项，然后在第二次单击时弹出第二个蛋糕选项，等等？我需要每次点击弹出一个蛋糕选项；所有其他蛋糕选项都需要隐藏。

我的另一个问题是关于在显示所有蛋糕选项后循环回到第一个蛋糕选项。我有五个蛋糕选项，那么我该如何编写代码，这样不仅第一次点击会显示第一个蛋糕选项，还会显示第六个、第十一个、第十六个等？

提前致谢。

let clickCount = 0
let cakes
let cakeButton

function preload (){
  card_bg = loadImage ("card_bg.png")
  cake_chocolate = loadImage ("cake_chocolate.png")
  cake_pink = loadImage ("cake_pink.png")
  cake_pinkDrip = loadImage ("cake_pinkDrip.png")
  cake_rainbow = loadImage ("cake_rainbow.png")
  cake_white = loadImage ("cake_white.png")
  hat_chevron = loadImage ("hat_chevron.png")
  hat_dots = loadImage ("hat_dots.png")
  hat_puff = loadImage ("hat_puff.png")
  hat_stars = loadImage ("hat_stars.png")
  hat_stripes = loadImage ("hat_stripes.png")
}

function setup() {
  createCanvas(450, 600);
    background(220);
  image (card_bg, 0, 0)
  cakeButton = createButton("click me", "blue")
  cakeButton.position (125, 600)
  cakeButton.size (200, 150)
  cakeButton.mousePressed (cakePress)  
}

function cakePress() {
  clickCount++
  imageMode (CENTER)
   let cakes = [cake_chocolate, cake_pink, cake_pinkDrip, cake_white, cake_rainbow]
   for (let i = 0; i<5; i++){
    if (clickCount === i+1){
      image (cakes[i], 225, 425)}
    else if (clickCount === i+2 && cakes[i] === true){
      cakes[i].hide()
    }   
  }
}

Answer 1

这应该可行，您不必每次绘制新图像时都定义 imageMode()，因此我将其移至 setup（与 cakes 数组相同）。为了清除后面的所有图像，我将 background() 放入 cakePress() 中，因此当您添加其他部分（如帽子）时，您必须再次绘制它们。现在，当您单击 clickCount 时，会检查它是否超过数组中的内容。如果是，则将其设置回 0，因此它会按照您上面的要求循环，然后它只会绘制它。

let clickCount = 0
let cakes = [cake_chocolate, cake_pink, cake_pinkDrip, cake_white, cake_rainbow];
let cakeButton

function preload (){
  card_bg = loadImage ("card_bg.png")
  cake_chocolate = loadImage ("cake_chocolate.png")
  cake_pink = loadImage ("cake_pink.png")
  cake_pinkDrip = loadImage ("cake_pinkDrip.png")
  cake_rainbow = loadImage ("cake_rainbow.png")
  cake_white = loadImage ("cake_white.png")
  hat_chevron = loadImage ("hat_chevron.png")
  hat_dots = loadImage ("hat_dots.png")
  hat_puff = loadImage ("hat_puff.png")
  hat_stars = loadImage ("hat_stars.png")
  hat_stripes = loadImage ("hat_stripes.png")
}

function setup() {
  createCanvas(450, 600);
  background(220);
  imageMode (CENTER)
  image (card_bg, 0, 0)
  cakeButton = createButton("click me", "blue")
  cakeButton.position (125, 600)
  cakeButton.size (200, 150)
  cakeButton.mousePressed (cakePress)  
}

function cakePress() {
  background(220);
  clickCount++
  if(clickCount >= cakes.length){
  clickCount = 0;
}
  image (cakes[clickCount], 225, 425)
  
}