按鈕未將 canvas 重置為原始 state JS p5

Question

您好，我是 JS p5 的新手，我正在嘗試讓我的代碼以隊列按鈕開始。 按下此按鈕后，將出現文本“正在搜索...”，然后是取消按鈕。 我想要這樣，如果用戶單擊取消按鈕或等待一定時間，代碼將再次重置為只有隊列按鈕的空白狀態。 下面是我的代碼：

var queueButton;
var cancelButton = null;
var queuing = false;

function setup() {
  
  createCanvas(400, 400);
  queue();
}


function draw() {
    
    background(255, 255, 255);
  
    if(queuing == true){
      
        fill(0, 0, 0);
        textSize(40);
         
    }
    else{
      
      fill(255, 255, 0);  //CHANGE TO WHITE 
    }
  
    text("Searching...", 140, 115);
}

function queue(){
    
  queueButton = createButton("Queue");
  queueButton.mousePressed(cancel);
  
}

function cancel(){
  
  queuing = !queuing;
  
  if(cancelButton == null){
      
    cancelButton = createButton("Cancel");
  }
  
  setTimeout(resetQueue, 120000);
  cancelButton.mousePressed(resetQueue);

}

function resetQueue(){
  
  queueing = !queuing;
  
  if(cancelButton != null){
    
      cancelButton.remove();
      cancelButton = null;
  }

}

截至目前，我似乎無法將代碼重置為空白 canvas 和時間用完或用戶單擊取消時的隊列按鈕。 如果我重新單擊隊列按鈕，我現在的代碼會更改顏色，但理想情況下，我的代碼會將 canvas 重置為其原始的 state，而不是讓代碼將“正在搜索...”文本顏色設置為白色。 截至目前，我正在使用 p5 web 編輯器。 任何幫助表示贊賞！

Answer 1

p5 中的場景管理可能有點棘手。 這是一種可能的方法。

這個想法是每個 state 的 function。每個 state function 負責拆除前一個 state 的任何殘余並設置它們的 state。 單擊處理程序和超時設置為觸發下一個 state function。 draw循環可以根據queuing變量確定哪個 state 處於活動狀態。

請注意，排隊 state 清理的一部分需要跟蹤超時並取消它。

 let cancelButton; let queueButton; let queuing; let queuingTimeout; function setup() { createCanvas(400, 400); textSize(40); idleState(); } function draw() { background(255, 255, 255); if (queuing) { text("Searching...", 50, 50); } } function idleState() { // clean up queuing state cancelButton?.remove(); clearTimeout(queuingTimeout); // initialize idle state queuing = false; queueButton = createButton("Queue"); queueButton.position(5, 5); queueButton.mousePressed(queuingState); } function queuingState() { // clean up idle state queueButton?.remove(); // initialize queuing state queuing = true; queuingTimeout = setTimeout(idleState, 10000); // 10 seconds cancelButton = createButton("Cancel"); cancelButton.position(5, 5); cancelButton.mousePressed(idleState); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

如果您希望隊列按鈕始終可見，請將取消按鈕移到其他位置，刪除queueButton?.remove()並移動以queueButton = createButton("queue");開頭的 3 個按鈕初始化行。 setup .

使用永久隊列按鈕，事情會變得有點棘手。 如果多次敲擊，將創建許多cancelButton和setTimeout 。 使用if (queuing) return保護queuingState function 以防止這種情況和/或在排隊 state 處於活動狀態時禁用排隊按鈕。

這種設計可以很好地滿足您的簡單要求，但不是超級可擴展的。 如果您有兩個以上的狀態或需要處理復雜的 state 設置和拆卸操作，請參閱這些深入的帖子：

• 使用 p5.js 從一個場景過渡到下一個場景
• 嘗試允許用戶通過按下按鈕逐步使用 JS 和 P5 算法的 for 循環