Bonjour, je souhaite faire un jeu vidéo dans le même style que le suivant
Jeu

Pour l'instant j'ai créé un code (en adaptant souvent plsu qu'en inventant) qui me permetd d'avoir une image avec des zones cliquables dans lequel je rentre une réponse qui est validé ou non.

"```
<body>
<map name="testmap" id="zones_image">
<area
shape="rect"
coords="570,195,660,275"
data-nom="bleu"
/>
<area
shape="poly"
coords="1027,266,1031,268,1034,271,1035,274,1033,279,1029,282,1021,282,1016,278,1017,271,1023,265,1024,261,1027,266"
data-nom="jaune"
/>
</map>

<img usemap="#testmap" src="Fond.png" STYLE="position:absolute; top:250; left:50">

<script type="text/javascript">

let compt = 0;
let vie = 3;
let vierest = 3 - vie;

let balises_area = Array.from(
document
.getElementById("zones_image") // identifiant de la balise "map"
.getElementsByTagName("area")
);

balises_area.forEach(area => { // parcours de toutes les balises "area"

area.addEventListener( // ajout d'un gestionnaire d'évènement à une balise
      "click"
    , evenement_clic => {

        let area = evenement_clic["target"];

        let result = prompt("Entre le nom du jeu :", "");

        if (result === area["dataset"]["nom"]) { // area["dataset"]["nom"] contient la valeur de la balise "data-nom"

            compt += 10;
            document.getElementById("champDuPrompt").innerHTML = compt;

        }
        else {vie-=1;
              if (vie==0) {alert("GAME OVER")}
              else {
                    alert("Il ne reste plus que "+vie+" vies");
                    }
             }
        document.getElementById("nbdevies").innerHTML = vie;
        document.getElementById('imgvies').innerHTML = '<img src="coeur.png">';
    }
);

});

</script>
<div class="container">
<DIV class="effetneon" STYLE="position:absolute; top:250; left:50">
<FONT COLOR="#ffffff">
Score : <span id="champDuPrompt"></span>
Vies : <span id="nbdevies"></span> <span id="imgvies"></span>
</FONT>
</DIV>
</div>

</body>



**Ce que je veux**
J'aimerai avoir une ligne de 3 images de coeurs pour les vies restantes et que ceux-ci se transforment en coeur vide lorsque l'on perd une vie.

**Ce que j'obtiens**

Le compte des vies est bon, je l'ai vérifié avec un affichage numérique. En revanche, je n'ai qu'un seul coeur qui apparait et je n'arrive pas à trouver quel code utilisé.

1 réponse


Salut

C'est cette ligne qui affiche le coeur :

    document.getElementById('imgvies').innerHTML = '<img src="coeur.png">';

Il faut que tu passes à ta div 3 images de coeur avec ou sans fond (ou 1 image mais qui change selon le nombre de vie)

;)