Raport de mi-parcours

Le code

Voici le code en entier pour voir, le scripte en entier pour ceux qui veulent :

 
            document.addEventListener('DOMContentLoaded', () => {
            // Fonction exécutée lorsque le contenu de la page est chargé

            const lengthSelect = document.getElementById('length-select');
            const attemptsContainer = document.getElementById('attempts-container');
            const messageDiv = document.getElementById('message');

            const dictionaries = {
                4: [liste1],
                5: [liste2],
                6: [liste3],
                7: [liste4],
                8: [liste5],
                9: [liste6],
            };

            // Déclaration des variables
let targetWord = ""; // Le mot cible à deviner
let attempts = 0; // Le nombre de tentatives
const maxAttempts = 7; // Le nombre maximum de tentatives autorisées
let correctLetters = []; // Les lettres correctement placées dans le mot cible
let hasWon = false; // Variable pour indiquer si le joueur a gagné

// Événement déclenché lorsque la longueur du mot est sélectionnée
lengthSelect.addEventListener('change', () => {
    clearAttempts(); // Efface les tentatives précédentes
    attempts = 0; // Réinitialise le nombre de tentatives
    correctLetters = []; // Réinitialise les lettres correctement placées
    messageDiv.textContent = ''; // Efface les messages précédents
    hasWon = false; // Réinitialise la variable de victoire
    createNewAttempt(); // Crée une nouvelle tentative
});

// Fonction pour créer une nouvelle tentative de mot
function createNewAttempt() {
    const length = parseInt(lengthSelect.value); // Longueur du mot sélectionné
    if (attempts === 0) {
        const words = dictionaries[length]; // Mots disponibles pour la longueur sélectionnée
        targetWord = words[Math.floor(Math.random() * words.length)]; // Mot cible aléatoire
    }

    const letterContainer = document.createElement('div'); // Crée un nouveau conteneur pour les lettres
    letterContainer.className = 'letter-container'; // Ajoute une classe CSS au conteneur

    // Création des champs pour chaque lettre du mot
    for (let i = 0; i < length; i++) {
        const input = document.createElement('input'); // Crée un nouvel élément d'entrée
        input.type = 'text'; // Définit le type de l'entrée comme texte
        input.maxLength = 1; // Définit la longueur maximale de l'entrée à 1 caractère
        input.className = 'letter-input'; // Ajoute une classe CSS à l'entrée
        input.dataset.index = i; // Stocke l'index pour une navigation facile
        input.dataset.attempt = attempts; // Stocke le numéro de tentative

        // Gestion des lettres correctes dans les tentatives précédentes
        if (correctLetters[i]) {
            input.value = correctLetters[i]; // Définit la valeur de l'entrée comme la lettre correcte
            input.disabled = false; // Active l'entrée pour édition
            input.classList.add('correct'); // Ajoute une classe CSS pour indiquer que la lettre est correcte
        } else if (i === 0 && attempts === 0) {
            input.value = targetWord[0]; // Définit la valeur de l'entrée comme la première lettre du mot cible
            input.disabled = true; // Désactive l'entrée pour l'édition
            input.classList.add('correct'); // Ajoute une classe CSS pour indiquer que la lettre est correcte
            correctLetters[i] = targetWord[0]; // Enregistre la première lettre comme correcte
        }

        letterContainer.appendChild(input); // Ajoute l'entrée au conteneur
    }

    attemptsContainer.appendChild(letterContainer); // Ajoute le conteneur de lettres au conteneur de tentatives

    // Met le focus sur le deuxième champ de lettre
    const inputs = document.querySelectorAll('.letter-input[data-attempt="' + attempts + '"]');
    if (inputs[1]) {
        inputs[1].focus();
    }
}

// Fonction pour gérer l'événement des touches enfoncées
function handleKeyDown(event) {
    if (hasWon) {
        return; // Ne pas exécuter si le joueur a gagné
    }

    const currentAttemptInputs = document.querySelectorAll('.letter-input[data-attempt="' + attempts + '"]');

    // Gestion de la touche "Backspace"
    if (event.key === 'Backspace') {
        if (document.activeElement.classList.contains('letter-input')) {
            const index = parseInt(document.activeElement.dataset.index); // Récupère l'index de l'entrée active
            const attempt = parseInt(document.activeElement.dataset.attempt); // Récupère le numéro de tentative de l'entrée active
            if (index > 0 && currentAttemptInputs[index].value === '') {
                currentAttemptInputs[index - 1].focus(); // Déplace le focus sur l'entrée précédente
                if (!currentAttemptInputs[index - 1].disabled) {
                    currentAttemptInputs[index - 1].value = ''; // Efface la valeur de l'entrée précédente
                }
            } else {
                currentAttemptInputs[index].value = ''; // Efface la valeur de l'entrée actuelle
            }
            event.preventDefault(); // Empêche le comportement par défaut du 'Backspace'
        }
    } else if (event.key.length === 1 && /^[a-zA-Z]$/.test(event.key)) {
        // Gestion de la saisie de lettre
        for (let i = 0; i < currentAttemptInputs.length; i++) {
            if (currentAttemptInputs[i] === document.activeElement) {
                currentAttemptInputs[i].value = event.key.toLowerCase(); // Définit la valeur de l'entrée comme la lettre entrée
                if (i + 1 < currentAttemptInputs.length) {
                    currentAttemptInputs[i + 1].focus(); // Déplace le focus sur l'entrée suivante
                }
                break;
            }
        }
        event.preventDefault(); // Empêche la saisie par défaut de la lettre
    } else if (event.key === 'Enter') {
        // Gestion de la touche "Enter"
        const enteredWord = Array.from(currentAttemptInputs).map(input => input.value.toLowerCase()).join('');
        if (enteredWord.length === currentAttemptInputs.length) {
            checkWord(enteredWord); // Vérifie le mot entré
            if (!hasWon && attempts < maxAttempts - 1) {
                attempts++; // Incrémente le nombre d'essais
                createNewAttempt(); // Crée une nouvelle tentative
            } else if (!hasWon) {
                messageDiv.textContent = 'Vous avez perdu! Le mot était: ' + targetWord; // Affiche un message de défaite
                messageDiv.style.color = 'red'; // Change la couleur du message en rouge
            }
        } else {
            messageDiv.textContent = 'Veuillez remplir toutes les cases avec des lettres.'; // Affiche un message demandant de remplir toutes les cases avec des lettres
        }
    }
}

// Fonction pour vérifier si le mot entré est correct et mettre à jour les entrées en conséquence
function checkWord(word) {
    const currentAttemptInputs = document.querySelectorAll('.letter-input[data-attempt="' + attempts + '"]');
    const targetLetters = targetWord.split(''); // Découpe le mot cible en lettres

        const targetLetterCount = targetLetters.reduce((count, letter) => {
        count[letter] = (count[letter] || 0) + 1;
        return count;
    }, {});

    let allCorrect = true; // Variable pour vérifier si toutes les lettres sont correctes

    const letterStatus = Array.from(currentAttemptInputs).map((input, index) => {
        const letter = input.value.toLowerCase(); // Convertit la lettre en minuscules
        if (letter === targetLetters[index]) {
            targetLetterCount[letter]--; // Décrémente le nombre de lettres cibles correspondantes
            correctLetters[index] = letter; // Enregistre la lettre correctement placée
            return 'correct'; // Retourne 'correct' comme statut de lettre
        }
        allCorrect = false; // Si une lettre n'est pas correcte, on met à jour la variable
        return ''; // Retourne une chaîne vide comme statut de lettre
    });

    Array.from(currentAttemptInputs).forEach((input, index) => {
        const letter = input.value.toLowerCase(); // Convertit la lettre en minuscules
        if (letterStatus[index] !== 'correct') {
            if (targetLetters.includes(letter) && targetLetterCount[letter] > 0) {
                letterStatus[index] = 'misplaced'; // Définit le statut de la lettre comme 'mal placée'
                targetLetterCount[letter]--; // Décrémente le nombre de lettres cibles correspondantes
            } else {
                letterStatus[index] = 'wrong'; // Définit le statut de la lettre comme 'incorrect'
            }
        }
    });

    currentAttemptInputs.forEach((input, index) => {
        input.classList.remove('correct', 'misplaced', 'wrong'); // Supprime toutes les classes de statut de lettre
        input.classList.add(letterStatus[index]); // Ajoute la classe de statut de lettre correspondante
        input.disabled = false; // Active l'entrée pour édition
    });

    if (allCorrect) {
        messageDiv.textContent = 'Félicitations! Vous avez gagné!'; // Affiche un message de victoire
        messageDiv.style.color = 'green'; // Change la couleur du message en vert
        document.removeEventListener('keydown', handleKeyDown); // Désactive les entrées après la victoire
        
    }
}

    




            function clearAttempts() {
                // Efface toutes les tentatives précédentes

                attemptsContainer.innerHTML = ''; // Efface le contenu du conteneur de tentatives
            }

            document.addEventListener('keydown', handleKeyDown);
            // Écoute les événements de touche enfoncée et appelle la fonction handleKeyDown
        });




            let audioActuel = null;

            function lireAudio(id) {
                if (audioActuel && !audioActuel.paused) {
                    audioActuel.pause();
                    audioActuel.currentTime = 0;
                }
                audioActuel = document.getElementById(id);
                audioActuel.play();
            }



            function arreterAudio() {
    if (audioActuel && !audioActuel.paused) {
        audioActuel.pause();
        audioActuel.currentTime = 0;
        audioActuel = null;
    }
} 

Voilà un exemple de ce que peux faire ce programme :

Maintenant détaillon ce programme, Let's GO !

     document.addEventListener('DOMContentLoaded', () => {
    // Fonction exécutée lorsque le contenu de la page est chargé

    const lengthSelect = document.getElementById('length-select');
    const attemptsContainer = document.getElementById('attempts-container');
    const messageDiv = document.getElementById('message');

    const dictionaries = {
        4: [liste1],
        5: [liste2],
        6: [liste3],
        7: [liste4],
        8: [liste5],
        9: [liste6],
    };

Nous avons là au début une fonction qui agit sur tout le reste du code et qui permet que lorsque la page est exécuté de lancer la fonction, qui entraine donc aussi les autres lors d'action spécifiques.
Les 4 constantes écritent "const" permet à ce que leur valeur ne puisse pas changer et serve pour les 3 premières à remplacer un champ d'écriture au besoin.
Et la constante "dictionaries" est là pour nous permettre de définir les mots qu'il y aura à chercher, on l'utilisera dans des fonctions.

 
    // Déclaration des variables
    let targetWord = ""; // Le mot cible à deviner
    let attempts = 0; // Le nombre de tentatives
    const maxAttempts = 7; // Le nombre maximum de tentatives autorisées
    let correctLetters = []; // Les lettres correctement placées dans le mot cible
    let hasWon = false; // Variable pour indiquer si le joueur a gagné

    // Événement déclenché lorsque la longueur du mot est sélectionnée
    lengthSelect.addEventListener('change', () => {
        clearAttempts(); // Efface les tentatives précédentes
        attempts = 0; // Réinitialise le nombre de tentatives
        correctLetters = []; // Réinitialise les lettres correctement placées
        messageDiv.textContent = ''; // Efface les messages précédents
        hasWon = false; // Réinitialise la variable de victoire
        createNewAttempt(); // Crée une nouvelle tentative
    });

Alors nous avons là nous avons des variable avec "let" pour limiter ces variable à ce bloc.
Une qui sert pour enregistrer le mot à trouver, une pour définir le nombre de tentative effectué et une pour faire une liste des lettre "correctes", c'est a dire celle que l'on donne en écrivant le mot et qui sont présente dans le mot à trouver.
La constante elle nous indique que le nombre de tentatives maximales est de 7, et cela sera inchageable.

Pour la fonction, elle nous permet de réinitialiser le programme quand on veut changer de partie en choisissant une autre longueur de mot.

    // Fonction pour créer une nouvelle tentative de mot
function createNewAttempt() {
    const length = parseInt(lengthSelect.value); // Longueur du mot sélectionné
    if (attempts === 0) {
        const words = dictionaries[length]; // Mots disponibles pour la longueur sélectionnée
        targetWord = words[Math.floor(Math.random() * words.length)]; // Mot cible aléatoire
    }

    const letterContainer = document.createElement('div'); // Crée un nouveau conteneur pour les lettres
    letterContainer.className = 'letter-container'; // Ajoute une classe CSS au conteneur

    // Création des champs pour chaque lettre du mot
    for (let i = 0; i < length; i++) {
        const input = document.createElement('input'); // Crée un nouvel élément d'entrée
        input.type = 'text'; // Définit le type de l'entrée comme texte
        input.maxLength = 1; // Définit la longueur maximale de l'entrée à 1 caractère
        input.className = 'letter-input'; // Ajoute une classe CSS à l'entrée
        input.dataset.index = i; // Stocke l'index pour une navigation facile
        input.dataset.attempt = attempts; // Stocke le numéro de tentative

        // Gestion des lettres correctes dans les tentatives précédentes
        if (correctLetters[i]) {
            input.value = correctLetters[i]; // Définit la valeur de l'entrée comme la lettre correcte
            input.disabled = false; // Active l'entrée pour édition
            input.classList.add('correct'); // Ajoute une classe CSS pour indiquer que la lettre est correcte
        } else if (i === 0 && attempts === 0) {
            input.value = targetWord[0]; // Définit la valeur de l'entrée comme la première lettre du mot cible
            input.disabled = true; // Désactive l'entrée pour l'édition
            input.classList.add('correct'); // Ajoute une classe CSS pour indiquer que la lettre est correcte
            correctLetters[i] = targetWord[0]; // Enregistre la première lettre comme correcte
        }

        letterContainer.appendChild(input); // Ajoute l'entrée au conteneur
    }

    attemptsContainer.appendChild(letterContainer); // Ajoute le conteneur de lettres au conteneur de tentatives

    // Met le focus sur le deuxième champ de lettre
    const inputs = document.querySelectorAll('.letter-input[data-attempt="' + attempts + '"]');
    if (inputs[1]) {
        inputs[1].focus();
    }
}

Alors là, ... c'est une fonction, en gros elle va permettre de lancer une nouvelle partie.
Elle commence par récupérer les donnée nécessaire à la fonction, comme le nombre de lettre choisi, elle récupère par le suite le dictionnaire qui lui correspond et elle prend un mot aléatoirement dans ce dictionnaire comme mot à rechercher.
Elle crée aussi une ligne de tableau pour pouvoir entrer une réponse, elle le fait en fonction du nombre de lettre.
La suite de la fonction s'utilise à partir de la 2ème ligne de réponse, elle permet de remettre une lettre écrite à la même place que dans la tentative précédente si elle est à la bonne place.
Elle permet aussi de mettre un code couleur en fonction de la lettre, si elle est correct ou non

Et elle fini par nous mener à la ligne suivante elle ajoute une tentative au compteur.

// Fonction pour gérer l'événement des touches enfoncées
function handleKeyDown(event) {
    if (hasWon) {
        return; // Ne pas exécuter si le joueur a gagné
    }

    const currentAttemptInputs = document.querySelectorAll('.letter-input[data-attempt="' + attempts + '"]');

    // Gestion de la touche "Backspace"
    if (event.key === 'Backspace') {
        if (document.activeElement.classList.contains('letter-input')) {
            const index = parseInt(document.activeElement.dataset.index); // Récupère l'index de l'entrée active
            const attempt = parseInt(document.activeElement.dataset.attempt); // Récupère le numéro de tentative de l'entrée active
            if (index > 0 && currentAttemptInputs[index].value === '') {
                currentAttemptInputs[index - 1].focus(); // Déplace le focus sur l'entrée précédente
                if (!currentAttemptInputs[index - 1].disabled) {
                    currentAttemptInputs[index - 1].value = ''; // Efface la valeur de l'entrée précédente
                }
            } else {
                currentAttemptInputs[index].value = ''; // Efface la valeur de l'entrée actuelle
            }
            event.preventDefault(); // Empêche le comportement par défaut du 'Backspace'
        }
    } else if (event.key.length === 1 && /^[a-zA-Z]$/.test(event.key)) {
        // Gestion de la saisie de lettre
        for (let i = 0; i < currentAttemptInputs.length; i++) {
            if (currentAttemptInputs[i] === document.activeElement) {
                currentAttemptInputs[i].value = event.key.toLowerCase(); // Définit la valeur de l'entrée comme la lettre entrée
                if (i + 1 < currentAttemptInputs.length) {
                    currentAttemptInputs[i + 1].focus(); // Déplace le focus sur l'entrée suivante
                }
                break;
            }
        }
        event.preventDefault(); // Empêche la saisie par défaut de la lettre
    } else if (event.key === 'Enter') {
        // Gestion de la touche "Enter"
        const enteredWord = Array.from(currentAttemptInputs).map(input => input.value.toLowerCase()).join('');
        if (enteredWord.length === currentAttemptInputs.length) {
            checkWord(enteredWord); // Vérifie le mot entré
            if (!hasWon && attempts < maxAttempts - 1) {
                attempts++; // Incrémente le nombre d'essais
                createNewAttempt(); // Crée une nouvelle tentative
            } else if (!hasWon) {
                messageDiv.textContent = 'Vous avez perdu! Le mot était: ' + targetWord; // Affiche un message de défaite
                messageDiv.style.color = 'red'; // Change la couleur du message en rouge
            }
        } else {
            messageDiv.textContent = 'Veuillez remplir toutes les cases avec des lettres.'; // Affiche un message demandant de remplir toutes les cases avec des lettres
        }
    }
}

    // Fonction pour vérifier si le mot entré est correct et mettre à jour les entrées en conséquence
function checkWord(word) {
    const currentAttemptInputs = document.querySelectorAll('.letter-input[data-attempt="' + attempts + '"]');
    const targetLetters = targetWord.split(''); // Découpe le mot cible en lettres

        const targetLetterCount = targetLetters.reduce((count, letter) => {
        count[letter] = (count[letter] || 0) + 1;
        return count;
    }, {});

    let allCorrect = true; // Variable pour vérifier si toutes les lettres sont correctes

    const letterStatus = Array.from(currentAttemptInputs).map((input, index) => {
        const letter = input.value.toLowerCase(); // Convertit la lettre en minuscules
        if (letter === targetLetters[index]) {
            targetLetterCount[letter]--; // Décrémente le nombre de lettres cibles correspondantes
            correctLetters[index] = letter; // Enregistre la lettre correctement placée
            return 'correct'; // Retourne 'correct' comme statut de lettre
        }
        allCorrect = false; // Si une lettre n'est pas correcte, on met à jour la variable
        return ''; // Retourne une chaîne vide comme statut de lettre
    });

    Array.from(currentAttemptInputs).forEach((input, index) => {
        const letter = input.value.toLowerCase(); // Convertit la lettre en minuscules
        if (letterStatus[index] !== 'correct') {
            if (targetLetters.includes(letter) && targetLetterCount[letter] > 0) {
                letterStatus[index] = 'misplaced'; // Définit le statut de la lettre comme 'mal placée'
                targetLetterCount[letter]--; // Décrémente le nombre de lettres cibles correspondantes
            } else {
                letterStatus[index] = 'wrong'; // Définit le statut de la lettre comme 'incorrect'
            }
        }
    });

    currentAttemptInputs.forEach((input, index) => {
        input.classList.remove('correct', 'misplaced', 'wrong'); // Supprime toutes les classes de statut de lettre
        input.classList.add(letterStatus[index]); // Ajoute la classe de statut de lettre correspondante
        input.disabled = false; // Active l'entrée pour édition
    });

    if (allCorrect) {
        messageDiv.textContent = 'Félicitations! Vous avez gagné!'; // Affiche un message de victoire
        messageDiv.style.color = 'green'; // Change la couleur du message en vert
        document.removeEventListener('keydown', handleKeyDown); // Désactive les entrées après la victoire
        
    }
}

Pour celle-ci, nous avons une fonction qui regarde si le mot entrée a de bonnes lettres, elle regarde chaque lettre en découpant le mot par les cases pour savoir si des lettres sont présente dans le mot à trouver, met le fond de ces lettres en couleur et les replacent au même endroit pour la tentative suivante mais laisse des champs vide là où il manque encore des lettres.

En gros elle vérifie si les lettres sont à la bonne place ou présente dans le mot à trouver et elle récupère les valeurs pour ensuite les mettrent à la bonne place dans la tentatite suivante.

Ainsi la fin de la fonction sert à envoyer un message de victoire quand le joueur trouve le bon mot en 7 essais ou moins.

    function clearAttempts() {
        // Efface toutes les tentatives précédentes

        attemptsContainer.innerHTML = ''; // Efface le contenu du conteneur de tentatives
            }

        document.addEventListener('keydown', handleKeyDown);
            // Écoute les événements de touche enfoncée et appelle la fonction handleKeyDown
    });

Cette fonction sert a remettre le programme à "zéro", quand on termine une partie, que l'on perd, gagne ou que l'on change de longueur de mot cette fonction supprime tout remet tout a zéro et relance le programme.

    
let audioActuel = null;

    function lireAudio(id) {
        if (audioActuel && !audioActuel.paused) {
            audioActuel.pause();
            audioActuel.currentTime = 0;
        }
        audioActuel = document.getElementById(id);
        audioActuel.play();
    }



    function arreterAudio() {
        if (audioActuel && !audioActuel.paused) {
            audioActuel.pause();
            audioActuel.currentTime = 0;
            audioActuel = null;
        }
    }

Ces deux fonction serve à la bonne ambiance du jeu, elle permet de mettre ou d'enlever la musique proposée.
Au début, il n'y a pas de musique.

La première sert à activer l'audio ;
Et la seconde à arrêter l'audio.