Pendu
Exemple :
Dans le dossier 4-objetsNoyau :
Ajoutez le fichier 4-pendu.html
1
2
<html lang="fr">
3
<head>
4
<title>JS Pendu</title>
5
<meta charset="utf-8" />
6
<meta name="viewport" content="width=device-width, initial-scale=1" />
7
<link
8
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
9
rel="stylesheet"
10
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
11
crossorigin="anonymous"
12
/>13
<style> main > div {background-color: #c5c5c5;}</style>
14
</head>
15
<body>
16
<header class="p-2 bg-secondary text-light bg-gradient">
17
<section>
18
<h2>JS - Pendu (<a href="https://www.vincent-vanneste.fr/videos/javascript/js-pendu.mp4">vidéo</a>)</h2>
19
</section>
20
</header>
21
22
<main>
23
<div class='p-3 row'>
24
<div class="col-1 mb-3">
25
<input type="checkbox" class="btn-check" id="a" autocomplete="on" onclick="lettre(this);">
26
<label class="btn btn-outline-secondary" for="a">A</label><br>
27
</div>
28
<div class="col-1 mb-3">
29
<input type="checkbox" class="btn-check" id="e" autocomplete="on" onclick="lettre(this);">
30
<label class="btn btn-outline-secondary" for="e">E</label><br>
31
</div>
32
<div class="col-1 mb-3">
33
<input type="checkbox" class="btn-check" id="i" autocomplete="on" onclick="lettre(this);">
34
<label class="btn btn-outline-secondary" for="i">I</label><br>
35
</div>
36
<div class="col-1 mb-3">
37
<input type="checkbox" class="btn-check" id="o" autocomplete="on" onclick="lettre(this);">
38
<label class="btn btn-outline-secondary" for="o">O</label><br>
39
</div>
40
<div class="col-1 mb-3">
41
<input type="checkbox" class="btn-check" id="u" autocomplete="on" onclick="lettre(this);">
42
<label class="btn btn-outline-secondary" for="u">U</label><br>
43
</div>
44
</div>
45
<div class='p-3 row'>
46
<div class="col-1 mb-3">
47
<input type="checkbox" class="btn-check" id="b" autocomplete="on" onclick="lettre(this);">
48
<label class="btn btn-outline-secondary" for="b">B</label><br>
49
</div>
50
<div class="col-1 mb-3">
51
<input type="checkbox" class="btn-check" id="c" autocomplete="on" onclick="lettre(this);">
52
<label class="btn btn-outline-secondary" for="c">C</label><br>
53
</div>
54
<div class="col-1 mb-3">
55
<input type="checkbox" class="btn-check" id="d" autocomplete="on" onclick="lettre(this);">
56
<label class="btn btn-outline-secondary" for="d">D</label><br>
57
</div>
58
<div class="col-1 mb-3">
59
<input type="checkbox" class="btn-check" id="f" autocomplete="on" onclick="lettre(this);">
60
<label class="btn btn-outline-secondary" for="f">F</label><br>
61
</div>
62
<div class="col-1 mb-3">
63
<input type="checkbox" class="btn-check" id="g" autocomplete="on" onclick="lettre(this);">
64
<label class="btn btn-outline-secondary" for="g">G</label><br>
65
</div>
66
<div class="col-1 mb-3">
67
<input type="checkbox" class="btn-check" id="h" autocomplete="on" onclick="lettre(this);">
68
<label class="btn btn-outline-secondary" for="h">H</label><br>
69
</div>
70
<div class="col-1 mb-3">
71
<input type="checkbox" class="btn-check" id="j" autocomplete="on" onclick="lettre(this);">
72
<label class="btn btn-outline-secondary" for="j">J</label><br>
73
</div>
74
<div class="col-1 mb-3">
75
<input type="checkbox" class="btn-check" id="k" autocomplete="on" onclick="lettre(this);">
76
<label class="btn btn-outline-secondary" for="k">K</label><br>
77
</div>
78
<div class="col-1 mb-3">
79
<input type="checkbox" class="btn-check" id="l" autocomplete="on" onclick="lettre(this);">
80
<label class="btn btn-outline-secondary" for="l">L</label><br>
81
</div>
82
<div class="col-1 mb-3">
83
<input type="checkbox" class="btn-check" id="m" autocomplete="on" onclick="lettre(this);">
84
<label class="btn btn-outline-secondary" for="m">M</label><br>
85
</div>
86
</div>
87
<div class='p-3 row'>
88
<div class="col-1 mb-3">
89
<input type="checkbox" class="btn-check" id="n" autocomplete="on" onclick="lettre(this);">
90
<label class="btn btn-outline-secondary" for="n">N</label><br>
91
</div>
92
<div class="col-1 mb-3">
93
<input type="checkbox" class="btn-check" id="p" autocomplete="on" onclick="lettre(this);">
94
<label class="btn btn-outline-secondary" for="p">P</label><br>
95
</div>
96
<div class="col-1 mb-3">
97
<input type="checkbox" class="btn-check" id="q" autocomplete="on" onclick="lettre(this);">
98
<label class="btn btn-outline-secondary" for="q">Q</label><br>
99
</div>
100
<div class="col-1 mb-3">
101
<input type="checkbox" class="btn-check" id="r" autocomplete="on" onclick="lettre(this);">
102
<label class="btn btn-outline-secondary" for="r">R</label><br>
103
</div>
104
<div class="col-1 mb-3">
105
<input type="checkbox" class="btn-check" id="s" autocomplete="on" onclick="lettre(this);">
106
<label class="btn btn-outline-secondary" for="s">S</label><br>
107
</div>
108
<div class="col-1 mb-3">
109
<input type="checkbox" class="btn-check" id="t" autocomplete="on" onclick="lettre(this);">
110
<label class="btn btn-outline-secondary" for="t">T</label><br>
111
</div>
112
<div class="col-1 mb-3">
113
<input type="checkbox" class="btn-check" id="v" autocomplete="on" onclick="lettre(this);">
114
<label class="btn btn-outline-secondary" for="v">V</label><br>
115
</div>
116
<div class="col-1 mb-3">
117
<input type="checkbox" class="btn-check" id="w" autocomplete="on" onclick="lettre(this);">
118
<label class="btn btn-outline-secondary" for="w">W</label><br>
119
</div>
120
<div class="col-1 mb-3">
121
<input type="checkbox" class="btn-check" id="x" autocomplete="on" onclick="lettre(this);">
122
<label class="btn btn-outline-secondary" for="x">X</label><br>
123
</div>
124
<div class="col-1 mb-3">
125
<input type="checkbox" class="btn-check" id="y" autocomplete="on" onclick="lettre(this);">
126
<label class="btn btn-outline-secondary" for="y">Y</label><br>
127
</div>
128
<div class="col-1 mb-3">
129
<input type="checkbox" class="btn-check" id="z" autocomplete="on" onclick="lettre(this);">
130
<label class="btn btn-outline-secondary" for="z">Z</label><br>
131
</div>
132
</div>
133
<div class='p-3 row'>
134
<div class="col input-group mb-3">
135
<span class="input-group-text">Mot à trouver</span>
136
<input type="text" id="resultat" class="form-control" readonly/>
137
</div>
138
<div class="col input-group mb-3">
139
<span class="input-group-text">Nombre de propositions restantes</span>
140
<input type="text" id="compteur" class="form-control" readonly/>
141
</div>
142
</div>
143
144
</main>
145
146
<footer>
147
<nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
148
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
149
<li class="nav-item">
150
<a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
151
</li>
152
<li class="nav-item">
153
<a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
154
</li>
155
<li class="nav-item">
156
<a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
157
</li>
158
</ul>
159
</nav>
160
</footer>
161
162
<script src="js/4-pendu.js"></script>
163
164
</body>
165
</html>
Dans le dossier js ajoutez le fichier 4-pendu.js
1
const liste = [
2
"bonjour",
3
"voiture",
4
"camion",
5
"telephone",
6
"cornichon",
7
"pantoufles",
8
"cloportes",
9
"helicoptere",
10
];
11
const nb = 0; // tirage au sort
12
const chercher = []; // tableau des lettres du mot à chercher
13
const trouver = []; // tableau d'étoiles du mot à trouver
14
15
const resultat = document.querySelector("#resultat");
16
const compteur = document.querySelector("#compteur");
17
18
resultat.value = trouver.join(" ");
19
compteur.value = 5;
20
21
const lettre = (caractere) => {
22
23
};
24
Exercice :
Complétez le fichier 4-pendu.js :
voir la vidéo du résultat : https://www.vincent-vanneste.fr/videos/javascript/js-pendu.mp4
Ouvrez dans votre navigateur le fichier 4-pendu.html