Zeigen Sie ausgeblendete Schaltflächen nur an, wenn bestimmte Bedingungen erfüllt sind

Question

Ich habe ein kleines Spiel, bei dem ein Reset-Button erscheinen sollte, wenn alle Herzen verloren sind. Ich kann beim besten Willen nicht herausfinden, warum es nicht aufgetaucht ist. Ich habe es dreimal umgeschrieben und mich gefragt, ob ich seinen Wert so zugewiesen habe, aber keines davon hat funktioniert. Wenn ich die Anweisung entferne, die die Schaltfläche verbirgt, wird die Schaltfläche angezeigt, es sollten jedoch Validierungsanweisungen vorhanden sein, damit sie wieder angezeigt wird.

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();

Ich habe versucht, es zu verschieben und an einem neuen Ort zu platzieren, aber ohne Erfolg. Ich weiß nicht, wie ich das sonst schreiben soll.

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

    
    

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

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