Forum : Création d'un jeu vidéo

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">

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é.

redlinx

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)

;)

Reuben Leighton

Bonjour les amis, j'admire vraiment les gens qui créent des jeux bons et intéressants. Aidez les personnes ennuyées comme moi à entrer dans le jeu pour soulager le stress après un travail fatigant. Puis-je vous demander si vous connaissez des mods de jeu qui sont à la mode ces derniers temps. Pouvez-vous me donner des noms et où les télécharger. Je recherche des mods de jeux pc techloky pour les télécharger. Pouvez-vous juste m'aider. Merci!

Création d'un jeu vidéo

2 réponses