Bonjour,
Dans le cadre de mes études, je dois réaliser un jeu du pendu en javascript, avec le peu de cours javascript que l'on a eu. J'ai assemblé une grande partie du code et le jeu fonctionne à peu près correctement, à une chose près: l'image du pendu , qui est affichée au fur et à mesure que l'on rate ses essais, ne s'affiche qu'en fin de partie. Par ailleurs, le mot "troué" (du type (ch_t) ne s'affiche qu'en fin de partie lui même.
Mes camarades ont le même problème on en a déduit que ce non-affichage est du à la présence d'une boîte de dialogue 'prompt' dans la boucle principale du jeu. En effet, quand tous les essais sont fait ou que le mot a été deviné, l'image s'affiche enfin. Quelqu'un aurai-t-il une alternative au prompt ou alors un moyen d'afficher la page entre deux prompt ?

Voici le code si cela peut vous éclairer. Il est assez conséquent, mais je n'ai seulement besoin que vous regardiez comment pallier à mon problème d'affichage. La fonction concernée s'appelle 'saisie_lettre', ligne 266.
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<! DOCTYPE html>
 
<html lang="fr">
 
<head>
    <meta charset=utf-8 />
    <meta name="author" content="Clément LACOURT" />
 
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
 
<body>
 
    <!-------------------------Jeu du pendu----------------------->
 
    <script type="text/javascript">
        // ================================================================= VARIABLES
 
        // ----------------------------------------------------------------- Variables 'globales' (les fonctions y ont accès sans que ce soit passé en paramètre)
        /*
        ALPHABET
        chaîne de caractères
        les lettres que l'on utilise dans notre jeu
        */
        let ALPHABET = 'abcdefghijklmnopqrstuvwxyz';
        /*
        VOCABULAIRE
        liste de chaînes de caractères
        stocke les mots qui peuvent être utilisés pour le jeu
        */
        let VOCABULAIRE = ['chat', 'lapin', 'faisan'];
 
        /*
        ESSAIS
        Numérique (entier)
        nombre d'essais auxquel le joueur a le droit
        */
        let ESSAIS = 7;
 
        /*
        lettres_restantes
        Tableau de caractères
        Les lettres qui sont encore disponibles au joueur
        */
        var lettres_restantes = 'abcdefghijklmnopqrstuvwxyz';
 
        // ----------------------------------------------------------------- Autres variables
 
        /*
        mot_a_deviner
        chaînes de caractères
        le mot à  deviner au cours d'une partie
        */
        var mot_a_deviner;
 
        /*
        nb_essais_restants
        Numérique (entier)
        Le nombre d'essais qu'il reste au joueur à  un moment donné
        */
        var nb_essais_restants;
 
        /*
        jeu_en_cours
        booléen
        vaut vrai tant que la partie continue, vaut faux quand le jeu s'achève (joueur a gagné ou perdu)
        */
        var jeu_en_cours;
 
        /*
        victoire
        booléen
        vaut vrai si le joueur a trouvé le mot
        */
        var victoire;
 
 
        /*
        affichage
        chaîne de caractères
    
        */
        var affichage;
 
 
        /*
        Lettre que joue le joueur à  un moment donné
        */
        var lettre_jouee;
        // VOS FONCTIONS !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
        // ================================================================= Début de partie
 
        jeu_en_cours = true; // C'est le début de partie
        victoire = false; // Le joueur n'a pas encore gagné
        nb_essais_restants = ESSAIS; // Il reste encore tous ses essais au joueur
 
        lettres_restantes = ALPHABET; // Aucune lettre n'a encore été jouée, elles sont toutes disponibles
 
 
 
        function choix_de_mot() {
            var max = VOCABULAIRE.length - 1;
            var nombre = Math.random() * (max);
            nombre = Math.round(nombre);
            mot_a_deviner = VOCABULAIRE[nombre];
 
        }
        choix_de_mot(); // On choisit un mot aléatoire
 
        function contient (lettre, mot){ //Fonction qui vérifie si la lettre entrée est contenue dans le mot entré
                var sortie;
                
                for(i=0; i<mot.length; i++){
                    if(mot[i]==lettre){
                        sortie = true;
                        break;
                    }
                    else {
                        sortie = false;
                    }
                }
                return sortie;
            }
 
        function mot_a_afficher(mot, lettres_restantes){ //Fonction qui renvoie le mot à deviner sans les lettres à trouver
            var mot_final = "";
            for (var i = 0; i < mot.length; i++){
                if (contient(mot[i], lettres_restantes)){
                    mot_final += "-";
                }
                else{
                    mot_final += mot[i];
                }
            }
            return mot_final;
        }
 
 
        affichage = mot_a_afficher(mot_a_deviner, lettres_restantes); // On affiche le mot avec uniquement les lettres devinées (au début, il n'y a donc que des tirets);
 
 
        var ispendu = false;
 
        var textinit = "\
<svg id=\"svpac\" width=\"300\" height=\"300\" viewBox=\"0 0 110 110\" xmlns=\"http://www.w3.org/2000/svg\">\
        <rect\
       id=\"rect3823\"\
       width=\"110\"\
       height=\"110\"\
       x=\"0\"\
       y=\"0\"\
       style=\"stroke-width:0.26458332;fill:green\" />\
  <g \
     inkscape:label=\"Calque 1\"\
     inkscape:groupmode=\"layer\"\
     id=\"layer1\"\
     transform=\"translate(0,-187)\">\
    <path\
       style=\"fill:none;stroke:#000000;stroke-width:1.42820883;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"\
       d=\"M 35.133311,284.89331 H 16.372476 v -82.98096 h 70.092559 v 13.19697\"\
       id=\"path3829\"\
       inkscape:connector-curvature=\"0\" />\
    <ellipse\
       style=\"opacity:1;fill:none;stroke:#000000;stroke-width:1.75129199;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers\"\
       id=\"path4636\"\
       cx=\"86.20446\"\
       cy=\"220.30836\"\
       rx=\"8.0775805\"\
       ry=\"5.3987608\" />\
    <path\
       style=\"fill:none;stroke:#000000;stroke-width:1.48859811;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"\
       d=\"m 16.372476,223.10749 25.275012,-20.79523 v 0\"\
       id=\"path4641\"\
       inkscape:connector-curvature=\"0\" />\
    <path\
       style=\"fill:none;stroke:#000000;stroke-width:1.3827554;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"\
       d=\"m 84.988885,249.7322 0.34663,-24.45604 v 0\"\
       id=\"path4641-3\"\
       inkscape:connector-curvature=\"0\"\
       sodipodi:nodetypes=\"ccc\" />\
    <path\
       style=\"fill:none;stroke:#000000;stroke-width:1.48859811;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"\
       d=\"m 84.250215,232.70529 13.54949,5.79866\"\
       id=\"path4641-6\"\
       inkscape:connector-curvature=\"0\"\
       sodipodi:nodetypes=\"cc\" />\
    <path\
       style=\"fill:none;stroke:#000000;stroke-width:1.48859811;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"\
       d=\"m 71.221855,237.70414 13.28892,-4.7989\"\
       id=\"path4641-7\"\
       inkscape:connector-curvature=\"0\"\
       sodipodi:nodetypes=\"cc\" />\
    <path\
       style=\"fill:none;stroke:#000000;stroke-width:1.48859811;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"\
       d=\"m 76.954335,258.69932 8.07758,-9.39785 7.29588,7.99817\"\
       id=\"path4641-5\"\
       inkscape:connector-curvature=\"0\"\
       sodipodi:nodetypes=\"ccc\" />\
  </g>\
  <path id=\"pac\" d=\"M120 40\
           A 45 45  0  1  0 125 125\
           L 125 80 Z\" fill=\"green\"/>\
</svg>";
 
        function MAJ_pendu(prc) {
 
            if (!ispendu) {
                $("body").append(textinit);
                ispendu = true;
            }
            prc = 100 - prc;
            prc = prc > 100 ? 100 : prc;
            prc = prc < 0 ? 0 : prc;
 
            var angl = 23 + prc / 100 * (310 - 23);
            var offset = 0;
 
            var rayon = 80;
 
            var ctx = 55;
            var cty = 55;
 
            var xi = ctx + rayon * Math.cos(3 * Math.PI / 2 - angl / 360 * Math.PI * 2);
            var yi = cty - rayon * Math.sin(3 * Math.PI / 2 - angl / 360 * Math.PI * 2);
 
            var xb = ctx;
            var yb = cty + rayon;
 
            var x0 = ctx;
            var y0 = cty;
 
            $("#pac").attr("d", "M" + (offset + xi) + " " + (offset + yi) + "  A " + (rayon) + " " + (rayon) + "  0  " + (angl < 180 ? 1 : 0) + "  1  " + (offset + xb) + " " + (offset + yb) + " L " + (offset + x0) + " " + (offset + y0) + " Z");
        }
            
            function affiche_bonhomme(essais_restants) {
                var pourcentage = (essais_restants / ESSAIS) * 100;
                MAJ_pendu(pourcentage);
            }
 
            // On affiche le pendu (au début, il n'y a rien)
 
 
            function affiche_mot(mot) {
                alert(mot);
            } // On affiche le mot
 
            function actualise_lettre(lettre_jouee) { // Fonction qui actualise le tableau des lettres qui n'ont pas étées essayées
                var chaine = "";
                for (i = 0; i < lettres_restantes.length; i++) {
                    if (lettre_jouee != lettres_restantes[i]) {
                        chaine += lettres_restantes[i];
                    }
                }
                return chaine
            }
 
            function test_victoire(mot_a_deviner, affichage) { // Fonction qui teste si le jouer à réussi à devnier le mot
                var result = false;
                if (affichage == mot_a_deviner) {
                    result = true;
                }
                return result;
            }
 
            function saisie_lettre() {
                var lettre = prompt("Saisisez une lettre");
                return lettre;
            }
 
            function continuer_jeu() {
                var result;
                if (victoire) {
                    result = false;
                } else if (nb_essais_restants == 0) {
                    result = false;
                } else {
                    result = true;
                }
                return result;
            }
 
 
            // ================================================================= Boucle principale du jeu
            while (jeu_en_cours) {
    
                affiche_mot(affichage);
                
                // On affiche le bonhomme :
                affiche_bonhomme(nb_essais_restants);
                
                // On demande une lettre au joueur
                lettre_jouee = saisie_lettre();
 
                // on acualise les lettres restantes
                lettres_restantes = actualise_lettre(lettre_jouee);
                
 
                if (contient(lettre_jouee, mot_a_deviner) == false) { // Si la lettre jouée n'est pas dans le mot à  deviner
                    nb_essais_restants--; // on enlève un essai
                }
                // On actualise le mot à  afficher
                affichage = mot_a_afficher(mot_a_deviner, lettres_restantes);
 
                // on actualise la variable victoire
                victoire = test_victoire(mot_a_deviner, affichage);
                
                // On actualise jeu_en_cours
                jeu_en_cours = continuer_jeu();
            }
        
            if (victoire) {
                alert("Victoire !");
            }
            else {
                alert("Perdu !");
            }
            // ================================================================= Fin de jeu
    </script>
 
</body>
 
</html>