Créer un jeu de devinette de pièce

Introduction

Dans ce projet, vous allez apprendre à construire un simple jeu de "Devinez la pièce". Le jeu consiste à sélectionner au hasard trois tasses parmi neuf tasses pour y placer des pièces, et le joueur doit deviner les bonnes tasses en saisissant les numéros correspondants.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Implémenter la fonction findNum pour extraire des numéros uniques à partir de l'entrée de l'utilisateur.
• Implémenter la fonction randomCoin pour générer trois nombres aléatoires non répétés entre 1 et 9.
• Comprendre la structure du répertoire du projet et les fichiers fournis.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Travailler avec des fonctions et des tableaux JavaScript.
• Utiliser des expressions régulières pour extraire des données spécifiques d'une chaîne de caractères.
• Générer des nombres aléatoires et vous assurer qu'ils sont uniques.
• Suivre des instructions étape par étape pour terminer un projet.

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour compléter cette étape :

Ouvrez le dossier du projet. La structure du répertoire est la suivante :

├── css
├── images
├── index.html
└── js
    ├── findCoin.js
    └── index.js

Où :

• css est le dossier pour les fichiers de style.
• images est le dossier pour les fichiers d'image.
• index.html est la page principale.
• js/index.js est le fichier JavaScript pour afficher et animer les pièces.
• js/findCoin.js est le fichier JavaScript qui doit être complété.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Implémenter la fonction findNum

Dans cette étape, vous allez implémenter la fonction findNum dans le fichier js/findCoin.js.

1. Ouvrez le fichier js/findCoin.js.

2. Localisez la fonction findNum :

   // Composez un tableau des valeurs d'entrée de 1 à 9
   function findNum(input_values) {
     // TODO
     const reg = /\d/g;
     const uniqueNumbers = [];
     const nums = input_values.match(reg) || [];
     nums.forEach((num) => {
       const parsedNum = parseInt(num);
       if (!isNaN(parsedNum) && !uniqueNumbers.includes(parsedNum)) {
         uniqueNumbers.push(parsedNum);
       }
     });
     return uniqueNumbers;
   }
   

3. La fonction findNum prend un paramètre input_values et renvoie un tableau de nombres uniques (de 1 à 9) trouvés dans l'entrée.

4. Implémentez la fonction findNum en suivant ces étapes :

   • Utilisez une expression régulière /\d/g pour trouver tous les chiffres dans la chaîne input_values.
   • Créez un tableau vide uniqueNumbers pour stocker les nombres uniques.
   • Parcourez les nombres correspondants et convertissez-les en entiers en utilisant parseInt.
   • Vérifiez si le nombre analysé est un nombre valide (pas NaN) et n'est pas déjà dans le tableau uniqueNumbers.
   • Si le nombre est valide et unique, ajoutez-le au tableau uniqueNumbers.
   • Retournez le tableau uniqueNumbers.

Implémenter la fonction randomCoin

Dans cette étape, vous allez implémenter la fonction randomCoin dans le fichier js/findCoin.js.

1. Localisez la fonction randomCoin :

   let randomCoin = () => {
     let randomNumArr = [];
     // TODO
     while (randomNumArr.length < 3) {
       const randomNumber = Math.floor(Math.random() * 9) + 1;
       if (!randomNumArr.includes(randomNumber)) {
         randomNumArr.push(randomNumber);
       }
     }
     return randomNumArr;
   };
   

2. La fonction randomCoin devrait générer un tableau de 3 nombres aléatoires non répétés entre 1 et 9.

3. Implémentez la fonction randomCoin en suivant ces étapes :

   • Créez un tableau vide randomNumArr pour stocker les nombres aléatoires.
   • Utilisez une boucle while pour générer 3 nombres aléatoires uniques entre 1 et 9.
   • À l'intérieur de la boucle, générez un nombre aléatoire en utilisant Math.floor(Math.random() * 9) + 1.
   • Vérifiez si le nombre généré n'est pas déjà dans le tableau randomNumArr.
   • Si le nombre est unique, ajoutez-le au tableau randomNumArr.
   • Une fois que le tableau randomNumArr a 3 nombres uniques, retournez le tableau.

Après avoir complété ces étapes, le jeu de "Devinez la pièce" devrait être entièrement fonctionnel. Un gif de toutes les fonctions complétées est le suivant :

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.