僅當滿足特定條件時才顯示隱藏按鈕
P粉545682500
P粉545682500 2024-01-10 17:29:34
0
2
434

我有一個小遊戲,當所有的心都失去時,應該會出現一個重置按鈕。我一生都無法弄清楚為什麼它沒有出現。我重寫了 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();

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

P粉545682500
P粉545682500

全部回覆(2)
P粉447495069

什麼呼叫函數 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 

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

P粉558478150

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


    
        
        
        Hearts
    
    
       emptyHeart       
       emptyHeart       
       
       
       

    
    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() 函數。在本例中,我將其放入更改圖像的函數中。

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板