Mastermind Code Breaker Game — Free HTML CSS JS Snippet

Mastermind is a classic code-breaking deduction game: the computer picks a hidden sequence of colored pegs, and the player tries to guess it within a limited number of attempts, receiving black and white peg feedback after every guess. Black means a color is in the exact right position; white means a color exists in the code but in the wrong position. This snippet implements the complete game loop — secret generation, guess building from a color palette, correct peg-counting logic (the trickiest part to get right), a scrollable guess history, and win/lose states — entirely in vanilla JavaScript.

Generating the secret code

randomSecret() picks CODE_LENGTH (4) colors independently at random from the COLORS palette, with repeats allowed — a real Mastermind code can and often does repeat a color, which is part of what makes deduction interesting. The secret is stored in a closured secret array and never rendered to the DOM, so it can't be read from the page source while playing.

The peg-counting algorithm: why a naive comparison is wrong

The subtle part of Mastermind is scoring white pegs correctly when colors repeat. A naive approach that just checks "does this guessed color exist anywhere in the secret" over-counts: if the secret has one red and the guess has three reds, only one white or black peg should be awarded for red, not three. scoreGuess() solves this with a two-pass approach. The first pass counts black pegs (exact position matches) and, for everything else, pushes the *unmatched* secret and guess colors into secretLeft and guessLeft arrays — removing already-matched positions from consideration entirely. The second pass walks guessLeft and, for each color, looks it up in secretLeft with indexOf; if found, it counts a white peg and splices that specific slot out of secretLeft so the same secret peg can never be claimed twice. This splice-on-match step is exactly what keeps repeated colors from being over-counted.

Building a guess from a palette, not a text input

Instead of typing colors, the player clicks swatches in .mm-palette to push colors onto a currentGuess array, rendered live into four .mm-slot circles. This keeps the interaction fast and mirrors the physical board-game experience of placing pegs, and it structurally prevents invalid input (typos, wrong color names) since only real palette colors can ever enter currentGuess.

Feedback pegs and turn limits

After each submitted guess, renderRow() appends a row to the guess history containing the guessed colors and up to four small feedback pegs — black pegs first, then white, then empty placeholders — matching the classic physical presentation. turn increments on every non-winning guess and the game ends in a loss once it reaches MAX_TURNS (10) without four black pegs, or ends in a win the instant score.black === CODE_LENGTH.