Afficher les boutons masqués uniquement lorsque certaines conditions sont remplies

Question

J'ai un petit jeu où lorsque tous les cœurs sont perdus, un bouton de réinitialisation devrait apparaître. Je n'arrive pas à comprendre pourquoi il ne s'est pas présenté. Je l'ai réécrit 3 fois en me demandant si c'était ainsi que j'avais attribué sa valeur, mais aucune n'a fonctionné. Lorsque je supprime l'instruction qui masque le bouton, le bouton apparaît, mais des instructions de validation doivent être mises en place pour le faire réapparaître.

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

J'ai essayé de le déplacer, de le placer dans une nouvelle zone, mais sans succès. Je ne sais pas comment écrire ça autrement.

Answer 1

Qu'est-ce qui appelle la fonction hideReset() ? S'il n'est pas appelé dans la boucle de mise à jour principale ou lors d'une collision, rien n'y arrivera. Utiliser une image pour demander si un joueur est mort est une idée intéressante, mais il serait plus efficace d'utiliser uniquement des variables.

//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---
    }
}

J'ai l'impression que je devrai peut-être ajouter plus de code pour répondre pleinement... J'espère que cela aidera !

Answer 2

Voici un code qui semble faire ce dont vous avez besoin :

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

Je ne crois pas qu'il existe style.display = "visible", mais j'espère que quelqu'un pourra me corriger si c'est faux. ( Aperçu rapide de MDN. Je l'ai configuré en ligne ici, mais vous pouvez utiliser n'importe quelle valeur appropriée pour afficher le bouton.

J'ai également utilisé l'opérateur de longueur sur la fonction match car il renvoie un tableau (pour votre instruction conditionnelle).

Comme James l'a mentionné dans les commentaires, la fonction hideReset() sera très probablement appelée lorsque vous mettrez à jour la valeur du cœur. Dans ce cas, je le mets dans une fonction qui change l'image.

Il existe de nombreuses façons d'améliorer cela, mais j'espère que cela vous permettra de surmonter les premières difficultés auxquelles vous êtes confronté