memory game in jQuery

by antouank

HTML

<script src="http://login.teamviewer.com/Scripts/kendo/2012.3.1315-debug/kendo.all.js"></script>
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.common.css">
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.metro.css">
<table id="mainTable"></table>

CSS

#mainTable td
{
    border: 1px solid #eee;
    color: #fff;
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 18px;
    cursor: default;
}

#mainTable td:hover {
    background-color: #666;
}

#mainTable .clicked {
    background-color: #555;
}

body {
    background-color: #444;
}

JavaScript

var $mainTable = $('#mainTable'),
    myWords = [],
    valA, valB, col=4, row=3, start;

//    function to create the table
var createTable = function (col, row) {
    var $table = $('<table>'), i;
    
    // construct our table internally
    for(var i=0; i<row; i++){
        var $tr = $('<tr data-row="'+i+'">'); // make row
        
        for(var j=0; j<col; j++){
            $tr.append($('<td data-col="'+j+'">')); // make cell
        }
        $table.append($tr);
    }
    
    $mainTable.html($table.html());
};

//    generate an array random words from a dictionary
var giveWords = function(pairsRequested){
    var dictionary = ['now','this','is','only','a','test','I','think'],
        ar = dictionary.slice(0,pairsRequested);
    
    ar = ar.concat(ar);
    // taken from @ http://jsfromhell.com/array/shuffle [v1.0]
    for(var j, x, i = ar.length; i; j = parseInt(Math.random() * i), x = ar[--i], ar[i] = ar[j], ar[j] = x);
    return ar;
}

// initialize
createTable(col,row);
myWords = giveWords(6); // our words array

// listen
$mainTable.on('click', 'td' ,function(){
    var $that = $(this),
        thisCol = $that.data('col'),
        thisRow = $that.closest('tr').data('row');
    
    if(!valB && !$that.hasClass('clicked')){
        var itemNum = (thisRow*(col))+thisCol;

        if(!valA){   // first item clicked
            valA = myWords[itemNum];
            $that.addClass('clicked')
                 .text(valA);
            
        } else {    // we already have a clicked one
            valB = myWords[itemNum];
            
            if(valA === valB){ // if they match...
                $mainTable.find('.clicked')
                          .add($that)
                          .removeClass('clicked')
                          .addClass('revealed')
                          .text(valA);
                
                //    check how many open remaining
                var open = $mainTable.find('td')
                                    ...