Création d'un mini jeu vidéo

**bahh66** · 27/09/2022, 22h28

Merci pour l'info pour le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.write

, j'ai donc essayé de modifier mon code par rapport au tien. (dans un premier temps, je pars sur des svg, je verrai si un jour je mets des images).

Si j'ai bien compris ton code, tu récupères le nombre de vies sélectionnées dans le row, puis tu demandes à la fonction de remplir les coeurs ou de les vider.

Ce que je n'arrive pas à faire, c'est dans mon code lui expliquer où il doit récupérer l'info du nombre de vies.
Chez moi elle est définie par la variable vie.

Du coup, j'ai essayé sans succès ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<body>
    <map name="testmap" id="zones_image">
		<area
			shape="rect"
			coords="570,195,660,275"
			data-nom="bleu turquoise"
		/>
		<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">
 
 
<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>
        <div class="svg-heart">
        <svg><use href="#empty-heart"></use></svg>
        <svg><use href="#empty-heart"></use></svg>
        <svg><use href="#empty-heart"></use></svg>
 
      </div>
        </FONT>
</DIV>
</div>
<script type="text/javascript">
    
   
    let compt = 0;
    let vie = 3;
 
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;
                }
        );
 
 
});
 
  const elemSelect = document.getElementById("nbdevies");
elemSelect.addEventListener("change", (e) => {
  setNbrVies("nbdevies");
});
const elemHeart = document.querySelectorAll(".svg-heart use");
 
function setNbrVies(nbr) {
  elemHeart.forEach((svg, ind) => {
    // version courte
    // svg.classList[ind < nbr ? "add" : "remove"]("fill-heart");
 
    // version lisible
    svg.classList.remove("fill-heart");
    if (ind < nbr) {
      svg.classList.add("fill-heart");
    }
  });
}
    
</script>
 
<svg style="display:none">
  <symbol viewBox="-1 0 22 20" id="empty-heart" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"></path>
  </symbol>
</svg>
 
 
 
 
 
</body>

J'ai bien 3 coeurs vides qui s'affichent au début mais impossible de les faire changer pour qu'il comprenne qu'au début, les 3 vies sont pleines.

**NoSmoking** · 28/09/2022, 10h11

Remarques préliminaires :

prend l'habitude de bien indenter ton code, HTML/JS, cela te rendra bien des services
travaille avec du code HTML actuel, exit les balises comme <font>, le style-inline, dans les balises, auquel il faut préférer, ne serait ce que pour la maintenance, l'utilisation des déclarations entre balises <style></style> ou encore feuille de style externe.

Ce que je n'arrive pas à faire, c'est dans mon code lui expliquer où il doit récupérer l'info du nombre de vies.

La mise à jour doit se faire lorsque tu décomptes le nombre de vies fonction de la réponse donnée.
Dans la partie else tu pourrais avoir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
else {
  let msg;
  vie -= 1;
  // mise à jour nbr vies
  setNbrVies(vie);
  // traitement résultat
  if (vie == 0) {
    msg = "GAME OVER";
  }
  else {
    msg = "Il ne vous reste plus que " + vie + " vies";
  }
  // diffère l'affichage de la boîte alert
  setTimeout(() => alert(msg), 100);
}

J'ai bien 3 coeurs vides qui s'affichent au début mais impossible de les faire changer pour qu'il comprenne qu'au début, les 3 vies sont pleines.

IL ta faut au début appeler la fonction pour que les coeurs soient initialisés, mais surtout il ne faut pas que tu oublies de mettre le style qui correspond au classes ajoutées/supprimées.

Donc pour le code JavaScript tu devrait avoir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
const elemHeart = document.querySelectorAll(".svg-heart use");
function setNbrVies(nbr) {
  elemHeart.forEach((svg, ind) => {
    svg.classList.remove("fill-heart");
    if (ind < nbr) {
      svg.classList.add("fill-heart");
    }
  });
}
// initialisation des coeurs plein
setNbrVies(vie);

et pour le style en début de document, entre <head></head>, on devrait retrouver quelque chose comme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.svg-heart svg {
  --dim: 3em;
  width: var(--dim);
  height: var(--dim);
  fill: transparent;
  stroke: #000;
  stroke-width: .5;
}
.fill-heart {
  fill: #EFD;
  stroke: #080;
}
</style>

pour que l'on puisse voir l'effet.

Il te restera ensuite à gérer les conditions de fin de partie plus précisément, la mise en page étant autre chose.

Si j'ai bien compris ton code, tu récupères le nombre de vies sélectionnées dans le row, puis tu demandes à la fonction de remplir les coeurs ou de les vider.

Effectivement, on récupère la valeur du <select> et dans ton cas la partie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const elemSelect = document.getElementById("nbdevies");
elemSelect.addEventListener("change", (e) => {
  setNbrVies("nbdevies");
});

peut être supprimée, elle ne sert que dans le cadre de la démo.

**bahh66** · 28/09/2022, 12h46

Merci pour les infos sur le font et sur l'indentation, je vais essayer d'y faire attention.

J'ai donc essayé d'utiliser les codes que tu as écrit avec celui que j'avais déjà. Beaucoup de temps passé à comprendre (perte des map area, de l'affichage des résultats...)
Mais après réflexion, j'en suis arrivé là

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
    <title>Jeu</title>
	<style>
        body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        font-family: 'Pacifico', cursive;
        }
 
        div {
                width: 100%;
        }
        img[usemap] {
                border: none;
                height: auto;
                max-width: 100%;
                width: auto;
        }
    .container {
        color:#ffffff;
        font-size: 30px;
        }
     
    .svg-heart svg {
  --dim: 3em;
  width: var(--dim);
  height: var(--dim);
  fill: transparent;
  stroke: #000;
  stroke-width: .5;
}
.fill-heart {
  fill: #EFD;
  stroke: #080;
}    
        
        
        </style>
 
</head>
<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">
 
<!-- pour utilisation des coeurs -->
<svg style="display:none">
  <symbol viewBox="-1 0 22 20" id="empty-heart" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"></path>
  </symbol>
</svg>
 
 
<script type="text/javascript">
    
   
    let compt = 0;
    let vie = 3;
    
 
 
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 {
  let msg;
  vie -= 1;
  // mise à jour nbr vies
  setNbrVies(vie);
  // traitement résultat
  if (vie == 0) {
    msg = "GAME OVER";
  }
  else {
    msg = "Il ne vous reste plus que " + vie + " vies";
  }
  // diffère l'affichage de la boîte alert
  setTimeout(() => alert(msg), 100);
}           
            
const elemSelect = document.getElementById("nbdevies");
elemSelect.addEventListener("change", (e) => {
  setNbrVies("nbdevies");
});   
            
    const elemHeart = document.querySelectorAll(".svg-heart use");
function setNbrVies(nbr) {
  elemHeart.forEach((svg, ind) => {
    svg.classList.remove("fill-heart");
    if (ind < nbr) {
      svg.classList.add("fill-heart");
    }
  });
}
// initialisation des coeurs plein
setNbrVies(vie);
            
            
            
            document.getElementById("nbdevies").innerHTML = vie;
                }
        );
 
 
});
 
    
</script>
<div class="container">    
<DIV STYLE="position:absolute; top:250; left:50">
       Score : <span id="champDuPrompt"></span>
        Vies : <span id="nbdevies"></span>
          <div class="svg-heart">
        <svg><use href="#empty-heart"></use></svg>
        <svg><use href="#empty-heart"></use></svg>
        <svg><use href="#empty-heart"></use></svg>
      </div>
</DIV>
</div>
 
</body>
</html>

Cela m'affiche Nom : Capture d’écran 2022-09-28 113725.jpg
Affichages : 263
Taille : 169,4 Ko

Donc les coeurs commencent vides et aucun affichage des scores, ni des vies (nombres), mais :

- Si je mets une bonne réponse dans une map les coeurs se remplissent.
Si ensuite je mets une mauvaise réponse plus rien ne change (pas de perte de vies, de coeurs qui se vident, plus de msg).

- Si je commence par une mauvaise réponse, pas d'affichage.
Si ensuite je mets une bonne réponse, affichage de 2 coeurs/3 plus nombre de vies et points justes, toujours plus de msg.

Donc j'en conclus que les coeurs et l'affichage ne s'affichent que quand je mets une bonne réponse et jamais quand j'en mets une mauvaise. En revanche, il compte quand même celles-ci.

Je pense que je dois avoir un problème dans l'ordre de mes codes entre les différentes fonctions : map, balises_area, setNbrVies et la demande d'affichage par le div container.

**NoSmoking** · 28/09/2022, 14h43

Je pense que je dois avoir un problème dans l'ordre de mes codes entre

c'est le moindre que l'on puisse dire

Tout d'abord il te faut mettre tout le code HTML avant les balises <script></script>, cela vaut donc pour la partie :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
  <DIV STYLE="position:absolute; top:250; left:50">
    Score : <span id="champDuPrompt"></span>
    Vies : <span id="nbdevies"></span>
    <div class="svg-heart">
      <svg><use href="#empty-heart"></use></svg>
      <svg><use href="#empty-heart"></use></svg>
      <svg><use href="#empty-heart"></use></svg>
    </div>
  </DIV>
</div>

... ensuite dans le code JavaScript il te faut respecter l'ordre des instructions et ne pas tout mélanger :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script>
let compt = 0;
let vie = 3;
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 {
        let msg;
        vie -= 1;
        // mise à jour nbr vies
        setNbrVies(vie);
        // traitement résultat
        if (vie == 0) {
          msg = "GAME OVER";
        }
        else {
          msg = "Il ne vous reste plus que " + vie + " vies";
        }
        // diffère l'affichage de la boîte alert
        setTimeout(() => alert(msg), 100);
      }
      document.getElementById("nbdevies").innerHTML = vie;
    }
  );
});
 
//// et ensuite ///////////////////////////////////////
const elemSelect = document.getElementById("nbdevies");
elemSelect.addEventListener("change", (e) => {
  setNbrVies("nbdevies");
});
const elemHeart = document.querySelectorAll(".svg-heart use");
 
function setNbrVies(nbr) {
  elemHeart.forEach((svg, ind) => {
    svg.classList.remove("fill-heart");
    if (ind < nbr) {
      svg.classList.add("fill-heart");
    }
  });
}
// initialisation des coeurs plein
setNbrVies(vie);
</script>

Maintenant si tu souhaites afficher le score et le nombre de vie au départ il y a deux solutions

en dur dans le HTML, la plus simple ;

ajouter en fin de script les inscriptions d'affichage soit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById("nbdevies").innerHTML = vie;
document.getElementById("champDuPrompt").innerHTML = compt;

**bahh66** · 28/09/2022, 15h04

Merci

j'avais pas vu que je définissais la fonction dans la balise.

Je vais enfin pouvoir passer à l'étape d'après.

Création d'un mini jeu vidéo

JavaScript

Discussions similaires

Partager

Partager