Tic Tac Toe

Also known as noughts and crosses,

by Patel1327

HTML

<div class="card">

<h1>Tic Tac Toe</h1>
<p>
<i>also known as
<br />"noughts and crosses"</i>
</p>

<div id="board">

<div id="1" class="cell clear"></div>
<div id="2" class="cell"></div>
<div id="3" class="cell"></div>

<div id="4" class="cell clear"></div>
<div id="5" class="cell"></div>
<div id="6" class="cell"></div>

<div id="7" class="cell clear"></div>
<div id="8" class="cell"></div>
<div id="9" class="cell"></div>

<div class="clear"></div>

</div>

<form>
<br />
<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;
}
.card {
    margin: 40px auto;
    padding: 30px;
    width: 250px;
    height: 350px;
    text-align: center;
    border: 4px solid #333333;
    background-color: #FFFFFF;
}
#board {
    border: 2px solid #333333;
    margin: auto;
    width: 162px;
    font-size: 24px;
    background-color: #EEEEEE;
}
.cell {
    position: relative;
    float: left;
    width: 50px;
    height: 38px;
    border: 2px solid #333333;
    padding-top: 12px;
    font-weight: bold;
    cursor: pointer;
}
.x {
    color: white;
    background-color: #A1C820;
}
.o {
    color: white;
    background-color: teal;
}
.win {
    color: #333333;
    background-color: gold;
}
.clear {
    clear: both;
}

JavaScript

var turnx = true;
var play = true;

$(document).ready(function () {
    $('#restart').click(restart);
    $('.cell').click(function() {
        if (play && ($(this).text() == '')) {
            if (turnx) {
                $(this).text('X').addClass('x');
            }
            else {
                $(this).text('O ').addClass('o');
            }
            turnx = !turnx;
            won();
        }
    });
});

function check(a, b, c) {
    atext = $(a).text();
    btext = $(b).text();
    ctext = $(c).text();
    if (atext == btext && btext == ctext && (atext != '')) {
        play = false;
        $(a).addClass('win');
        $(b).addClass('win');
        $(c).addClass('win');
        alert ('Player ' + atext + ' has won the game!');
        return true;
    }
    else {
        return false;
    }
};

function won() {
    if (check('#1', '#2', '#3')) {}
    else if (check('#4', '#5', '#6')) {}
    else if (check('#7', '#8', '#9')) {}
    else if (check('#1', '#4', '#7')) {}
    else if (check('#2', '#5', '#8')) {}
    else if (check('#3', '#6', '#9')) {}
    else if (check('#1', '#5', '#9')) {}
    else if (check('#3', '#5', '#7')) {}
    else {
        if ($('.cell:empty').length == 0) {
            alert ('This game is a draw.');
            play = false;
        }
    }
}

function restart() {
    $('.cell').removeClass('x o win').text('');
    play = true;
}