Welcome to the Mastermind Game! This project presents a classic implementation of the Mastermind game, a code-breaking game where players guess a secret combination of numbers.
- Navigate to the Mastermind Game repository.
- Click the green 'Code' button on top of the commit history to open the popover. Then, select the 'Download ZIP' option to download the file to your local machine.
- Find the downloaded file in your download folder and double-click to unzip the file.
- Launch a text editor of your preference. Then, import the unzipped file into the text editor by dragging and dropping it into the editor's interface.
- In your text editor, open the index.html file.
- Right-click on the html file to open the context menu.
- Select "Open with," and choose your preferred web browser from the list of available options (e.g., Google Chrome, Firefox, etc.). If you use a Visual Studio Code, you can also choose 'Open with Live Server [⌘L ⌘O]'
- The application should now open in your selected web browser.
Once the game is loaded, follow these steps to play.
- Read all the rules that are displayed on the screen.
- Choose the game's difficulty level by clicking on the easy, medium, or difficult buttons. The game's difficulty is set to medium by default.
- To play the game, input a combination of 4 numbers into the input form and hit the GUESS button or press Enter.
- The input form only accepts a combination of 4 numbers. The warning message will be displayed if you input something other than numbers or input less or more than 4 numbers.
- Depending on the difficulty level, a specific range of numbers is allowed. If you input a number that is out of range, a warning message will be displayed. For example, the easy level only allows you to input numbers that range from 0 to 3 in each digit. So, if you input 1234 as your combination, you'll get the warning message since the number 4 is not allowed.
- After each guess, the computer will provide feedback on how your combination compares to the hidden number.
-
Example of the feedback:
- 2 correct number and 0 correct location
- This means your combination has two correct numbers, but nothing is in the correct location.
- 2correct number and 1 correct location
- This means one number in your guess is in the accurate position and another correct number is in the wrong position.
- 0 correct number and 0 correct location
- This means the hidden number does not include any numbers in your guess.
- 4 correct number and 4 correct location
- This means you get all numbers correctly; you win the game!
- This means you get all numbers correctly; you win the game!
- 2 correct number and 0 correct location
- Use the feedback to refine your next guess.
- You have a total of 10 attempts to guess the number. If you run out of attempts, you lose the game. If you guess the correct combination, you win!
- The hidden number combination will be reviewed when the game is finished.
The Mastermind Game is implemented using Vanilla JavaScript. Here's an overview of the development process.
- Decided to utilize Vanilla JavaScript along with simple HTML and CSS. Wanted to focus more on how the game works and kept the front-end simple.
- Figured out how to fetch random numbers from random.org. Implemented a robust function to fetch and transform the response into a usable array of number combinations.
- Implemented a validation protocol by checking for out-of-range numbers, non-numeric characters, and validated the length of the input.
- Developed a main function to compare the user's guess with the hidden combination, generating feedback on correct numbers and correct locations.
- Enhanced user experience by implementing a function to automatically reset input values after each guess, simplifying the gameplay flow.
- Provided a feedback display to the user based on comparison results, showing the user how many numbers are right and how many are in the right place.
- Established a function to declare game outcomes, ensuring users are promptly informed of their success or failure with hidden combination revelation.
To make the game more engaging, difficulty levels were implemented. Users can choose between easy, medium, and difficult levels, each offering a different range of numbers to guess from.
- Recognized the potential for more interesting gameplay experience through the addition of difficulty levels.
- Implemented difficulty level buttons and provided users with the option to tailor the game's challenge to their preference. The game adjusts based on what users pick.
- Engineered a flexible system to dynamically adjust difficulty levels upon user interaction, ensuring seamless integration and alignment of difficulty level mechanics with front-end design.
Dynamic Reset of Hidden Combination:
- Reset the hidden combination when users switch difficulty levels, maintaining gameplay integrity and challenge relevance.
- Incorporated visual indicators to highlight the selected difficulty level, improving user engagement and navigation.
Feedback to improve this project is welcome. If you have any suggestions or would like to collaborate, please get in touch with me on GitHub. Thanks!