Tic Tac Toe

by john_s

HTML

<div id="board">
    <div class="top l"></div>
    <div class="top c"></div>
    <div class="top r"></div>
    <div class="mid l"></div>
    <div class="mid c"></div>
    <div class="mid r"></div>
    <div class="bot l"></div>
    <div class="bot c"></div>
    <div class="bot r"></div>
</div>

CSS

#board>div {
    position: absolute;
    height: 40px;
    width: 40px;
    border: 1px solid #000;
}
.win {
    background-color: #099;
}
.top {
    top: 0px;
}
.mid {
    top: 40px;
}
.bot {
    top: 80px;
}
.l {
    left: 0px;
}
.c {
    left: 40px;
}
.r {
    left: 80px;
}

JavaScript

var PLAYERS = ['X', 'O'],
    WIN_CONDITIONS = [
        '.top', // across top
        '.mid', // across mid
        '.bot', // across bot
        '.l', // down l
        '.c', // down c
        '.r', // down r
        '.top.l, .mid.c, .bot.r', // diagonal
        '.bot.l, .mid.c, .top.r'  // diagonal
    ],
    player = 0;
    
$('#board').on('click', '>div', function() {
    var $square = $(this);
    
    if ($square.text() == '') {
        $square.text(PLAYERS[player]);

        $.each(WIN_CONDITIONS, function(i, condition) {
            var $matches = $(condition).filter(':contains(' + PLAYERS[player] + ')');
            if ($matches.length == 3) {
                $matches.addClass('win');
                alert(PLAYERS[player] + ' wins');
                return false;
            }
        });

        player = (player + 1) % PLAYERS.length;
    }
});