HTML5 Tic-Tac-Toe

tictactoe.js

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.addEventListener('click', on_canvas_click, false);

var grid = [['', '', ''], ['', '', ''], ['', '', '']];
var turn = 'X';
var cord_x;
var cord_y;
var reset = false;

function draw_o(x, y) {
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = '#b2382a';
  ctx.beginPath();
  ctx.arc(x, y, 84/2, 0, Math.PI*2, true);
  ctx.fill();

  ctx.globalCompositeOperation = 'destination-out';
  ctx.beginPath();
  ctx.arc(x, y, (84 - 6 * 2) / 2, 0, Math.PI*2, true);
  ctx.fill();
}
function draw_x(x, y) {
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = '#3074cc';
  ctx.beginPath();
  ctx.moveTo(x - 42, y - 42 + 4);
  ctx.lineTo(x - 42 + 4, y - 42);
  ctx.lineTo(x + 42, y + 42 - 4);
  ctx.lineTo(x + 42 - 4, y + 42);
  ctx.fill();

  ctx.beginPath();
  ctx.moveTo(x - 42, y + 42 - 4);
  ctx.lineTo(x - 42 + 4, y + 42);
  ctx.lineTo(x + 42, y - 42 + 4);
  ctx.lineTo(x + 42 - 4, y - 42);
  ctx.fill();
}
function draw_grid() {
  ctx.globalCompositeOperation = 'destination-out';
  ctx.fillRect(0,0,300,300);

  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = '#998171';
  ctx.fillRect(96,0,6,300);
  ctx.fillRect(198,0,6,300);

  ctx.fillRect(0,96,300,6);
  ctx.fillRect(0,198,300,6);
}

function is_game_over() {
  // Check for horizontal wins.
  for (var i = 0; i < 3; i++) {
    if (grid[i].join('') == 'XXX') {
      return 'X wins!';
    } else if (grid[i].join('') == 'OOO') {
      return 'O wins!';
    }
  }
  
  // Check for vertical wins.
  for (var k = 0; k < 3; k++) {
    var x = 0;
    var o = 0;
    for (var l = 0; l < 3; l++) {
      if (grid[l][k] == 'X') {
        x += 1;
      } else if (grid[l][k] == 'O') {
        o += 1;
      }
    }
    if (x == 3) {
      return 'X wins!';
    } else if (o == 3) {
      return 'O wins!';
    }
  }

  // Check for diagonal wins.
  if (grid[0][0] + grid[1][1] + grid[2][2] == 'XXX' || grid[0][2] + grid[1][1] + grid[2][0] == 'XXX') {
    return 'X wins!';
  } else if (grid[0][0] + grid[1][1] + grid[2][2] == 'OOO' || grid[0][2] + grid[1][1] + grid[2][0] == 'OOO') {
    return 'O wins!';
  }

  // Check for draw.
  var d = 0;
  for (j = 0; j < 3; j++) {
    if (!(grid[j].indexOf('') >= 0)) {
      d += 1;
    }
  }
  if (d == 3) {
    return 'Draw!';
  }
}

function on_canvas_click(e) {
  if (e.pageX || e.pageY) {
    cord_x = e.pageX;
    cord_y = e.pageY;
  } else {
    cord_x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    cord_y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  }
  cord_x -= canvas.offsetLeft;
  cord_y -= canvas.offsetTop;

  var valid = false;

  if (reset == false) {
    if (grid[0][0] == '' && cord_x <= 96 && cord_y < 96) {
      cord_x = 48;
      cord_y = 48;
      valid = true;
      grid[0][0] = turn;
    } else if (grid[0][1] == '' && cord_x >= 102 && cord_x <= 197 && cord_y < 96) {
      cord_x = 150;
      cord_y = 48;
      valid = true;
      grid[0][1] = turn;
    } else if (grid[0][2] == '' && cord_x >= 204 && cord_y < 96) {
      cord_x = 252;
      cord_y = 48;
      valid = true;
      grid[0][2] = turn;
    } else if (grid[1][0] == '' && cord_x <= 96 && cord_y >= 102 && cord_y <= 197) {
      cord_x = 48;
      cord_y = 150;
      valid = true;
      grid[1][0] = turn;
    } else if (grid[1][1] == '' && cord_x >= 102 && cord_x <= 197 && cord_y >= 102 && cord_y <= 197) {
      cord_x = 150;
      cord_y = 150;
      valid = true;
      grid[1][1] = turn;
    } else if (grid[1][2] == '' && cord_x >= 204 && cord_y >= 102 && cord_y <= 197) {
      cord_x = 252;
      cord_y = 150;
      valid = true;
      grid[1][2] = turn;
    } else if (grid[2][0] == '' && cord_x <= 96 && cord_y >= 204) {
      cord_x = 48;
      cord_y = 252;
      valid = true;
      grid[2][0] = turn;
    } else if (grid[2][1] == '' && cord_x >= 102 && cord_x <= 197 && cord_y >= 204) {
      cord_x = 150;
      cord_y = 252;
      valid = true;
      grid[2][1] = turn;
    } else if (grid[2][2] == '' && cord_x >= 204 && cord_y >= 204) {
      cord_x = 252;
      cord_y = 252;
      valid = true;
      grid[2][2] = turn;
    }
  } else {
    turn = 'X';
    grid = [['', '', ''], ['', '', ''], ['', '', '']];
    draw_grid();
    reset = false;
    document.getElementById('s').innerHTML = "X's turn";
  }

  if (turn == 'X' && valid == true) {
    draw_x(cord_x, cord_y);
    document.getElementById('s').innerHTML = "O's turn";
    turn = 'O';
  } else if (turn == 'O' && valid == true) {
    draw_o(cord_x, cord_y);
    document.getElementById('s').innerHTML = "X's turn";
    turn = 'X';
  }

  if (is_game_over()) {
    document.getElementById('s').innerHTML = is_game_over() + ' Click to restart.';
    reset = true;
  }
}

draw_grid();