Tic-tac-toe: JavaScript

Events

// EVENTS (THINGS TO WATCH OUT FOR)
$(window).on("load", init);
$(document).on("click", "#restart", init);
$(document).on("click", "#board button:not(.activated)", mark);

Variables

// VARIABLES AND PARAMETERS (THINGS THAT DEFINE THE GAME)
var turn = "X";
var win_x = 0;
var win_o = 0;
var win_sequence = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];

Game Functions

// FUNCTIONS (OUTCOMES THAT CAN BE TRIGGERED)
function init() {

  $("#board button").text("?").removeClass("activated o x");
  turn = "X";

}

function mark() {

  $(this).addClass("activated");

  if (turn == "X") {

    $(this).text("X").addClass("x");
    turn = "O";

  } else if (turn == "O") {

    $(this).text("O").addClass("o");
    turn = "X";

  }

  check();

  if (turn == "O") {

    robot();

  }

}

function check() {

  // SERIALIZE GAME DATA

  var data_x = [];
  var data_o = [];

  $("#board button.x").each(function() {
    var index = $(this).index("button");
    data_x.push(index);
  });

  $("#log").prepend("\n");
  $("#log").prepend("X: " + data_x);

  $("#board button.o").each(function() {
    var index = $(this).index("button");
    data_o.push(index);
  });

  $("#log").prepend("\n");
  $("#log").prepend("O: " + data_o);

  // COMPARE TO WINNING SEQUENCES

  var winner = null;
  var count = $("#board button:not(.activated)").length;

  $("#log").prepend("\n");
  $("#log").prepend("REMAINING: " + count);

  $.each(win_sequence, function(i, seq) {

    // SEE IF X OR O DATA INTERSECTS WITH ANY WINNING SEQUENCES
    var intersect_x = seq.filter(value => data_x.includes(value));
    var intersect_o = seq.filter(value => data_o.includes(value));

    $("#log").prepend("\n");
    $("#log").prepend("IX: " + intersect_x);
    $("#log").prepend("\n");
    $("#log").prepend("IO: " + intersect_o);

    if (intersect_x.length == 3) {

      winner = "X";
      win_x += 1;

    } else if (intersect_o.length == 3) {

      winner = "O";
      win_o += 1;

    }

  });

  // ANNOUNCE GAME RESULT

  if (winner != null) {

    $("#log").prepend("\n");
    $("#log").prepend("WINNER: " + winner);

    $("#score_x").text(win_x);
    $("#score_o").text(win_o);

    $("#board button").addClass("activated");

  }

  if (count == 0 && winner == null) {

    $("#log").prepend("\n");
    $("#log").prepend("NO WINNER");

  }

}

AI Functions

function robot() {

  $("#log").prepend("\n");
  $("#log").prepend("ROBOT PLAYS ...");

  var data_free = [];

  $("#board button:not(.activated)").each(function() {
    var index = $(this).index("button");
    data_free.push(index);
  });

  $("#log").prepend("\n");
  $("#log").prepend("FREE: " + data_free);

  var target = null;

  // TARGET THE CENTER AND OTHER CORNERS

  if (data_free.indexOf(4) > -1) {

    target = 4;

  } else if (data_free.indexOf(0) > -1) {

    target = 0;

  } else if (data_free.indexOf(2) > -1) {

    target = 2;

  } else if (data_free.indexOf(6) > -1) {

    target = 6;

  } else if (data_free.indexOf(8) > -1) {

    target = 8;

  }

  // CHOOSE FROM AVAILABLE CELLS AT RANDOM, IF TARGET REMAINS NULL

  if (target == null) {

    target = data_free[Math.floor(Math.random() * data_free.length)];

  }

  $("#board button:eq(" + target + ")").click();

}