Build a Guess the Coin Game

Introduction

In this project, you will learn how to build a simple "Guess the Coin" game. The game involves randomly selecting three cups out of nine cups to place coins in, and the player has to guess the correct cups by inputting the corresponding numbers.

👀 Preview

🎯 Tasks

In this project, you will learn:

• Implement the findNum function to extract unique numbers from the user's input.
• Implement the randomCoin function to generate three non-repeating random numbers between 1 and 9.
• Understand the project's directory structure and the provided files.

🏆 Achievements

After completing this project, you will be able to:

• Work with JavaScript functions and arrays.
• Use regular expressions to extract specific data from a string.
• Generate random numbers and ensure they are unique.
• Follow step-by-step instructions to complete a project.

Skills Graph

Set Up the Project Structure

In this step, you will set up the project files and structure. Follow the steps below to complete this step:

Open the project folder. The directory structure is as follows:

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

Where:

• css is the folder for style files.
• images is the folder for image files.
• index.html is the main page.
• js/index.js is the JavaScript file for rendering and animating the coins.
• js/findCoin.js is the JavaScript file that needs to be completed.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Implement the findNum Function

In this step, you will implement the findNum function in the js/findCoin.js file.

1. Open the js/findCoin.js file.

2. Locate the findNum function:

   // 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. The findNum function takes an input_values parameter and returns an array of unique numbers (1-9) found in the input.

4. Implement the findNum function by following these steps:

   • Use a regular expression /\d/g to find all the digits in the input_values string.
   • Create an empty uniqueNumbers array to store the unique numbers.
   • Iterate through the matched numbers and convert them to integers using parseInt.
   • Check if the parsed number is a valid number (not NaN) and not already in the uniqueNumbers array.
   • If the number is valid and unique, add it to the uniqueNumbers array.
   • Return the uniqueNumbers array.

Implement the randomCoin Function

In this step, you will implement the randomCoin function in the js/findCoin.js file.

1. Locate the randomCoin function:

   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. The randomCoin function should generate an array of 3 non-repeating random numbers between 1 and 9.

3. Implement the randomCoin function by following these steps:

   • Create an empty randomNumArr array to store the random numbers.
   • Use a while loop to generate 3 unique random numbers between 1 and 9.
   • Inside the loop, generate a random number using Math.floor(Math.random() * 9) + 1.
   • Check if the generated number is not already in the randomNumArr array.
   • If the number is unique, add it to the randomNumArr array.
   • Once the randomNumArr array has 3 unique numbers, return the array.

After completing these steps, the "Guess the Coin" game should be fully functional. A gif of all the functions completed is as follows:

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.