A Game of Deduction

Object of Game

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.

Tip 1: "Brute Force"

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.

Tip 2: "Sanity Check"

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!

Tip 3: "Take a Peek"

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.

About This Web Page

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.

Game Option

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.