Création d'un mini jeu vidéo

**bahh66** · 23/09/2022, 10h10

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.

**mathieu** · 23/09/2022, 18h10

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

**bahh66** · 24/09/2022, 09h48

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 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
<!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 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
<!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?

**mathieu** · 24/09/2022, 10h08

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

**bahh66** · 24/09/2022, 11h55

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 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
<!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?

**mathieu** · 24/09/2022, 12h31

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.

**bahh66** · 24/09/2022, 16h02

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

**mathieu** · 24/09/2022, 16h15

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.

**bahh66** · 24/09/2022, 18h51

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

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

**bahh66** · 24/09/2022, 19h12

J'ai modifié comme cela et ca semble fonctionner

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

**bahh66** · 24/09/2022, 22h37

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

**mathieu** · 25/09/2022, 00h06

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

Code HTML :

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

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 :

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

**bahh66** · 25/09/2022, 07h58

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.

**mathieu** · 25/09/2022, 08h12

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.

**bahh66** · 25/09/2022, 08h23

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

Code html :

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

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.

**mathieu** · 25/09/2022, 08h53

c'est une question de css donc pour ça il vaut mieux que tu crées une nouvelle discussion dans le forum css.

**bahh66** · 25/09/2022, 09h18

Ok pour le css je verrai plus tard alors.

Je vais m'attaquer donc au nombre de vies
Nom : Capture d’écran 2022-09-25 091533.jpg
Affichages : 195
Taille : 255,2 Ko

Nom : Capture d’écran 2022-09-25 091533.jpg
Affichages : 195
Taille : 255,2 Ko

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.

**bahh66** · 25/09/2022, 18h22

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

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

**bahh66** · 26/09/2022, 19h46

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

**NoSmoking** · 27/09/2022, 19h50

Bonjour,

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

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