Aller au contenu

Javascript - Le jeu du pendu

Le but est de créer un jeu du pendu interactif en utilisant HTML et JavaScript.

Les trous dans le code sont marqués par // ....

Structure de base du HTML⚓︎

Voici la structure HTML de base pour afficher le jeu. Complète les éléments manquants.

HTML
 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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Jeu du Pendu</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        input, button {
            padding: 8px;
            margin: 5px;
        }
    </style>
</head>
    <body>
        <h1>Jeu du pendu !</h1>
        <h2>Trouve le mot caché</h2>
        <h3>Chaque erreur décrémente le nombre d'essais restants</h3>

        <div id="contenu">
                <h3 id="proposition">
                        lettre proposée: 
                        <input type="text" size = "2" id="lettre">
                        <button onclick="joue()">OK</button>
                </h3>
        </div>
        <h2 id="mot"></h2>
        <div id="jeu"><h3>Lettre(s) déjà essayées : <span id="essayees"></span></h3></div>
        <div id="essais"><h3>Essais restants : <span id="restant"></span></h3> </div>
    </body>

    <script>
        // Code JavaScript ici
    </script>

</html>

Initialisation des variables⚓︎

Les variables suivantes servent au jeu.

JavaScript
1
2
3
4
// Variables globales
let essayees = ""; // Lettres déjà essayées
let nbEssaisRestants = 6; // Nombre d'essais restants
let mot = "ALGORITHME"; // Mot Ă  deviner (on peut le changer)

Récupération de la lettre saisie⚓︎

Dans la fonction joue(), on veut récupérer la lettre saisie par l'utilisateur.

Astuce: : .toUpperCase() ajouté à la fin d'un caractère ou dune chaînes de caractères convertit les lettres en majuscules.

JavaScript
1
2
3
4
5
6
function joue() {
    // Récupération de la lettre saisie
    let blettre = document.getElementById("lettre");
    const lettre = // ... ; // Convertir en majuscule

}

Vérification de la lettre⚓︎

Ajoute le code pour vérifier si la lettre a déjà été proposée et si elle est dans le mot.

JavaScript
1
2
3
4
5
6
7
8
9
// Vérifie si la lettre a déjà été proposée
if (!essayees.includes(lettre)) {
    essayees = essayees + lettre;
}

// VĂ©rifie si la lettre est dans le mot
if (!mot.includes(lettre)) {
    nbEssaisRestants -= 1;
}

Affichage du mot avec les lettres trouvées⚓︎

Complète la boucle pour afficher le mot avec les lettres trouvées.

JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
let motAffiche = "";
let nbTrouvees = 0;

for (let lettreMot of mot) {
    if (essayees.includes(lettreMot)) {
        motAffiche += lettreMot;
        nbTrouvees += 1;
    } else {
        // ...
    }
    motAffiche += " "; // Espace entre les lettres
}

Vérification de la fin de partie⚓︎

Ajoute les conditions pour vérifier si la partie est gagnée ou perdue.

JavaScript
1
2
3
4
5
6
7
8
9
// Teste si la partie est gagnée
if (nbTrouvees == mot.length) {
    document.getElementById("proposition").textContent = // ... ;
}

// Teste si la partie est perdue
if (nbEssaisRestants == 0) {
    document.getElementById("proposition").textContent = // ... ;
}

Mise à jour de l'affichage⚓︎

Mise à jour l'affichage des lettres essayées, du mot à deviner et des essais restants.

JavaScript
1
2
3
4
5
6
7
// RĂ©initialisation du champ de saisie
blettre.value = "";

// Mise Ă  jour de l'affichage
document.getElementById("essayees").textContent = // ... ;
document.getElementById("mot").textContent = // ... ;
document.getElementById("restant").textContent = // ... ;

Code complet⚓︎

Voici le code complet avec les trous Ă  remplir :

JavaScript
 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
let essayees = ""; // vide au début du script
let nbEssaisRestants = 6; // possible de le modifier en fonction de la difficulté cherchée

function joue() {
    let mot = "ALGORITHME";
    let proposition = document.getElementById("proposition");
    let aTrouver = document.getElementById("mot");
    let blettre = document.getElementById("lettre");
    let lettresEssayees = document.getElementById("essayees");
    let restants = document.getElementById("restant");

    const lettre = // ... ;


    if (!essayees.includes(lettre)) {
        essayees = essayees + lettre;
    }

    if (!mot.includes(lettre)) {
        nbEssaisRestants -= 1;
    }

    let motAffiche = "";
    let nbTrouvees = 0;

    for (let lettreMot of mot) {
        if (essayees.includes(lettreMot)) {
            motAffiche += lettreMot;
            nbTrouvees += 1;
        } else {
            // ...
        }
        motAffiche += " ";
    }

    if (nbTrouvees == mot.length) {
        proposition.textContent = // ... ;
    }

    if (nbEssaisRestants == 0) {
        proposition.textContent = // ... ;
    }

    blettre.value = "";
    lettresEssayees.textContent = // ... ;
    aTrouver.textContent = // ... ;
    restants.textContent = // ... ;
}

Teste le jeu !⚓︎

  1. Ouvre le fichier HTML dans un navigateur.
  2. Saisis des lettres pour deviner le mot.