Construir un juego de Adivina la Moneda

Introducción

En este proyecto, aprenderás a crear un sencillo juego de "Adivina la moneda". El juego consiste en seleccionar al azar tres tazas de entre nueve tazas para colocar monedas en ellas, y el jugador debe adivinar las tazas correctas ingresando los números correspondientes.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Implementar la función findNum para extraer números únicos de la entrada del usuario.
• Implementar la función randomCoin para generar tres números aleatorios no repetidos entre 1 y 9.
• Comprender la estructura del directorio del proyecto y los archivos proporcionados.

🏆 Logros

Después de completar este proyecto, podrás:

• Trabajar con funciones y arrays de JavaScript.
• Utilizar expresiones regulares para extraer datos específicos de una cadena.
• Generar números aleatorios y asegurarse de que sean únicos.
• Seguir instrucciones paso a paso para completar un proyecto.

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura del directorio es la siguiente:

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

Donde:

• css es la carpeta para los archivos de estilo.
• images es la carpeta para los archivos de imagen.
• index.html es la página principal.
• js/index.js es el archivo JavaScript para renderizar y animar las monedas.
• js/findCoin.js es el archivo JavaScript que se debe completar.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Implementar la función findNum

En este paso, implementarás la función findNum en el archivo js/findCoin.js.

1. Abre el archivo js/findCoin.js.

2. Localiza la función findNum:

   // Compose an array of the input values 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 función findNum toma un parámetro input_values y devuelve una matriz de números únicos (1-9) encontrados en la entrada.

4. Implementa la función findNum siguiendo estos pasos:

   • Utiliza una expresión regular /\d/g para encontrar todos los dígitos en la cadena input_values.
   • Crea una matriz uniqueNumbers vacía para almacenar los números únicos.
   • Itera a través de los números coincidentes y conviértelos a enteros utilizando parseInt.
   • Verifica si el número analizado es un número válido (no es NaN) y no está ya en la matriz uniqueNumbers.
   • Si el número es válido y único, agréguelo a la matriz uniqueNumbers.
   • Devuelve la matriz uniqueNumbers.

Implementar la función randomCoin

En este paso, implementarás la función randomCoin en el archivo js/findCoin.js.

1. Localiza la función 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 función randomCoin debe generar una matriz de 3 números aleatorios no repetidos entre 1 y 9.

3. Implementa la función randomCoin siguiendo estos pasos:

   • Crea una matriz randomNumArr vacía para almacenar los números aleatorios.
   • Utiliza un bucle while para generar 3 números aleatorios únicos entre 1 y 9.
   • Dentro del bucle, genera un número aleatorio utilizando Math.floor(Math.random() * 9) + 1.
   • Verifica si el número generado no está ya en la matriz randomNumArr.
   • Si el número es único, agréguelo a la matriz randomNumArr.
   • Una vez que la matriz randomNumArr tiene 3 números únicos, devuelve la matriz.

Después de completar estos pasos, el juego de "Adivina la moneda" debería estar completamente funcional. Un gif de todas las funciones completadas es el siguiente:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.