Création d'un mini jeu vidéo

Version imprimable

23/09/2022, 10h10
bahh66

Création d'un mini jeu vidéo

Bonjour à tous,
j'aimerais créer un jeu vidéo (avec des anecdotes de mes collègues de boulot) un peu dans ce style.

https://www.redbull.com/fr-fr/projec...bull-play-hard

J'avoue que je n'ai aucune idée de comment je pourrais faire.
Une image avec des zones de click ne me permettrait pas (j'ai l'impression) de rentrer les réponses et de compter les points en fonction des réponses.

Si quelqu'un à une idée, cela m'intéresserait.

Merci par avance.

tout ceci peut se faire en javascript. avec l'évènement "click" vous pouvez récupérez les coordonnées du clic et afficher ensuite une zone de texte pour saisir la réponse.
vous pouvez essayer ce code par exemple, les coordonnées s'affichent dans la console :

Code:

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
 
<img
	src="https://upload.wikimedia.org/wikipedia/commons/2/2e/Coral_Outcrop_Flynn_Reef.jpg"
	id="image_fond"
	alt=""
/>
 
<script>
"use strict";
 
document
        .getElementById("image_fond")
        .addEventListener(
                  "click"
                , e => console.log(e)
        )
;
 
</script>
 
 
</body>
 
</html>

Je n'arrive pas à combiner le code que tu m'as donné avec une "zone cliquable".
J'ai essayé le code suivant pour pouvoir ouvrir une nouvelle fenêtre avec une zone de texte.

Code:

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Test</title>
	<style>
        body {
                font-family: Helvetica, Arial, sans-serif;
        }
        h1 {
                font-size: 20px;
        }
        div {
                width: 100%;
        }
        img[usemap] {
                border: none;
                height: auto;
                max-width: 100%;
                width: auto;
        }
        </style>
</head>
<body>
<div>
	<img src="Fond.png" width="1024" height="768" usemap="#testmap" alt="" />
	<map name="testmap">
		<area shape="rect" coords="570,195,660,275" href="large.html" target="_blank"/>
 
</map>
</div>
 
</body>
</html>

et celui-ci dans la nouvelle fenêtre.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="Content-Type">
  <title>large</title>
        <SCRIPT LANGUAGE="javascript">
function controle(form1) {
var test = document.form1.input.value;
alert("Vous avez tapé : " + test);
}
</SCRIPT>
</head>
<body>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="input" VALUE=""><BR>
<INPUT TYPE="button" NAME="bouton" VALUE="OK" onClick="controle(form1)">
</FORM>
</body>
</html>

Je me disais que la première page pourrait "écouter" ce qui est écrit dans la deuxième pour vérifier si cela correspond à une réponse exacte.

Est ce que je pars dans une bonne direction ou alors je fais n'importe quoi?

24/09/2022, 10h08
mathieu

tu n'as pas besoin d'ouvrir une nouvelle fenêtre et ça tombe bien parce que c'est à éviter.

je pense que le plus simple est que tu mettes le formulaire dans une balise cachée et tu la fais apparaitre au moment du clic :
https://javascript.developpez.com/fa...SS#affichObjet

Bon du coup,
j'essaie de commencer simple en mettant une image et en cliquant dessus une boite de dialogue apparait que l'on remplit.
En validant j'essaie 2 méthodes un affichage direct de la réponse entrée et un affichage sur la page (afin plus tard de récupérer l'info pour la valider ou non)
Code:

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 <!DOCTYPE html> <html> <head> <title>Prompt Dialog Box</title> </head> <body> <img src="Fond.png" onclick="testPromptDialog()"> Le résultat va s'afficher ci-après: <span id="champDuPrompt"></span> <script type="text/javascript"> function testPromptDialog() { var result = prompt("Entre le nom du jeu :", ""); if(result != null) { alert("Le jeu s'appelle " + result); } } document.getElementById("champDuPrompt").innerHTML = result; </script> </body> </html>
Sauf qu'à l'affichage sur la page initiale, le résultat ne s'affiche pas donc il ne doit pas enregistrer la réponse avec innerHTML.

Une idée d'où vient le problème?

24/09/2022, 12h31
mathieu

la variable result n'existe que dans la fonction testPromptDialog donc c'est par exemple après le "alert" que tu peux utiliser la valeur pour modifier une balise.

J'essaie de faire apparaitre à présent un compteur si la réponse est juste (ici : bleu) et d'augmenter les points de 10 pour chaque bonne réponse.

J'ai fait la modification pour l'affichage mais dès que j'ai ajouter une variable pour le compteur, il n'affiche plus le résultat.

De plus j'ai l'impression d'avoir mal défini ma variable compt et que du coup elle n'augmentera jamais.

Code:

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
<!DOCTYPE html>
<html>
   <head>
      <title>Prompt Dialog Box</title>
 
 
   </head>
   <body>
      <img src="Fond.png" onclick="testPromptDialog()">
 
       Ton score est de : <span id="champDuPrompt"></span>
<script type="text/javascript">
    
    var compt = "0";
    
          function testPromptDialog()  {
 
              var result = prompt("Entre le nom du jeu :", "");
 
              if(result === bleu)  {
                  alert("Le jeu s'appelle " + result);
                  compt=compt+10;
              }
              document.getElementById("champDuPrompt").innerHTML = compt;
         }
 
    
 
 
</script>
 
   </body>
</html>

Merci encore de l'aide apporter.

24/09/2022, 16h15
mathieu

regarde dans la console, tu as une erreur javascript pendant l'exécution du code.

je viens aussi de penser à quelque chose : je t'ai dit que tu peux tout faire en javascript mais ça veut dire que les réponses seront dans le code javascript et tout le monde pourra les lire et tricher. si tu as besoin d'éviter cela, tu devras utiliser un langage côté serveur comme php ou node.js par exemple.

Ok, j'ai résolu mon histoire de compteur avec ce code :

Code:

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
<!DOCTYPE html>
<html>
   <head>
      <title>Prompt Dialog Box</title>
 
 
   </head>
   <body>
      <img src="Fond.png" onclick="testPromptDialog()">
 
       Ton score est de : <span id="champDuPrompt"></span>
<script type="text/javascript">
    
    var compt = parseInt("0");
    
          function testPromptDialog()  {
 
              var result = prompt("Entre le nom du jeu :", "");
 
              if(result === "bleu")  {
                  //alert("Le jeu s'appelle " + result);
                  compt=compt+10;
              }
              document.getElementById("champDuPrompt").innerHTML = compt;
         }
 
    
 
 
</script>
 
   </body>
</html>

J'aimerais maintenant faire en sorte qu'il y ait plusieurs zones cliquables sur mon image qui renvoie chacune à des réponses différentes. J'ai essayé avec une mais cela ne rend pas la zone cliquable du coup plus rien n'apparait.

Code:

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
<!DOCTYPE html>
<html>
   <head>
      <title>Prompt Dialog Box</title>
	<style>
        body {
                font-family: Helvetica, Arial, sans-serif;
        }
        h1 {
                font-size: 20px;
        }
        div {
                width: 100%;
        }
        img[usemap] {
                border: none;
                height: auto;
                max-width: 100%;
                width: auto;
        }
        </style>
 
   </head>
   <body>
      <img src="Fond.png">
 
       Ton score est de : <span id="champDuPrompt"></span>
<script type="text/javascript">
    
    var compt = parseInt("0");
 
 
          function testPromptDialog()  {
 
              var result = prompt("Entre le nom du jeu :", "");
 
              if(result === "bleu")  {
                  //alert("Le jeu s'appelle " + result);
                  compt=compt+10;
              }
              document.getElementById("champDuPrompt").innerHTML = compt;
         }
 
    
 
    <map name="testmap">
                <area shape="rect" coords="570,195,660,275" onclick="testPromptDialog()"/>
                
</map>
 
</script>
 
   </body>
</html>

Aurais-tu une idée de la raison pour laquelle la map ne fonctionne pas.

PS: Je vais d'abord faire en javascript et si un jour je veux cacher les réponses je chercherai à le transformer en php.

J'ai modifié comme cela et ca semble fonctionner

Code:

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
<!DOCTYPE html>
<html>
   <head>
      <title>Prompt Dialog Box</title>
	<style>
        body {
                font-family: Helvetica, Arial, sans-serif;
        }
        h1 {
                font-size: 20px;
        }
        div {
                width: 100%;
        }
        img[usemap] {
                border: none;
                height: auto;
                max-width: 100%;
                width: auto;
        }
        </style>
 
   </head>
   <body>
           <map name="testmap">
		<area shape="rect" coords="570,195,660,275" onclick="testPromptDialog()"/>
 
</map>
      <img usemap="#testmap" src="Fond.png">
 
       Ton score est de : <span id="champDuPrompt"></span>
<script type="text/javascript">
    
    var compt = parseInt("0");
 
 
          function testPromptDialog()  {
 
              var result = prompt("Entre le nom du jeu :", "");
 
              if(result === "bleu")  {
                  //alert("Le jeu s'appelle " + result);
                  compt=compt+10;
              }
              document.getElementById("champDuPrompt").innerHTML = compt;
         }
 
    
 
 
 
</script>
 
   </body>
</html>

Nouvelle question :
Vu que j'ai une quarantaine de zones à créer avec autant de réponses différentes, y a-t-il un moyen de faire plus concis au niveau du code? Car à chaque fois je créé une nouvelle fonction pour valider une réponse différente

Ex :

Code:

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
<!DOCTYPE html>
<html>
   <head>
      <title>Prompt Dialog Box</title>
	<style>
        body {
                font-family: Helvetica, Arial, sans-serif;
        }
        h1 {
                font-size: 20px;
        }
        div {
                width: 100%;
        }
        img[usemap] {
                border: none;
                height: auto;
                max-width: 100%;
                width: auto;
        }
        </style>
 
   </head>
   <body>
           <map name="testmap">
		<area shape="rect" coords="570,195,660,275" onclick="testPromptDialog()"/>
        <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" onclick="testPromptDialog2()"/>
 
</map>
      <img usemap="#testmap" src="Fond.png">
 
       Ton score est de : <span id="champDuPrompt"></span>
<script type="text/javascript">
    
    var compt = parseInt("0");
 
 
          function testPromptDialog()  {
 
              var result = prompt("Entre le nom du jeu :", "");
 
              if(result === "bleu")  {
                  //alert("Le jeu s'appelle " + result);
                  compt=compt+10;
              }
              document.getElementById("champDuPrompt").innerHTML = compt;
         }
 
    
 
          function testPromptDialog2()  {
 
              var result = prompt("Entre le nom du jeu :", "");
 
              if(result === "jaune")  {
                  //alert("Le jeu s'appelle " + result);
                  compt=compt+10;
              }
              document.getElementById("champDuPrompt").innerHTML = compt;
         }
 
    
 
 
</script>
 
   </body>
</html>

Je vais aussi essayer de m'attaquer à la mise en forme du compteur de points.

tu peux définir le nom des zones comme cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
	<map name="testmap" id="zones_image">
		<area
			shape="rect"
			coords="570,195,6600,2705"
			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>

et ensuite le code javascript comme cela :

Code:

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
let compt = 0;
 
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;
 
			}
 
		}
	);
 
 
});

25/09/2022, 07h58
bahh66

Je viens de tester le code que tu m'as donné, mais il ne prends en compte que la réponse bleu et pas jaune et ce quelle que soit la map. Du coup jaune ne permet pas de marquer de points et bleu en marque même sur la balise jaune.

Je suis perdu.8O
25/09/2022, 08h12
mathieu

dans mon test, j'avais agrandi la zone "bleu" parce que je ne voyais pas où étaient les zones. donc tu dois remettre les bonnes coordonnées.

J'ai essayé de déplacer les résultats des scores avec le code suivant :
Code:

1 2 3 4 5 6 7 <img usemap="#testmap" src="Fond.png" STYLE="position:absolute; top:650; left:50"> <DIV STYLE="position:absolute; top:250; left:50"> <FONT COLOR="#ffffff"> Ton score est de : <span id="champDuPrompt"></span> </FONT> </DIV>
Il les a placé en haut à gauche de l'image, ce qui est mieux, mais j'aimerais les décaler un peu.
Et peu importe les valeurs que je rentre en top et left il me les place toujours au même endroit.

25/09/2022, 08h53
mathieu

c'est une question de css donc pour ça il vaut mieux que tu crées une nouvelle discussion dans le forum css.
25/09/2022, 09h18
bahh66

1 pièce(s) jointe(s)

Ok pour le css je verrai plus tard alors.

Je vais m'attaquer donc au nombre de vies
Pièce jointe 626071

Ma démarche est la suivante (tu me dis si je me plantes).

-Je crée une variable qui vaut 3.
-Si la réponse n'est pas bonne dans les maps décrites j'enlève 1 à la variable
-Si la variable atteint 0, affichage Game Over

Ce qui m'embete c'est l'affichage, j'aime bien l'idée sur la photo ou le compteur de vies et sous forme d'une image qui s'éteint.
Mais je ne sais pas comment faire.

Bon j'arrive à affiche le nombre de vies ainsi qu'un coeur pour les représenter avec le code suivant :

Code:

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

Toutefois, l'affichage du score ainsi que des vies n'apparait au début, il faut que j'ai répondu à une zone cliquable pour que cela apparaisse. Pour quelle raison?

J'essaie d'afficher autant de coeurs que de vies restantes, j'ai essayé avec une fonction trouvée mais plus rien ne fonctionne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Question 2</title>
<script type="text/javascript">
 
function afficheimages(pNum)
{
   var nb_image = pNum;
   for (i=0 ; i<nb_image ; i++)
      {
         document.write('');
         document.write('
');
      }
}
 
</script>
</head>
 
</html>

Si quelqu'un a une idée cela m'arrangerait

27/09/2022, 19h50
NoSmoking

Bonjour,

Citation:

J'essaie d'afficher autant de coeurs que de vies restantes, j'ai essayé avec une fonction trouvée mais plus rien ne fonctionne.

beaucoup de chose à dire mais la principale est qu'il ne te faut pas utiliser document.write qui va, lorsque tu l’appelles comme tu le fais, effacer le contenu de la page en cours donc à bannir.

Il existe bien des façons de procéder et dire laquelle est la mieux est chose ardue.
Tu peux jouer avec l'ajout/retrait d'une classe sur tes éléments, changer l'attribut src des tes images, utiliser des fichiers SVG ...

Citation:

Si quelqu'un a une idée cela m'arrangerait

Voici un exemple de ce que l'on peut faire « simplement » en utilisant du SVG :

↪ Affichage nombre de vies

Merci pour l'info pour le

Code:

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:

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.

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.

Citation:

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:

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); }
Citation:

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:

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:

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.

Citation:

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:

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.

1 pièce(s) jointe(s)

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:

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 Pièce jointe 626296
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.

Citation:

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:

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:

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:

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

28/09/2022, 14h04
bahh66

Merci :ave::ave:

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

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