Création d'un mini jeu vidéo

Version imprimable

Voir 40 message(s) de cette discussion en une page

23/09/2022, 11h10
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, 11h08
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, 13h31
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, 17h15
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, 08h58
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, 09h12
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, 09h53
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, 10h18
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, 20h50
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

Voir 40 message(s) de cette discussion en une page