TP jeu de devinette

9 janvier, 2023

Table des matières Masquer

Ce TP est conçu pour vous aider à mettre en pratique les concepts de base de JavaScript que vous avez appris dans le tutoriel. Vous allez créer un jeu de devinette de nombres qui vous permettra de travailler sur les variables, les instructions de contrôle de flux, les boucles, les fonctions, les tableaux, les objets, la manipulation de la page HTML avec JavaScript, les événements et les gestionnaires d’événements. En utilisant cet exercice, vous allez également découvrir les classes et les objets en JavaScript (ES6) et comment gérer les erreurs et déboguer votre code. Enfin, vous allez apprendre à utiliser les modules et les importations/exportations (ES6).

Ce TP est idéal pour les débutants en JavaScript qui souhaitent mettre en pratique leurs connaissances et améliorer leur compréhension des différents éléments de base de ce langage de programmation. N’hésitez pas à revenir sur le tutoriel si vous éprouvez des difficultés car toutes les réponses y sont présent.

Fichiers à créer

game.js (module d’importation contenant la classe de jeu)
script.js (fichier principal qui importe le module game.js)
index.html (contenant le code suivant)

<!DOCTYPE html>
<html>
<head>
    <title>Jeu de devinette de nombres</title>
    <style>
        body {
            background-color: #e0e0e0;
        }
    
        h1 {
            font-size: 24px;
            text-align: center;
            color: #333;
        }
    
        #form {
            display: flex;
            justify-content: center;
        }
    
        #number {
            width: 50px;
            margin-right: 10px;
            font-size: 16px;
            text-align: center;
        }
    
        button {
            font-size: 16px;
            padding: 10px;
            border: none;
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1>Jeu de devinette de nombres</h1>
<p id="message"></p>
<form id="form">
    <input type="number" id="number">
    <button type="submit">Deviner</button>
</form>
</body>
</html>

Consignes

Dans le fichier game.js, déclarez une classe Game avec les propriétés et méthodes suivantes:
- Une propriété randomNumber qui contient un nombre aléatoire compris entre 1 et 100 (utilisez Math.random() et Math.floor())
- Une propriété attempts qui contient le nombre de tentatives de l’utilisateur
- Une propriété found qui indique si le nombre a été trouvé ou non (valeur booléenne)
- Une méthode checkNumber qui prend en argument un nombre et vérifie si ce nombre est correct en comparant la valeur entrée par l’utilisateur avec le nombre aléatoire. Si le nombre est correct, mettez la propriété found à vrai. Si le nombre est incorrect, affichez un message indiquant si le nombre est plus grand ou plus petit.
- Une méthode resetGame qui réinitialise les propriétés attempts et found à leur valeur initiale et choisit un nouveau nombre aléatoire.
Dans le fichier script.js, importez le module game.js en utilisant l’instruction import. Créez une instance de la classe Game et stockez-la dans une variable.
Dans le fichier script.js, écrivez une fonction pour gérer l’événement de soumission du formulaire. Cette fonction devra:
- Incrémenter le compteur de tentatives de l’instance de la classe Game
- Récupérer la valeur du nombre entré par l’utilisateur
- Utiliser la méthode checkNumber de l’instance de la classe Game pour vérifier si le nombre est correct
- Si la réponse est correct, retourner une message de félicitation, sinon envoyer le message de checkNumber.
Associez l’événement de soumission du formulaire à la fonction créée précédemment.
Ajoutez un gestionnaire d’événements pour gérer le clic sur le bouton « Jouer à nouveau » qui se trouve dans le message de félicitations. Cette fonction devra utiliser la méthode resetGame de l’instance de la classe Game pour réinitialiser le jeu et effacer le message de félicitations et le formulaire de saisie du nombre.
Lier le bon fichier javascript à votre page index.html
Testez votre jeu en ouvrant le fichier index.html dans un navigateur. Assurez-vous qu’il fonctionne correctement et qu’il respecte les consignes.

Solution

Télécharger la solution

J’espère que ce tutoriel sur le Javascript à destination des débutants vous aura aider, vous devriez maintenant avoir les bases en Javascript, je vous invite à parcourir le site, vous trouverez plusieurs tutoriels, articles sur le Javascript pour vous aider à améliorer vos compétences.