Tic Tac Toe

How to build an easy Tic Tac Toe game in javascript. Just check the source to see html code.

x turn



Javascript code

var TicTacToe = function () {};

TicTacToe.prototype = (function () {

    var doc = document;
    var wt;
    var isMyTurn = true;
    var mySign = "x";
    var opponentSign = "o";
    var currentSign = "x";
    var gameState = {currentState: "Playing"};
    var board = ["", "", "", "", "", "", "", "", ""];
    
    /**
     * Initiate the game
     * @returns {void}
     */
    function init() {
        wt = doc.getElementById("whosTurn");
    }
    
    /**
     * Check what sign to use and write it out to the GUI
     * @returns {void}
     */
    function checkSign() {
        if (isMyTurn) {
            currentSign = mySign;
        } else {
            currentSign = opponentSign;
        }
        wt.innerHTML = currentSign + " turn";
    }
    
    /**
     * Change players turn
     * @returns {void}
     */
    function changeTurn() {
        isMyTurn = !isMyTurn;
    }
    
    /**
     * Set current sign as html of the current element
     * @param {Element} element found by current id or null if empty
     * @returns {void}
     */
    function placeSign(element) {
        element.innerHTML = currentSign;
    }
    
    /**
     * Loop through the board and if find empty value then board is not full
     * @returns {Boolean} Returns true if empty otherwise false
     */
    function isBoardFull() {
        for (var i = 0; i < board.length; i++) {
            if (board[i] === "")
                return false;
        }
        return true;
    }
    
    /**
     * Restarts the game
     * @returns {void}
     */
    function reset() {
        for (var i = 0; i < board.length; i++) {
            board[i] = "";
            doc.getElementById(i).innerHTML = "";
        }
        gameState.currentState = "Playing";
        wt.innerHTML = currentSign + " turn";
    }
    
    /**
     * Check if we have have any winner
     * @returns {Boolean} Returns true if found a winning algoritm
     */
    function checkWinner() {
        if (
                board[0] == currentSign && board[1] == currentSign && board[2] == currentSign ||
                board[3] == currentSign && board[4] == currentSign && board[5] == currentSign ||
                board[6] == currentSign && board[7] == currentSign && board[8] == currentSign ||
                board[0] == currentSign && board[3] == currentSign && board[6] == currentSign ||
                board[1] == currentSign && board[4] == currentSign && board[7] == currentSign ||
                board[2] == currentSign && board[5] == currentSign && board[8] == currentSign ||
                board[0] == currentSign && board[4] == currentSign && board[8] == currentSign ||
                board[6] == currentSign && board[4] == currentSign && board[2] == currentSign
                ) {
            // we have a winner
            return true;
        }
        return false;
    }

    return {
        doc: doc,
        init: function () {
            init();
        },
        /**
         * This is what happens when clicked on current board peice
         * @param {Event} e clicked on current peice
         * @returns {void}
         */
        onSquareClick: function (e) {
            if (gameState.currentState != "Playing")
                return;
            var id = e.toElement.id;
            placeSign(doc.getElementById(id));
            board[id] = currentSign;
            if (checkWinner()) {
                gameState.currentState = "Complete";
                wt.innerHTML = currentSign + " won";
                return;
            } else {
                changeTurn();
                checkSign();
            }
            if (isBoardFull()) {
                wt.innerHTML = "draw";
                gameState.currentState = "Complete";
            }

        },
        reset: reset
    };

})();

onload = function () {
    var t = new TicTacToe();
    t.init();

    // cache document
    var doc = t.doc;

    var s1 = doc.getElementById("0");
    s1.addEventListener("click", t.onSquareClick);

    var s2 = doc.getElementById("1");
    s2.addEventListener("click", t.onSquareClick);

    var s3 = doc.getElementById("2");
    s3.addEventListener("click", t.onSquareClick);

    var s4 = doc.getElementById("3");
    s4.addEventListener("click", t.onSquareClick);

    var s5 = doc.getElementById("4");
    s5.addEventListener("click", t.onSquareClick);

    var s6 = doc.getElementById("5");
    s6.addEventListener("click", t.onSquareClick);

    var s7 = doc.getElementById("6");
    s7.addEventListener("click", t.onSquareClick);

    var s8 = doc.getElementById("7");
    s8.addEventListener("click", t.onSquareClick);

    var s9 = doc.getElementById("8");
    s9.addEventListener("click", t.onSquareClick);

    var reset = doc.getElementById("reset");
    reset.addEventListener("click", t.reset);
};
CSS code

.square {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    float: left;
    font-size:  70px;
    text-align: center;
}
.clear {
    clear: both;
}