我是p5.js和一般編碼的初學者。在我的課堂專案中，我正在創建一個可定制的生日卡。卡片的三個部分是可定制的：蛋糕樣式、帽子樣式和蛋糕上的面部表情。理想情況下，用戶可以點擊卡片的每個部分，回圈瀏覽定制選項以滿足他們的口味。
我現在在這篇帖子上粘貼的代碼中只有蛋糕樣式選項。此外，我對它進行了編碼，使用戶可以點擊一個按鈕來選擇他們的蛋糕樣式，而不是點擊卡片上的特定區域，因為這對我來說要簡單得多。
我的問題是，我如何編碼，使用戶第一次點擊按鈕時，彈出第一個蛋糕選項，然后第二次點擊時，彈出第二個蛋糕選項，等等。我需要在每次點擊時彈出一個蛋糕選項；所有其他的蛋糕選項都需要保持隱藏。
我的另一個問題是，在所有的蛋糕選項都顯示出來后，再回圈回到第一個蛋糕選項。我有五個蛋糕選項，那么我如何撰寫代碼，以便不僅第一次點擊會出現第一個蛋糕選項，而且還會出現第六個、第11個、第16個等等？
提前感謝。
let clickCount = 0
let cakes
let cakeButton
function preload（）{
card_bg = loadImage ("card_bg.png"/span>)
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）。
影像（card_bg, 0, 0)
cakeButton = createButton("click me"/span>, "blue"/span>)
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){
影像（cakes[i], 225, 425） }
else if (clickCount === i 2 && cakes[i] === true){
cakes[i].hide()
}
}
}
uj5u.com熱心網友回復：
這應該可以，你不必在每次繪制新圖片時都定義imageMode()，所以我把它移到了setup（與cakes array相同）。為了清除后面的所有影像，我把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"/span>)
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)
影像（card_bg, 0, 0)
cakeButton = createButton("click me"/span>, "blue"/span>)
cakeButton.position(125, 600)
cakeButton.size (200, 150)
cakeButton.mousePressed (cakePress)
}
function cakePress（） {
background（220）。
clickCount
if(clickCount >= cakes.length){
clickCount = 0;
}
影像（cakes[clickCount], 225, 425）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/328911.html
標籤：
上一篇：For回圈和lapply