Tic Tac Toe

[Play the game]

This Web application is built using three files, shown below:

tictac.html
tictac.css
tictac.js

It also uses two third-party libraries to help with building Web pages.

jquery-1.11.0.min.js
normalize.css

tictac.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Tic Tac Toe demonstration</title>
    <link rel="stylesheet" type="text/css" href="normalize.css" />
    <link rel="stylesheet" type="text/css" href="tictac.css" />
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body id="home">

<h1>Tic Tac Toe</h1>

<table id="tictac"><tbody>
<tr><td id="cell0"></td><td id="cell1"></td><td id="cell2"></td></tr>
<tr><td id="cell3"></td><td id="cell4"></td><td id="cell5"></td></tr>
<tr><td id="cell6"></td><td id="cell7"></td><td id="cell8"></td></tr>
</tbody></table>

<div id="result"></div>

<form>
<button type="button" id="tictacreset">New Game</button>
</form>

<script src="jquery-1.11.0.min.js"></script>
<script src="tictac.js"></script>
</body>
</html>

tictac.css

body > * {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: sans-serif;
}

h1 {
    color: #930;
}

table#tictac td {
    width: 1.3em;
    height: 1.3em;
    text-align: center;
    vertical-align: middle;
    font: bold 36px sans-serif;
}

td#cell0, td#cell1, td#cell2, td#cell3, td#cell4, td#cell5 {
    border-bottom: 3px solid #930;
}

td#cell0, td#cell1, td#cell3, td#cell4, td#cell6, td#cell7 {
    border-right: 3px solid #930;
}

div#result {
    margin: 0.5em;
    font: 24px sans-serif;
}

tictac.js

function fetchBoard() {
    "use strict";
    var board;
    board = ['', '', '', '', '', '', '', '', ''];
    $("#tictac td").each(function (index) {
        board[index] = $(this).text();
    });
    return board;
}

// returns 1 if all three parameters are the string 'X', -1 if all
// are 'O', and 0 otherwise.
function checkRow(a, b, c) {
    "use strict";
    if (a === 'X' && b === 'X' && c === 'X') {
        return 1;
    } else if (a === 'O' && b === 'O' && c === 'O') {
        return -1;
    } else {
        return 0;
    }
}

// returns a positive number if board has 'X' winning, a negative number
// if board has 'O' winning, and 0 otherwise
function checkWin(board) {
    "use strict";
    return checkRow(board[0], board[1], board[2]) // rows
        + checkRow(board[3], board[4], board[5])
        + checkRow(board[6], board[7], board[8])
        + checkRow(board[0], board[3], board[6]) // columns
        + checkRow(board[1], board[4], board[7])
        + checkRow(board[2], board[5], board[8])
        + checkRow(board[0], board[4], board[8]) // main diagonal
        + checkRow(board[2], board[4], board[6]); // reverse diagonal
}

// returns a randomly selected empty square, or -1 if all squares are full
function selectMove(board) {
    "use strict";
    var i, options;
    options = [];
    for (i = 0; i < 9; i += 1) {
        if (board[i] === '') {
            options.push(i);
        }
    }

    if (options.length === 0) {
        return -1;
    } else {
        return options[Math.floor(Math.random() * options.length)];
    }
}

function showGameOver(result) {
    "use strict";
    var target;
    target = $("#result");
    if (result > 0) {
        target.css('color', '#800');
        target.text("You win!");
    } else if (result < 0) {
        target.css('color', '#008');
        target.text("I win!");
    } else {
        target.css('color', '#505');
        target.text("Tie game.");
    }
}

function resetGame() {
    "use strict";
    var target;

    $("#tictac td").text('');
    target = $("#result");
    target.css('color', '#000');
    target.text('Click a square');
}

function moveAt() {
    "use strict";
    var xCell, board, result, oLocation, oCell;

    xCell = $(this);

    // return if square is already full or if game is over
    if (xCell.text() !== '' || checkWin(fetchBoard()) !== 0) {
        return;
    }

    // place 'X' at selected location
    xCell.css('color', '#800');
    xCell.text('X');

    // if game is over, display message
    board = fetchBoard();
    result = checkWin(board);
    if (result !== 0) {
        showGameOver(result);
        return;
    }

    // find where to place the 'O'
    oLocation = selectMove(board);
    if (oLocation < 0) {
        // if there is no valid place, it is tie game
        showGameOver(0);
        return;
    }

    // place 'O' at location
    board[oLocation] = 'O';
    oCell = $("#cell" + oLocation);
    oCell.css('color', '#008');
    oCell.text('O');

    // if game is over, display that
    result = checkWin(board);
    if (result !== 0) {
        showGameOver(result);
        return;
    }
}

$(document).ready(function () {
    "use strict";

    $("#tictac td").click(moveAt);
    $("#tictacreset").click(resetGame);
    resetGame();
});