Mastermind

In development.

by Laura Kishimoto

HTML

<div class="card">
    
    <h1>Mastermind</h1>
    
    <form>
        
        <div id="board">
            
        </div>
        
        <div class="clear">&nbsp;</div>
        <input type="button" value="Guess" class="guess" />
        
        <input type="button" value="Start a new game" id="restart" />
    </form>
    
</div>

CSS

body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #666666;
    font-family: verdana, trebuchet ms, arial, sans serif;
}
h1 {
    font-size: 2em;
    margin: .67em 0;
    font-weight: bolder;
}
p {
    margin: 1.12em 0;
    display: block;
}

h1, form {
    text-align: center;
    margin-top: 0px;
}
.card {
    margin: 40px auto;
    padding: 30px;
    width: 250px;
    height: 350px;
    border: 4px solid #333333;
    background-color: #FFFFFF;
}
input {
    display: inline;
    margin: 3px auto;
    font-size: 10px;
}
#board {
    border: 2px solid #333333;
    width: 100px;
    background-color: #EEEEEE;
}
.peg {
    position: relative;
    float: left;
    width: 21px;
    height: 21px;
    border: 2px solid #333333;
    cursor: pointer;
}
.teal {
    background-color: teal;
}
.lime {
    background-color: #A1C820;
}
.gold {
    background-color: gold;
}
.purple {
    background-color: #74426F;
}
.clear {
    clear: both;
}
.row {
    position: relative;
}

JavaScript

/*
Make pretty
Generate random answer
*/


var turn = 0;
var play = false;
var full = false;
var answer;

function newanswer() {
    answer = ['teal', 'lime', 'purple', 'gold'];
}

function restart() {
    $(".peg").removeClass("teal gold purple lime");
    turn = 0;
    newanswer();
    play = true; /* run answer generator */
}

function colour(peg) {
    if (peg.hasClass('teal')) {
        return 'teal';
    }
    if (peg.hasClass('gold')) {
        return 'gold';
    }
    if (peg.hasClass('purple')) {
        return 'purple';
    }
    if (peg.hasClass('lime')) {
        return 'lime';
    }
}
$(document).ready(function() {
    $('#restart').click(restart);
    restart();
    for (i = 0; i <= 9; i++) {
        var newrow = '<div class="row">' + '<div class="peg"></div>' + '<div class="peg"></div>' + '<div class="peg"></div>' + '<div class="peg"></div>' + '</div>' + '<div class="clear"></div>';
        $(newrow).data('turn', i).appendTo('#board');
    }
    $('.peg').click(function() {
        if ($(this).parent().data('turn') == turn && play) {
            if ($(this).hasClass('teal')) {
                $(this).addClass('gold').removeClass('teal');
            }
            else if ($(this).hasClass('gold')) {
                $(this).addClass('lime').removeClass('gold');
            }
            else if ($(this).hasClass('lime')) {
                $(this).addClass('purple').removeClass('lime');
            }
            else if ($(this).hasClass('purple')) {
                $(this).addClass('teal').removeClass('purple');
            }
            else {
                $(this).addClass('teal');
            }
        }
    });

    function whatrow() {
        var currentrow;
        $('.row').each(function() {
            if ($(this).data('turn') == turn) {
                currentrow = $(this);
            }
        })
        return currentrow;
    }

    function checkfull() {
        var currentrow = whatrow();
        var anyempty = false;
       ...