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

Question

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

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

我的问题是，我该如何编写代码，以便在用户第一次单击按钮时弹出第一个蛋糕选项，然后在第二次单击时弹出第二个蛋糕选项，依此类推？我需要每次点击弹出一个蛋糕选项；所有其他蛋糕选项都需要隐藏起来。

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

提前致谢。

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()，因此我将其移至设置（与 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)
  
}

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

Beginner p5.js, how to hide images in arrays

javascript

arrays

for-loop

mouseevent

p5.js