Noughts And Crosses

This fiddle demonstrates A.S.Douglas's 1952 version of Tic-Tac-Toe. To read the related article visit weeklygame.tumblr.com

HTML

<canvas id="ttt" width="300" height="300"></canvas>
<p class="message"></p>

CSS

#ttt {
    background: black;
    cursor: pointer;
}

JavaScript

function TTT() {
    this.canvas = document.getElementById('ttt');
    this.context = this.canvas.getContext('2d');
    this.width = this.width;
    this.height = this.height;
    
    this.square = 100;
    this.boxes = [];
    this.turn = Math.floor(Math.random() * 2) + 1;
    this.player;
    
    this.message = $('.message');
};

var ttt = new TTT();

TTT.prototype.currentPlayer = function() {
    var symbol = (this.turn === 1) ? 'X' : 'O';
    ttt.message.html('It is ' + symbol + '\'s turn');
};

// Draw the board
TTT.prototype.draw = function(callback) {
    // Draw Grid
    for(var row = 0; row <= 200; row += 100) {
        var group = [];
        for(var column = 0; column <= 200; column += 100) {
            group.push(column);
            this.context.strokeStyle = 'white';
            this.context.strokeRect(column,row,this.square,this.square);
        };
        this.boxes.push(group);
    };
    
    callback;
};

// Get center of the click area cordinates
TTT.prototype.cordinates = function(e) {
    var row = Math.floor(e.clientX / 100) * 100,
        column = Math.floor(e.clientY / 100) * 100;
    
    return [row, column];
};

// Check if the clicked box has symbol
TTT.prototype.check = function(row, column) {
    
};

// Get cordinates and set image in container
TTT.prototype.click = function(e) {
    var cordinates = ttt.cordinates(e),
        x = cordinates[0] + 100 / 2,
        y = cordinates[1] + 100 / 2,
        image = new Image();
    
    if (ttt.turn === 1) {
        image.src = 'http://s8.postimg.org/tdp7xn6lt/naught.png';
        ttt.turn = 1;
    } else {
        image.src = 'http://s8.postimg.org/9kd44xt81/cross.png';
        ttt.turn = 2;
    };
    
    ttt.context.drawImage(image, x - (image.width / 2), y - (image.height / 2));
    ttt.currentPlayer();
};

function render() {
    ttt.draw($('#ttt').on("click", ttt.click));
    ttt.currentPlayer();
};

(function init() {
    render();
})();