zulu2tru97/codebreaker

JavaScript game based off the board game "Mastermind."

CodeBreaker

JavaScript game based off the board game "Mastermind" with some slight differences.

To see the program in action, go HERE.

Rules:

The goal of the game is to figure out a four-digit code generated by the computer. The code is made up of four colored circles. There are 6 possible colors: green, blue, red, yellow, black, and purple. Colors can be repeated in the code. Change the color of the circle on screen by clicking on it. When you are content with your guess, click "Submit Guess." If your guess is correct, the grey circles at the top will show you the winning pattern and a message will tell you how many turns it took. If your guess is incorrect, the guess will be placed above the controls. Some additional circles may appear beside your guess if your guess is close. A black square represents a correct color in the correct position. A white square represents a correct color in an incorrect position. Colors are only represented once in the hints (for example, if there are two green circles in the solution but your guess only has one, you will only recieve one square) and the hints will not indicate which color was right (if you guess the second color right, the first block may be black).Example: if you guessed green, green, blue, red and the code was green, green, red, green, your guess would appear above the controls with two black circles and a white circle (the two greens were correct and the red was in the wrong position).

How it Works:

Each circle in the player's control area has a number inside it representing its current color. The number is completely invisible to the player, but the program references it when changing colors or when the player submits a guess. When a guess is submitted, the numbers are stored inside an array and compared to the computer's array, which was randomly generated by the when the page was loaded (in setup.js). If the arrays are the same, the player guessed correctly and the game is over. A message box will display the score and the grey circles at the top of the screen will display the answer. If the guess is incorrect, the player's guess printed to the screen for their reference when making new guesses. White and black circles are printed with another function. The player is then allowed to continue guessing until they determine the correct code.

The code and comments will show how it works in greater detail.

If you have any questions about anything, let me know.

-John DeHart, July 11, 2020