Création d'un jeu : évènement "clic" sur 3 éléments

**Blue_Marion** · 26/03/2016, 11h49

Bonjour,

Je débute tout juste en javascript.

Je suis en train de créer un mini jeu qui permet pour l'instant d'afficher une image d'une lettre de l'alphabet LSF aléatoirement et 3 lettres de l'alphabet français ,aléatoirement aussi, les 3 lettres sont strictement différentes et l'une d'elle est bien la traduction de l'image de la lettre LSF.
Maintenant je souhaiterais faire en sorte qu'on puisse cliquer sur ces 3 lettres de l'alpahbet français, et qu'au clic sur celle qui traduit l'image de la lettre LSF on affiche "Bonne réponse!" alors qu'au clic sur les 2 autres lettres on puisse afficher "Essaye encore, ce n'est pas la bonne traduction."

Voici mon code:

Code php :

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
<?php
	$nbimages=26;
	$nomimages[1]="A.PNG";
	$nomimages[2]="B.PNG";
	$nomimages[3]="C.PNG";
	$nomimages[4]="D.PNG";
	$nomimages[5]="E.PNG";
	$nomimages[6]="F.PNG";
	$nomimages[7]="G.PNG";
	$nomimages[8]="H.PNG";
	$nomimages[9]="I.PNG";
	$nomimages[10]="J.PNG";
	$nomimages[11]="K.PNG";
	$nomimages[12]="L.PNG";
	$nomimages[13]="M.PNG";
	$nomimages[14]="N.PNG";
	$nomimages[15]="O.PNG";
	$nomimages[16]="P.PNG";
	$nomimages[17]="Q.PNG";
	$nomimages[18]="R.PNG";
	$nomimages[19]="S.PNG";
	$nomimages[20]="T.PNG";	
	$nomimages[21]="U.PNG";
	$nomimages[22]="V.PNG";
	$nomimages[23]="W.PNG";
	$nomimages[24]="X.PNG";
	$nomimages[25]="Y.PNG";
	$nomimages[26]="Z.PNG";
	/*rand génère une valeur aléatoire.
	Initialisation du random (les microsecondes sont une valeur donnée au millionnième 
	-> Multiplier par 1 million pour avoir un entier*/					
	srand((double)microtime()*1000000);
	/*rand génère une valeur aléatoire*/
	$affimage=rand(1,$nbimages);
	/*Ici on met le code qui permet d'afficher 3 lettres de l'alphabet aléatoirement
	mais l'une d'elle est la traduction de l'image affichée plus haut dans le visuel*/
	$alphabet="abcdefghijklmnopqrstuvwxyz";
	/*str_shuffle mélange les caractères d'une chaîne de caractères*/
	$melange = str_shuffle($alphabet);
	/*substr retourne un segment de chaîne*/
	$lettres = str_shuffle(substr($melange, 0, 3));
?>
	<div><img id="imageLSF" src="images/Alphabet/<?php echo $melange[0]; ?>.png"></div>
<?php
	/*strlen calcule la taille d'une chaîne*/
	for ($i=0; $i<strlen($lettres); $i++){
		echo $lettres[$i];
	}			
?>

Si j'ai bien compris en me documentant sur le Javascript, pour créer l'évènement du "clic" il faudra que j'utilise la fonction:

Code :

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

element.addEventListener('click', myFunction);

mais ma compréhension du javascript s'arrête ici. Je ne comprends pas comment faire le rapprochement entre ce que j'ai fait en php et les évènement du "clic".

**01001111** · 26/03/2016, 13h10

si je comprends bien, tu offres 3 choix d'alphabet à l'utilisateur et tu veux qu'il clique sur le bon signe LSF, en fonction de la lettre demandée?
Avec ceci peut-être:

Code php :

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
 
for ($i=0; $i<strlen($lettres); $i++){
      echo '<a href="#" class="lettre">'.$lettres[$i].'</a>';
}
// ici tu mémorises en javascript la lettre choisie, 
// pas sécurisé mais je pense que ce n'est pas un problème pour ce genre de jeu.
echo '<script type="text/javascript">lettreChoisie="'.$melange[0].'";
document.querySelector("a.lettre").addEventListener("click", testerLettre);
function testerLettre(event) {
       if (event.target.innerText===lettreChoisie) {
              // bon résultat
       } else {
              // mauvais résultat
       }
}
</script>';

**Blue_Marion** · 26/03/2016, 14h36

Merci!
Le clic sur chaque lettre fonctionne!! Je vous tiens au courant de l'avancé de la création du jeu!
A +

**Blue_Marion** · 26/03/2016, 15h50

AAArg..... Quand je clique sur la première lettre tout a gauche, j'ai bien un message de "bonne réponse" ou de "mauvaise réponse" mais si je clique sur n'importe laquelle des deux autres images, aucun message ne s'affiche. Et je ne vois pas ou je me suis trompée...

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
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
					<?php
                                                $nbimages=26;
                                                $nomimages[1]="A.PNG";
                                                $nomimages[2]="B.PNG";
                                                $nomimages[3]="C.PNG";
                                                $nomimages[4]="D.PNG";
                                                $nomimages[5]="E.PNG";
                                                $nomimages[6]="F.PNG";
                                                $nomimages[7]="G.PNG";
                                                $nomimages[8]="H.PNG";
                                                $nomimages[9]="I.PNG";
                                                $nomimages[10]="J.PNG";
                                                $nomimages[11]="K.PNG";
                                                $nomimages[12]="L.PNG";
                                                $nomimages[13]="M.PNG";
                                                $nomimages[14]="N.PNG";
                                                $nomimages[15]="O.PNG";
                                                $nomimages[16]="P.PNG";
                                                $nomimages[17]="Q.PNG";
                                                $nomimages[18]="R.PNG";
                                                $nomimages[19]="S.PNG";
                                                $nomimages[20]="T.PNG"; 
                                                $nomimages[21]="U.PNG";
                                                $nomimages[22]="V.PNG";
                                                $nomimages[23]="W.PNG";
                                                $nomimages[24]="X.PNG";
                                                $nomimages[25]="Y.PNG";
                                                $nomimages[26]="Z.PNG";
                                                /*rand génère une valeur aléatoire.
                                                Initialisation du random (les microsecondes sont une valeur donnée au millionnième 
                                                -> Multiplier par 1 million pour avoir un entier*/                                      
                                                srand((double)microtime()*1000000);
                                                /*rand génère une valeur aléatoire*/
                                                $affimage=rand(1,$nbimages);
                                                /*Ici on met le code qui permet d'afficher 3 lettres de l'alphabet aléatoirement
                                                mais l'une d'elle est la traduction de l'image affichée plus haut dans le visuel*/
                                                $alphabet="abcdefghijklmnopqrstuvwxyz";
                                                /*str_shuffle mélange les caractères d'une chaîne de caractères*/
                                                $melange = str_shuffle($alphabet);
                                                /*substr retourne un segment de chaîne*/
                                                $lettres = str_shuffle(substr($melange, 0, 3));
                                        ?>
						<div><img id="imageLSF" src="images/Alphabet/<?php echo $melange[0]; ?>.png"></div>
					<?php
						/*strlen calcule la taille d'une chaîne*/
						for ($i=0; $i<strlen($lettres); $i++){
						echo '<a href="#" class="lettre">'.$lettres[$i].'</a>';
						}	
						/* ici on mémorise en javascript la lettre choisie
						- document.querySelector retourne le premier élément dans le document(en partant du premier niveau du html et ordonné comme les éléments 
							du document) qui correspond au groupe de sélecteurs passés en paramètre.
						- addEventListener permet l'assignation de gestionnaires d'évènements sur un élément cible.
						- innertText : récupère le contenu entre deux balises sans interprétation des balises contenu dans le texte 
							(supprime toutes la balises contenues dans le texte récupéré).*/
						echo '<script type="text/javascript">lettreChoisie="'.$melange[0].'";
						document.querySelector("a.lettre").addEventListener("click", testerLettre);
						function testerLettre(event) {
							if (event.target.innerText===lettreChoisie) {
								// bon résultat
								var B="Bravo! tu as trouvé la bonne lettre.";
								alert(B);
							} else {
								// mauvais résultat
								var m="Mauvaise réponse! Essaye encore.";
								alert(m);
							}
						}
						</script>';
					?>

**01001111** · 26/03/2016, 17h10

c'est moi qui ai fait l'erreur; dsl écrit trop vite:
essaie querySelectorAll à la place de querySelector

**Blue_Marion** · 30/03/2016, 15h41

Merci

.

Donc voila mon code:

Bonjour à vous tous,

Me revoila pour de nouvelles aventures sur le même petit jeu que je suis en train de créer.

Voici mon code:

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
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
				<?php
                                        $nbimages=26;
                                        $nomimages[1]="A.PNG";
                                        $nomimages[2]="B.PNG";
                                        $nomimages[3]="C.PNG";
                                        $nomimages[4]="D.PNG";
                                        $nomimages[5]="E.PNG";
                                        $nomimages[6]="F.PNG";
                                        $nomimages[7]="G.PNG";
                                        $nomimages[8]="H.PNG";
                                        $nomimages[9]="I.PNG";
                                        $nomimages[10]="J.PNG";
                                        $nomimages[11]="K.PNG";
                                        $nomimages[12]="L.PNG";
                                        $nomimages[13]="M.PNG";
                                        $nomimages[14]="N.PNG";
                                        $nomimages[15]="O.PNG";
                                        $nomimages[16]="P.PNG";
                                        $nomimages[17]="Q.PNG";
                                        $nomimages[18]="R.PNG";
                                        $nomimages[19]="S.PNG";
                                        $nomimages[20]="T.PNG";
                                        $nomimages[21]="U.PNG";
                                        $nomimages[22]="V.PNG";
                                        $nomimages[23]="W.PNG";
                                        $nomimages[24]="X.PNG";
                                        $nomimages[25]="Y.PNG";
                                        $nomimages[26]="Z.PNG";
                                        /*rand génère une valeur aléatoire.
                                        Initialisation du random (les microsecondes sont une valeur donnée au millionnième
                                        -> Multiplier par 1 million pour avoir un entier*/
                                        srand((double)microtime()*1000000);
                                        /*rand génère une valeur aléatoire. Le nom de l'image qui va etre affichée est stocké dans la variable affimage.*/
                                        $affimage=rand(1,$nbimages);
                                        /*Ici on met le code qui permet d'afficher 3 lettres de l'alphabet Français aléatoirement
                                        mais l'une d'elle est la traduction de l'image affichée plus haut dans le visuel*/
                                        $alphabet="abcdefghijklmnopqrstuvwxyz";
                                        /*str_shuffle mélange les caractères d'une chaîne de caractères*/
                                        $melange = str_shuffle($alphabet);
                                        /*substr retourne un segment de chaîne*/
                                        $lettres = str_shuffle(substr($melange, 0, 3));
                                        ?>
                                                <div><!-- On affiche l'image d'une lettre LSF -->
                                                        <img id="imageLSF" src="images/Alphabet/<?php echo $melange[0]; ?>.png">        
                                                </div>
 
                                        <?php
                                                /*strlen calcule la taille d'une chaîne*/
                                                for ($i=0; $i<strlen($lettres); $i++){
                                                        echo '<a href="#" class="lettre">'.$lettres[$i].'</a>';
                                                }
                                                /* ici on mémorise en JAVASCRIPT la lettre sur laquelle on clique.
                                                - document.querySelector retourne le premier élément dans le document(en partant du premier niveau du html et ordonné comme les éléments 
                                                du document) qui correspond au groupe de sélecteurs passés en paramètre.
                                                Le mieux c'est d'utiliser querySelectorAll qui va retourner un tableau, 
                                                on va devoir faire une boucle for dessus et ajouter l’événement pour chaque élément.
                                                - addEventListener permet l'assignation de gestionnaires d'évènements sur un élément cible.
                                                - innertText : récupère le contenu entre deux balises sans interprétation des balises contenu dans le texte 
                                                        (supprime toutes la balises contenues dans le texte récupéré).*/
                                                echo '<script type="text/javascript">lettreChoisie="'.$melange[0].'";
                                                                        var lettre = document.querySelectorAll("a.lettre"); 
                                                                        for ($i=0; $i<3; $i++){
                                                                                lettre[$i].addEventListener("click", testerLettre);
                                                                        }
                                                                        function testerLettre(event) {
                                                                                if (event.target.innerText===lettreChoisie) {
                                                                                        var B="Bravo! tu as trouvé la bonne lettre.";
                                                                                        alert(B);
                                                                                        window.opener.location.reload();
                                                                                } else {
                                                                                var m="Mauvaise réponse! Essaye encore.";
                                                                                alert(m);
                                                                                }
                                                                        }
                                                        </script>';
                                        ?>

Petit soucis, quand je clique sur le bouton ok de la "popup" ("Bravo! tu as trouvé la bonne lettre."), ma page ne se recharge pas sur une "autre partie" malgrés ceci:

Code :

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

window.opener.location.reload();

**Blue_Marion** · 30/03/2016, 15h49

ça y est j'ai résolu mon soucis.
J'ai simplement utilisé:

Code :

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

location.reload();.

.
Bonne après-midi !

**Blue_Marion** · 06/04/2016, 12h24

Rebonjour,

Comment puis-je faire pour que ma page ne se recharge pas sur l'entête mais sur le jeu contenu situé dans ma div "contenu" ?
En effet, quand je clique sur une bonne ou une mauvaise réponse, j'aimerais qu'après avoir cliqué sur "ok" dans la popup de "bonne" ou "mauvaise réponse", la page se recharge ou non mais sur le jeu, et non sur l'entête.

voila mon code:

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
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
<!DOCTYPE html>
<html lang=FR dir=LTR>
   <head>
		<meta charset="utf-8"/>
		<title>l'aventure de Lulu</title>  <!-- titre à changer -->
		<!-- lier ici le HTML au CSS -->
		<link rel="stylesheet" href="css/feuille_style.css"/>
   </head>
	<body>
	<!-- Instructon qui permet d'inclure le code d'un autre fchier .php (HTML+PHP) à l'endroit où on la place. -->
		<?php include("Entete.php");?> 
		<!-- fin du bloc d'en-tête -->
		<div class="fen_princip"> <!-- bloc de fenêtre principale --> <!--RELIER CETTE DIVISION AU STYLE CORRESPONDANT DANS LA FEUILLE DE STYLE -->
			<div class="contenu"> <!-- bloc de contenu dans la fenêtre principale -->
				Coucou petit d&eacute;butant,<br />
				Sais-tu ce que signifie ce signe?<br /><br />Clique sur la lettre qui te semble traduire cette image.<br /><br />
				<!-- Le code suivant sert à définir les 26 images des lettres de l'alphabet LSF possibles
				pour l'affichage et aussi à choisir l'une d'elle parmi elles aléatoirement.-->
				<?php
                                        $nbimages=26;
                                        $nomimages[1]="A.PNG";
                                        $nomimages[2]="B.PNG";
                                        $nomimages[3]="C.PNG";
                                        $nomimages[4]="D.PNG";
                                        $nomimages[5]="E.PNG";
                                        $nomimages[6]="F.PNG";
                                        $nomimages[7]="G.PNG";
                                        $nomimages[8]="H.PNG";
                                        $nomimages[9]="I.PNG";
                                        $nomimages[10]="J.PNG";
                                        $nomimages[11]="K.PNG";
                                        $nomimages[12]="L.PNG";
                                        $nomimages[13]="M.PNG";
                                        $nomimages[14]="N.PNG";
                                        $nomimages[15]="O.PNG";
                                        $nomimages[16]="P.PNG";
                                        $nomimages[17]="Q.PNG";
                                        $nomimages[18]="R.PNG";
                                        $nomimages[19]="S.PNG";
                                        $nomimages[20]="T.PNG";
                                        $nomimages[21]="U.PNG";
                                        $nomimages[22]="V.PNG";
                                        $nomimages[23]="W.PNG";
                                        $nomimages[24]="X.PNG";
                                        $nomimages[25]="Y.PNG";
                                        $nomimages[26]="Z.PNG";
                                        /*rand génère une valeur aléatoire.
                                        Initialisation du random (les microsecondes sont une valeur donnée au millionnième
                                        -> Multiplier par 1 million pour avoir un entier*/
                                        srand((double)microtime()*1000000);
                                        /*rand génère une valeur aléatoire. Le nom de l'image qui va etre affichée est stocké dans la variable affimage.*/
                                        $affimage=rand(1,$nbimages);
                                        /*Ici on met le code qui permet d'afficher 3 lettres de l'alphabet Français aléatoirement
                                        mais l'une d'elle est la traduction de l'image affichée plus haut dans le visuel*/
                                        $alphabet="abcdefghijklmnopqrstuvwxyz";
                                        /*str_shuffle mélange les caractères d'une chaîne de caractères*/
                                        $melange = str_shuffle($alphabet);
                                        /*substr retourne un segment de chaîne*/
                                        $lettres = str_shuffle(substr($melange, 0, 3));
                                        ?>
                                                <div><!-- On affiche l'image d'une lettre LSF -->
                                                        <img id="imageLSF" src="images/Alphabet/<?php echo $melange[0]; ?>.png">        
                                                </div>
 
                                        <?php
                                                /*strlen calcule la taille d'une chaîne*/
                                                for ($i=0; $i<strlen($lettres); $i++){
                                                        echo '<a href="#" class="lettre">'.$lettres[$i].'</a>';
                                                }
                                                /* ici on mémorise en JAVASCRIPT la lettre sur laquelle on clique.
                                                - document.querySelector retourne le premier élément dans le document(en partant du premier niveau du html et ordonné comme les éléments 
                                                du document) qui correspond au groupe de sélecteurs passés en paramètre.
                                                Le mieux c'est d'utiliser querySelectorAll qui va retourner un tableau, 
                                                on va devoir faire une boucle for dessus et ajouter l’événement pour chaque élément.
                                                - addEventListener permet l'assignation de gestionnaires d'évènements sur un élément cible.
                                                - innertText : récupère le contenu entre deux balises sans interprétation des balises contenu dans le texte 
                                                        (supprime toutes la balises contenues dans le texte récupéré).
                                                - location.reload() permet le rechargement d'une nouvelle partie après le clic sur "OK" dans la popup de "bonne réponse"*/
                                                echo '<script type="text/javascript">lettreChoisie="'.$melange[0].'";
                                                                        var lettre = document.querySelectorAll("a.lettre"); 
                                                                        for ($i=0; $i<3; $i++){
                                                                                lettre[$i].addEventListener("click", testerLettre);
                                                                        }
                                                                        function testerLettre(event) {
                                                                                if (event.target.innerText===lettreChoisie) {
                                                                                        var B="Bravo! tu as trouvé la bonne lettre.";
                                                                                        alert(B);
                                                                                        location.reload();
                                                                                } else {
                                                                                var m="Mauvaise réponse! Essaye encore.";
                                                                                alert(m);
                                                                                }
                                                                        }
                                                        </script>';
                                        ?> 
                        </div>
                        <aside> <!-- bloc de contenu latéral -->
                                <img id="logoRennes2" src="images/illustrations/logorennes2-blancpng24.png" alt="logo Rennes 2"/>
                        </aside>
                </div>
                <div id="back_to_top"> <!-- bloc pour l'image de la flêche de retour vers le haut de page -->
                        <a href="#top">
                                <!-- LIEN CLIQUABLE SUR L'IMAGE PERMETTANT DE RETOURNER EN HAUT DE LA PAGE  -->                 
                                <img id="fleche" src="images/boutons/FlecheHaut.gif" alt="Flèche vers le haut"/>
                        </a>
 
                </div>
                <!-- début du bloc de pied de page, Instructon qui permet d'inclure le code d'un autre fichier .php (HTML+PHP) à l'endroit où on la place. -->
                <?php include("Pied_de_page.php");?>		
	</body>
</html>

**01001111** · 06/04/2016, 18h05

Bonjour, tu peux faire ceci avec une ancre disposant de l'attribut name et positionnée au bon endroit dans la page

Code html :

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

<a name="jeu"></a>

et en javascript à la place de location.reload();

Code javascript :

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

window.location=window.location.replace(/#.*$/, "")+"#jeu";// ceci ne recharge pas la page, seulement cela positionne sur l'ancre directement

sinon doucement avec jquery et sa fonction animate en ciblant scrollTop sur ton élément html
dans ce cas

Code html :

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

<a id="jeu"></a>

et en javascript, à la place de location.reload();

Code javascript :

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

$('html,body').animate({scrollTop: $("#jeu").offset().top}, 1000);

ne pas oublier dans ce second cas, d'inclure la source jquery que tu peux télécharger ici:
https://jquery.com/

**Blue_Marion** · 23/04/2016, 13h46

Bonjour,

Merci de votre aide, mais finalement j'ai fait autrement. ça m'a pris plusieurs jours, mais j'ai réussi à terminer la création de mon mini jeu. Tout fonctionne comme je le veux.

Création d'un jeu : évènement "clic" sur 3 éléments

JavaScript

Discussions similaires

Partager

Partager