仅当满足特定条件时才显示隐藏按钮

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() 函数。在本例中，我将其放入更改图像的函数中。

有很多方法可以改进这一点，但我希望它能让您克服最初面临的困难