Master Mind

The classic game of strategic guessing!

by Taylor Lopez

HTML

<div id="difficultySelection">
    <label>Select the difficulty:</label><br />
    <div id="difficultyRadios">
        <input type="radio" id="rdoDifEasy" name="difficulty" value="easy" checked="true" /><label for="rdoDifEasy">Easy (12 turns)</label><br />
        <input type="radio" id="rdoDifMedium" name="difficulty" value="medium" /><label for="rdoDifMedium">Medium (10 turns)</label><br />
        <input type="radio" id="rdoDifHard" name="difficulty" value="hard" /><label for="rdoDifHard">Hard (8 turns)</label>
    </div>
    <button id="startGameBtn">Start Game</button>
</div>
<table id="board">
    <!-- SAMPLE CONTENTS
    <tr>
        <td class="rowNum">1</td>
        <td>
            <div class="peg red"></div>
            <div class="peg orange"></div>
            <div class="peg yellow"></div>
            <div class="peg purple"></div>
            <div class="resultPegs">
                <div class="rpeg red"></div>
                <div class="rpeg white"></div>
                <div class="rpeg white"></div>
                <div class="rpeg none"></div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="rowNum">2</td>
        <td>
            <div class="peg green"></div>
            <div class="peg blue"></div>
            <div class="peg red"></div>
            <div class="peg orange"></div>
            <div class="resultPegs">
                <div class="rpeg white"></div>
                <div class="rpeg white"></div>
                <div class="rpeg none"></div>
                <div class="rpeg none"></div>
            </div>
        </td>
    </tr>
    END SAMPLE CONTENTS -->
</table>

<div id="userGuess">
    <select class="colorPicker"></select>
    <select class="colorPicker"></select>
    <select class="colorPicker"></select>
    <select class="colorPicker"></select>
    <button id="submitGuessBtn">Guess</button>
</div>

<button id="resetBtn">Start Over</button>

CSS

.peg, .rpeg, .rowNum
{
    opacity: .3;
}

#board .rowNum
{
    font-family: sans-serif;
    font-size: 36px;
    width: 50px;
    text-align: center;
}

.peg
{
    border-radius: 50%;
    border: solid black 3px;
    width: 44px;
    height: 44px;
    float: left;
    margin: 5px;
}

.rpeg
{
    border-radius: 50%;
    border: solid black 2px;
    width: 19px;
    height: 19px;
    float: left;
    margin: 0 2px 2px 0;
}

.resultPegs
{
    width: 50px;
    height: 50px;
    float: left;
    margin: 5px;
}

.red { background-color: red; }
.orange { background-color: orange; }
.yellow { background-color: yellow; }
.green { background-color: green; }
.blue { background-color: blue; }
.purple { background-color: purple; }
.white { background-color: white; }
.none { background-color: black; }

.divClear
{
    clear: both;
    font-size: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

JavaScript

$(function(){
    
// VARIABLES//
    
var $board = $("#board");
var $submitBtn = $("#submitGuessBtn");
var $startBtn = $("#startGameBtn");
var $resetBtn = $("#resetBtn");
var $userGuess = $("#userGuess");
var $difSelection = $("#difficultySelection");
var $difRadios = $("#difficultyRadios");

$userGuess.css("display", "none");
$resetBtn.css("display", "none");
    
// FUNCTIONS //
    
function objSize(obj)
{
    return Object.keys(obj).length;
}
    
function getEnumKey(en, elemIndex)
{
    return Object.keys(en)[elemIndex];
}
    
function getEnumValue(en, elemIndex)
{
    return en[Object.keys(en)[elemIndex]];
}
    
function randInt(num)
{
    return Math.floor(Math.random() * num);
}
    
// CLASSES //

function MasterMind(dif)
{
    this.curTurn = 1;
    this.secretCode = new Selection();
    this.maxTurns = 0;
    this.gameOver = false;
    
    switch(dif)
    {
        case "hard":
            this.maxTurns = MasterMind.hardTurns;
            break;
        case "medium":
            this.maxTurns = MasterMind.mediumTurns;
            break;
        case "easy":
        default:
            this.maxTurns = MasterMind.easyTurns;
    }
}
    
MasterMind.PegsEnum = Object.freeze({
    Blue: "Blue",
    Green: "Green",
    Orange: "Orange",
    Purple: "Purple",
    Red: "Red",
    Yellow: "Yellow"
});
    
MasterMind.prototype.addTurn = function(userSelection)
{
    var numPegs = userSelection.pegs.length;
    
    var results = this.secretCode.compare(userSelection);
    
    var $newRow = $(document.createElement("tr"));
    $newRow.append("<td class='rowNum'>" + this.curTurn + "</td>");
    
    var $newData = $(document.createElement("td"));
    $newRow.append($newData);
    
    for (var i = 0; i < numPegs; i++)
    {
        var $newPegDiv = $(document.createElement("div"));
        $newPegDiv.addClass("peg " + userSelection.pegs[i].toLowerCase());
        $newData.append($newPegDiv);
    }
    
    var $newResultPegsDiv =...