僅當滿足特定條件時才顯示隱藏按鈕

Question

我有一個小遊戲，當所有的心都失去時，應該會出現一個重置按鈕。我一生都無法弄清楚為什麼它沒有出現。我重寫了 3 次，想知道這是否是我分配其值的方式，但它們都不起作用。當我刪除隱藏按鈕的語句後，該按鈕就會出現，但應該有驗證語句在適當的位置，使其再次出現。

const resetButton = document.getElementById('reset');

function reset() {
  location.reload();
}

resetButton.addEventListener('click', reset);

// Hide reset button until no hearts left
function hideReset() {
  if (foodHeart1.src.match("images/emptyheart.png" && playHeart1.src.match("images/emptyheart.png"))) {
    resetButton.style.display = "visible";
  } else {
    resetButton.style.display = "none";
  }
}

hideReset();

我嘗試過移動它，將其放置在新的區域，但運氣不佳。我不知道還能怎麼寫這篇。

Answer 1

什麼呼叫函數 hideReset()？如果在主更新循環或命中碰撞中沒有呼叫它，則沒有任何東西可以到達那裡。使用圖像來查詢玩家是否死亡是一個有趣的想法，但僅使用變數會更有效率。

//way up at the top
const resetButton = getElementById('reset');
resetButton.setAttribute('display', 'none');
//way up at the top


//in the player class   
processDamage(hitVal){
    this.HP -= hitVal;
    if(this.HP <= 0){
        resetButton.setAttribuute('display', 'block');
        //----other death state code---
    }
}

我覺得我可能需要添加更多程式碼才能完整回答......我希望這有幫助！

Answer 2

以下是一些程式碼，似乎可以實現您所需的功能：

    
        
        
        
    
    
              
              
       
       Change to empty Heart
       Reset

    
    sssccc

const resetButton = document.getElementById("reset");
const foodHeart1 = document.getElementById("foodHeart1");
const playHeart1 = document.getElementById("playHeart1");

function reset() {
    location.reload();
}

resetButton.addEventListener("click", reset);

// Hide reset button until no hearts left
function hideReset() {
    const foodHeartMatch = foodHeart1.src.match("images/emptyheart.png");
    const foodHeartEmpty = foodHeartMatch && foodHeartMatch.length === 1;
    const playHeartMatch = playHeart1.src.match("images/emptyheart.png");
    const playHeartEmpty = playHeartMatch && playHeartMatch.length === 1;

    console.log(`${foodHeartEmpty} : ${playHeartEmpty}`);

    if (foodHeartEmpty && playHeartEmpty) {
        resetButton.style.display = "inline";
    } else {
        resetButton.style.display = "none";
    }
}

hideReset();

// Change the images to empytyHear
function changeImage() {
    foodHeart1.src = "images/emptyheart.png";
    playHeart1.src = "images/emptyheart.png";

    hideReset();
}

我不相信有 style.display = "visible"，但如果這是錯的，我希望有人能糾正我。 （快速查看 MDN。我已經設定了此處內聯，但您可以使用任何適當的值來顯示按鈕。

我還在匹配函數上使用了長度運算符，因為它會傳回一個陣列（用於您的條件語句）。

如 James 在評論中提到的，當您更新心臟值時，很可能會呼叫 hideReset() 函數。在本例中，我將其放入更改圖像的函數中。

有很多方法可以改進這一點，但我希望它能讓您克服最初面臨的困難