Tic Tac Toe Single Player

Tic Tac Toe with computer player :)

by Uzair Mehmood

HTML

<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<h1 class="head">Tic Tac Toe Multiplayer</h1>

<div>
    <button id="newgame">New Game</button>
    <img style="display:none;" src="http://i58.photobucket.com/albums/g250/J_Cuz/smilies/dark/JC-thinking.gif" /><br />
</div>
<div>
    <table id="board">
        <tr id="row1">
            <td id="1" class="square"></td>
            <td id="2" class="square v"></td>
            <td id="3" class="square"></td>
        </tr>
        <tr id="row2">
            <td id="4" class="square h"></td>
            <td id="5" class="square v h"></td>
            <td id="6" class="square h"></td>
        </tr>
        <tr id="row3">
            <td id="7" class="square"></td>
            <td id="8" class="square v"></td>
            <td id="9" class="square"></td>
        </tr>
    </table>
</div>
<div>
    <p id="winmsg"></p>
    <p class="scores">Player 1 (O) : <span id="p1">0</span>
| Player 2 (X) : <span id="p2">0</span>

    </p>
    <hr />
    <p>Tic Tac Toe table template taken from <a href="http://stackoverflow.com/a/6779780" target="_blank">here</a>

    </p>
</div>

CSS

.square {
    width:100px;
    height:100px;
    text-align:center;
    font-size:xx-large;
}
.v {
    border-left:1px solid #000;
    border-right:1px solid #000;
}
.h {
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}
.scores {
    color:Brown;
}
#board {
    margin-left:auto;
    margin-right:auto;
    border-collapse:collapse;
}
#newgame {
    border:none;
    color:white;
    background:DarkMagenta;
    font-size:large;
    margin-left:auto;
    margin-right:auto;
    display:block;
}
#winmsg {
    color:navy;
}
p {
    text-align:center;
    font-size:large;
}
h1 {
    color:FireBrick;
    text-align:center;
}
td {
    color:purple;
}
body {
    background:seashell;
}

JavaScript

var player,
 	board = [],
 	winCombinations = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [1, 4, 7],
    [2, 5, 8],
    [3, 6, 9],
    [1, 5, 9],
    [3, 5, 7]
	],
 	isgameOn = true,
 	didWin = false,
 	p1score = 0,
	p2score = 0;

$('td').click(function () {

    if (isgameOn) {
        if ($(this).text() === '') {
            if (player == 1) {
                $(this).text('O');
                board[$(this).attr('id')] = 'O';
            }
			checkforWin();
			if (isgameOn) {
			player = (player == 1) ? 2 : 1;
			}
            if (player == 2) {
            $('img').show();
            setTimeout(playAI, 1500);
            }
        } else {
            $('#board').effect('shake', {
                distance: 10,
                times: 2
            });
        }
    } else {
        $('#newgame').effect('pulsate');
    }

});

function checkforWin() {

    $.each(winCombinations, function (i, j) {
        var check = [];
        $.each(j, function (k, l) {
            check.push(board[l]);
        });
        if (check == "X,X,X") {
            p2score++;
            didWin = true;
        } else if (check == "O,O,O") {
            p1score++;
            didWin = true;
        } else {
            if ($('td:empty').length === 0) {
                if (!didWin) {
                    $('#winmsg').text('Game Tied !');
                    isgameOn = false;
                }
            }
        }
    });

    if (didWin) {
        $('#winmsg').text('Player ' + player + ' Wins !');
        isgameOn = false;
        refreshScores();
    }
}

function refreshScores() {
    $('#p1').text(p1score);
    $('#p2').text(p2score);
}

function newGame() {
	$('td').text('');
    isgameOn = true;
    didWin = false;
    player = Math.floor(Math.random() * (2)) + 1;
    $('#winmsg').text('');
    board = [];
    if (player == 2){
        playAI();
    }
}

$('#newgame').click(function () {
    newGame();
});

$(function () {
    newGame();
});

function playAI() {
   ...