Jeux de pendu en jquery : définir array résultats

**Bensljul** · 16/01/2019, 09h43

Bonjour,

je suis en train d'essayer de faire un jeux de pendu en jquery, pour le moment j'ai réussi à faire en sorte que lorsqu'on propose une lettre, de vérifier si elle existe dans la proposition et ensuite de replacer cette lettre dans la bonne position dans un array resu.

sauf que je viens de m'apercevoir que quand il y a plusieurs lettres, il ne me les met pas pas bien au début :/ exemple pour le mot intention et que je tape "n" cela me donne ceci dans le console.log :

nombre de valeur dans prop_lett =3 pendu.js:34:3
Array [ 1, 4, 8 ] pendu.js:35:3
Array [ "", "n", "", "n" ]

Pourtant je pense bien avoir penser à initilaiser le res comme il faut :

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
 
$(document).ready(function(){
var prop_lett = [],
     prop = "intention"
     $rep_val = $('input'),
     rep='',
     res = [];
 
//Récupération de la propositino de mot à trouver
 
	$('button').click(function(){
		rep = $rep_val.val();
		var r = new RegExp('('+rep+')','ig');
		console.log("lettre ="+r);
		console.log(prop.length);
		for(var i=0;i<prop.length;i++){
			if (prop[i].match(r) != null){
				prop_lett.push(i);
				res.splice(0,prop.length,"");
				i++;
			}
		}
		console.log("nombre de valeur dans prop_lett ="+prop_lett.length);
		console.log (prop_lett);
		for(var j=0;j<prop_lett.length;j++){
		res.splice(prop_lett[j],prop_lett[j],rep);
		j++;
		}
		console.log(res);
		rep = '';
		prop_lett = [];
 
	});
 
 
});

je pense que je passe à côté d'un petit détail ^^

merci pour votre aide!

**Toufik83** · 16/01/2019, 18h48

Salut,
d'après ce que je sais (et si je ne me trompe pas), le jeu de pendu se fait avec des cliques sur des lettres et pas avec des mots entiers.

Prenons l'exemple du mot "intention", quand l'utilisateur clique sur la lettre "i", il faut lui indiquer que cette lettre se trouve en positions 0 et 6 dans la chaîne "intention", et si elle n'existe pas, on l'informe que la chaîne ne contient pas cette lettre.

Dans ton cas, il te faut d'abord présenter toutes les lettres de A jusqu'à Z, puis les attacher à l'événement clique.

il y a une fonction très utile qui peut t'aider pour récupérer les indexes trouvés, c'est exec

Code :

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

1
2
3
4
5
6
7
8
9
 
$("class_Ou_Id_Lettre").click(function(){
  rep =$(this).text().toLowerCase();
  r=new RegExp(rep,"gi");
  while((match=r.exec(prop))!=null){
	res[match.index]=rep;
        console.log('trouvé en position : '+match.index);
  }
});

**Bensljul** · 17/01/2019, 08h39

Ah, moi je veux justement que l'on rentre la lettre dans l'input ^^

En fait là je me met en place les briques pour pouvoir vraiment m'atteler à faire le jeu, pour le moment j'arrive à récupérer la position des lettres du mot à chercher en fonction de la valeur de l'input.

Et ce que j'aimerai pouvoir faire ensuite c'est un array résultat qui par exemple pour le mot «intention» quand on propose la lettre «i» donne ca dans le console .log : array ["i","","","","","","i","",""] car après je vais faire en sorte d'afficher le résultat à chaque proposition de cette manière : i _ _ _ _ _ i _ _

**Toufik83** · 17/01/2019, 15h27

Salut,

tu peux t'inspirer de cet exemple que je viens de créer, tu as la possibilité d'ajouter plusieurs mots dans le tableau "mots".

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Jeux pendu avec une zone de texte</title>
	<style>
                i{display:inline-block;width:25px;height:25px;font-size:20px;font-weight:bold;font-style:normal;text-align:center}
                i.lettre{background-color:#A9A9F5;color:white}
                .notfound{font-size:20px;color:red}
                .notfound .notLettre,.notfound .chars{display:block}
                .tentatives .nbr_tentatives{font-size:20px;font-weight:bold;color:green}
                .restant .nbr_restant{font-size:20px;font-weight:bold;color:red}
                .result.perdre{color:red}
                .result.gagne{color:green}
                .result .recommencer{text-decoration:none;font-size:17px}
        </style>
	<script
	  src="https://code.jquery.com/jquery-3.3.1.js"
	  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
	  crossorigin="anonymous">
	</script>
 
	<script>
                var mots=["intention","colorisation","ponctuation","ésprit","âme"],
                        prop,reg,rep_val,rep,notFound=[],chaine,
                        res = [],compteur=0,
                        reg_Lettres=/^[a-zA-ZáàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸ]/,
                        ,Init=function(){
                                compteur=0;
                                res.length=0;
                                notFound.length=0;
                                rep_val= $('#myInput');
                                rep_val.val("");
                                prop= mots[Math.floor(Math.random()*mots.length)];
                                console.log('Mot choisi aléatoirement par défaut :'+prop);
                                $('.indication i').remove();
                                $('#verifier').prop('disabled',false);
                                $('.result,.notfound .chars,.notfound .notLettre').html('');
                                $('.result').removeClass('gagne perdre');
                                $('.tentatives .nbr_tentatives').text(0);
                                $('.restant .nbr_restant').text(prop.length+2);
                                
                                $.each(prop.split(''), function(k,v){
                                        if(!res[k]){
                                                res[k]="_";
                                                //ajout des <i class="lettre"> dans .indication
                                                $('.indication').append('<i class="lettre">'+res[k]+'</i>');
                                        }
                                });
                        }
                
                $(document).ready(function(){
                        
                        //initialisation
                        Init();
                        
                        //clique sur .recommencer
                        $('.result').on("click",".recommencer",function(){
                                Init();
                        });
                        
                        //clique sur #verifier
                        $("#verifier").click(function(){
                                compteur++;
                                rep=rep_val.val();
                                notFound.length=0;//on vide le tableau notFound
                                $(".notfound .notLettre").html("");
                                //verification de l'existence de chaque lettre dans l'input
                                $.each(rep.trim().split(''),function(k,v){
                                
                                   if(reg_Lettres.test(v)){
                                        reg= RegExp(v,'gi');
                                        while((match=reg.exec(prop))!==null){
                                                res[match.index]=v;
                                        }
                                        
                                        if((reg.exec(prop))==null){
                                                if(notFound.indexOf(v)==-1){
                                                        notFound.push(v);
                                                }
                                        }
                                   }
                                   else if(!reg_Lettres.test(v)){
                                        $(".notfound .notLettre").html("Attention, seulement les lettres qui sont acceptées.");
                                   }
                                        
                                   //Obligation de vérifier notFound a l'intérieur de $.each et pas a l'éxtérieur
                                        
                                   //on informe l'utilisateur si (une/plusieurs) lettre(s) n'éxiste(nt) pas dans le mot choisi.
                                   if(notFound.length>0){
                                        if(notFound.length==1){
                                                chaine= "La lettre <b>"+notFound[0]+"</b> n'existe pas dans le mot.";
                                        }
                                        else if(notFound.length>1){
                                                chaine= "Les lettres <b>"+notFound.join(',')+"</b> n'existent pas dans le mot.";
                                        }
                                   }
                                                
                                        
                                });//Fin $.each(rep.trim().split(''),...)
                                
                                $(".notfound .chars").html(chaine);
                                chaine='';
                                
                                //on remplit les valeurs de res[] dans les <i> de .indication
                                $.each(res,function(k,v){
                                        $('.indication i').eq(k).text(v.toUpperCase());
                                });
                                
                                //Mettre à jour les infos
                                $('.tentatives .nbr_tentatives').text(compteur);
                                $('.restant .nbr_restant').text((prop.length+2)-compteur);
                                
                                if((prop.length+2)==compteur){//perdre
                                        $('.result').removeClass('gagne').addClass('perdre')
                                        .html('Oups!, Vous avez perdu(e), le mot est :<b>'
                                                +prop.toUpperCase()+"</b>, <a class='recommencer' href='#'>Recommencer ?</a>");
                                        $('#verifier').prop('disabled',true);
                                }
                                else if(res.indexOf('_')==-1){//gagner
                                        $('.result').removeClass('perdre').addClass('gagne')
                                        .html('Bravo!, Vous avez gagné(e). <a class="recommencer" href="#">Recommencer ?</a>');
                                        $('#verifier').prop('disabled',true);
                                }
                        });
                });
        </script>
</head>
<body>
	<input id="myInput" />
	<button id="verifier">Vérifier</button>
	<div>
		<p class="notfound"><span class="notLettre"></span><span class="chars"></span></p>
		<p class="indication"><span class="fixe">Le mot est à présent :</span><span class="indices"></span></p>
		<p class="tentatives"><span>Nombre d'essai(s) :</span><span class="nbr_tentatives">0</span></p>
		<p class="restant">Réstant(s) :<span class="nbr_restant"></span></p>
		<p class="result"></p>
	</div>
</body>
</html>

Edit : j'avais oublié les caractères spéciaux + de vérifier si on mets des caractères comme (";" ":" "," "$" etc....) dans l'input.

**Bensljul** · 18/01/2019, 11h46

Bonjour,

je viens de voir vos réponses alors que je viens de trouver ma solution que je vous partage :

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
 
$(document).ready(function(){
var $rep_val = $('input'),
	$fst_btn = $('#test1'),
	$sec_btn = $('#test2'),
	char_found = [],
	prop = "lieutenant",
	word_rep = [],
	resu = [],
	err = 0,
	rep='';
 
	//création tableau résultat
	word = Array.from(prop);
	resu = word.slice();
 
		for (var i=0;i<resu.length;i++){
			resu[i] = "_";
		}
 
	// changement au click sur Ok
	$fst_btn.click(function(){
		console.log("word = "+word+" "+"resu = "+resu);
		rep = $rep_val.val();
		var r = new RegExp((rep),'g');
		for(var j=0;j<prop.length;j++){
			if (word[j].match(r) !== null){
				word_rep.push(rep); //récupère les lettres trouvées
				char_found = Array.from(new Set(word_rep)); //élimine les doublons
				for (var u in char_found){ // récupère l'index des lettres
					for(var y = 0; y < word.length; y++){ 
						if (char_found[u] == word [y]){ //récup l'égalité afin de replacer les lettres à la bonne place
						resu[y] = char_found[u]; //modification du fichier résultats avec mise en place des lettres au bon endroit
						}
					}
				}
			}
			continue; //là réside mon problème
			err ++; // je n'arrive pas à incrémenter ma variable erreur lorsque la lettre n'existe pas ^^
		}
 
	console.log("lettre trouvée :"+char_found+" resu : "+resu+" erreur : "+err);
	});

Maintenant comme dit dans le code, je n'arrive pas à incrémenter ma variable erreur lol

Jeux de pendu en jquery : définir array résultats

jQuery

Discussions similaires

Partager

Partager