This is an implementation of the classic Mastermind board game. Using only HTML, CSS and JavaScript.

Decoding board

Rules and functionality

Some of the functionality may be configured, so you can modify how difficult it will be to break the code. Decreasing the number of colors and/or the code length is a great way to learn the game. When 6 colors and a code length of 4 is too easy, you can instead increase the number of colors and/or the code length.

Code length

With the default configuration the code length is 4. You can configure the code length between 2 and 8.

Code pegs

With the default configuration there are code pegs in 6 different colors. You can configure the number of colors between 2 and 8.

Colors

The code pegs are colored:

• ⬤ (red)
• ⬤ (green)
• ⬤ (blue)
• ⬤ (yellow)
• ⬤ (black)
• ⬤ (white)
• ⬤ (cyan)
• ⬤ (magenta)

Temporary disabled colors

The colors currently enabled are also shown below the shielded secret code/pattern. You may toggle the colors that you can choose from, by clicking the corresponding color in the row. The code pegs with matching color will also be toggled, except for code pegs in the current round. If a color is disabled, it will not be included when looping through colors, or in randomly created guesses.

Beware though, a temporary disabled color may, of course, still be hidden in the secret code.

Key pegs

The key pegs are colored:

• ⬤ (black) - indicates correct color and correct position
• ⬤ (white) - indicates correct color but in wrong position

Duplicates

Duplicates in the code are allowed.

Blanks

Blanks are not allowed in the code, but you can leave blanks in your guesses.

Number of rounds

With the default configuration the number of rounds is 10. You can configure the number of rounds between 6 and 16 (in steps by 2).

How to play

You click the holes for the current round to toggle between the enabled colors. When your guess is ready you click the corresponding Lock my guess button and the result of the round is calculated with key pegs added accordingly. If the guess is unsuccessful a new round is started.

Note: Usually I start a round with a couple of random guesses, using the Random guess button, since that is way faster than manually selecting each color.

Buttons

In the list below, the corresponding keyboard shortcuts are defined in brackets.

↻ [N]

Start a new game.

† [Q]

Give up the current game. The secret code will be shown.

× [Backspace]

Clear the current round, i.e. remove the code pegs.

⤪ [R]

Make a random guess for the current round.

↵ [Enter]

Lock the current guess and get the result.

⧉ [1-9]

Copy a previous guess.

Additional shortcut keys

You can also move between the code pegs for the current round and toggle the color of a code peg, by using keys. The current active code peg, when using keys, is visually marked (but you first have to activate the marker for each new game by moving left or right).

[A]

Move left.

[D]

Move right.

[W]

Toggle to next color for current code peg.

[S]

Toggle to previous color for current code peg.

It is currently not possible to use keys to toggle which colors are enabled.

More to come

In future versions some of the following functionality may be implemented.

• Choose if duplicates are allowed.
• Calculate time statistics, per round, per solution, ... .

Changelog

Version 1.3.1 released 2024-10-10

• Improved CSS for mobile view.

Version 1.3.0 released 2024-02-17

• Removed Bootstrap.

Version 1.2.1 released 2024-01-01

• Upgraded Bootstrap to version 5.1.3.

Version 1.2.0 released 2021-08-21

• Added favicon.
• Upgraded Bootstrap to version 5.1.0.

Version 1.1.0 released 2020-01-04

• Support for also using keyboard shortcuts, instead of only the mouse.
• Cleaned up the code.

Version 1.0.0 released 2019-09-07

• First working version with all the basic functionality.
• Choose number of colors (2-8).
• Choose code length (2-8).
• Choose number of rounds (6, 8, 10, 12, 14, 16).
• Choose if blanks are allowed.
• Random guesses should guess patterns different from history.

First version of NNM Mastermind was originally implemented in August 2019 by Anders Gustafson and released September 7.