TP jeu de devinette

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 mobilise les variables, les conditions, les fonctions, les objets et les classes (ES6), la manipulation de la page HTML, les événements et les gestionnaires d’événements, ainsi que 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 : les réponses y sont, à l’exception des classes, présentées dans l’article sur les classes en JavaScript.

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

1. 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.

2. 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.

3. 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.

4. Associez l’événement de soumission du formulaire à la fonction créée précédemment.

5. 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.

6. Lier le bon fichier javascript à votre page index.html

7. 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

Voici une solution possible, testée dans un navigateur. La classe vit dans game.js :

export default class Game {
  constructor() {
    this.resetGame();
  }

  resetGame() {
    this.randomNumber = Math.floor(Math.random() * 100) + 1;
    this.attempts = 0;
    this.found = false;
  }

  checkNumber(number) {
    if (number === this.randomNumber) {
      this.found = true;
      return 'Bravo, vous avez trouvé !';
    }
    return number < this.randomNumber ? 'Le nombre est plus grand.' : 'Le nombre est plus petit.';
  }
}

script.js importe la classe, écoute le formulaire et affiche le message :

import Game from './game.js';

const game = new Game();
const form = document.getElementById('form');
const input = document.getElementById('number');
const message = document.getElementById('message');

function replay() {
  game.resetGame();
  message.textContent = '';
  form.hidden = false;
  input.focus();
}

function handleSubmit(event) {
  event.preventDefault();
  game.attempts += 1;
  const result = game.checkNumber(Number(input.value));
  input.value = '';

  if (game.found) {
    message.innerHTML = `Bravo, trouvé en ${game.attempts} tentative(s) ! <button type="button" id="replay">Jouer à nouveau</button>`;
    form.hidden = true;
    document.getElementById('replay').addEventListener('click', replay);
  } else {
    message.textContent = result;
  }
}

form.addEventListener('submit', handleSubmit);

Il reste à lier le script à la page, juste avant </body>. L’attribut type="module" est indispensable pour que l’instruction import fonctionne, et les modules ne se chargent pas depuis un fichier ouvert directement (file://) : servez le dossier avec un petit serveur local, par exemple npx serve ou l’extension Live Server de VS Code.

<script type="module" src="script.js"></script>

Le même langage fait tourner des jeux bien plus riches. Clairbois, un petit RPG écrit en JavaScript par l’IA Codex, se joue directement dans notre article sur comment créer un jeu avec ChatGPT.

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.