Figure out the "Code" (4 colored dots) that the computer is hiding at the top of the board.
For example, the computer could be hiding from left to right, Blue, White, Blue and Red.
The computer may choose any combination of Red, Black, Green, Blue, White or Yellow dots.
It may choose multiples of any color as well.
The player makes sequential guesses starting at the bottom of the board.
When the player
clicks "Score My Guess", the computer shows a little black dot for each
guessed color that matches the hidden color directly above. It will show a little white
dot for the remaining colors that match a hidden color, but in the wrong position.
If no guessed colors match at all, there will be no filled in little dots. If all the colors match,
there will be 4 little dots. A winning guess is scored with 4 little black dots.
Though one has only 10 guesses, by working methodically and using deduction, one can always win the game.
There is a color palette on the right side of the board. You can set the colors of your guess
by clicking or tapping on the colors.
Work your way sequentially through the colors, starting with, say, all Red dots.
This will let you know exactly how many Red dots the computer has chosen.
If any, start the next row with that many Red. Then fill the remaining dots with a new color.
Before clicking "Check My Score", make sure your latest guess would explain the scores of your previous guesses.
If it does not then the guess could not match the code.
In that case, make changes to your guess and check again!
If you get stumped or are trying to learn the game, you can click "Reveal The Code". That way you can see the code and better understand how your guesses are scored.
This page is intended to showcase skills learned up through the Bootstrap section of the
"The Complete Web Developer Course - Build 14 Websites".
It utilizes HTML, CSS, JavaScript, JQuery and Bootstrap.
It includes
an original working implementation of the MasterMind game featuring the following design considerations: Mobile First Design, Functional Programming and Automated Testing.
Reduce game board size initially to only 6 rows. This will reduce scrolling on a phone. However, the player still gets up to 10 guesses if needed. Also displays colors in the palette just once.