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