Tic Tac Toe

Simple Tic Tac Toe multiplayer game. NO computer player (YET)

by Uzair Mehmood

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<h1 class="head">Tic Tac Toe Multiplayer</h1>

<div>
  <p id="message"></p>
</div>
<div>
  <table id="board">
    <tr id="row1">
      <td id="1" class="square"></td>
      <td id="2" class="square v"></td>
      <td id="3" class="square"></td>
    </tr>
    <tr id="row2">
      <td id="4" class="square h"></td>
      <td id="5" class="square v h"></td>
      <td id="6" class="square h"></td>
    </tr>
    <tr id="row3">
      <td id="7" class="square"></td>
      <td id="8" class="square v"></td>
      <td id="9" class="square"></td>
    </tr>
  </table>
</div>
<div>
  <p id="winmsg"></p>
  <p class="scores">Player 1 (O) : <span id="p1">0</span> | Player 2 (X) : <span id="p2">0</span>

  </p>
  <hr />
  <p>Tic Tac Toe table template taken from <a href="http://stackoverflow.com/a/6779780" target="_blank">here</a>

  </p>
</div>

CSS

.square {
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: xx-large;
}

.v {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

.h {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.scores {
  color: Brown;
}

#message {
  color: purple;
}

#board {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}

#newgame {
  border: none;
  color: white;
  background: DarkMagenta;
  font-size: large;
}

#winmsg {
  color: navy;
}

p {
  text-align: center;
  font-size: large;
}

h1 {
  color: FireBrick;
  text-align: center;
}

td {
  color: purple;
}

body {
  background: seashell;
}

JavaScript

var player;
var board = [];
var winCombinations = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
  [1, 4, 7],
  [2, 5, 8],
  [3, 6, 9],
  [1, 5, 9],
  [3, 5, 7]
];
var isgameOn = true;
var didWin = false;
var p1score = 0;
var p2score = 0;

$('td').click(function() {

  if (isgameOn) {
    if ($(this).text() === '') {
      if (player == 1) {
        $(this).text('O');
        board[$(this).attr('id')] = 'O';
      } else if (player == 2) {
        $(this).text('X');
        board[$(this).attr('id')] = 'X';
      }
      checkforWin();
      if (isgameOn) {
        player = (player == 1) ? 2 : 1;
        $('#message').html('Player ' + player + '\'s Turn.');
      }
    } else {
      $('#board').effect('shake', {
        distance: 10,
        times: 2
      });
    }
  } else {
    $('#newgame').effect('pulsate');
  }

});

function checkforWin() {

  $.each(winCombinations, function(i, j) {
    var check = [];
    $.each(j, function(k, l) {
      check.push(board[l]);
    });
    if (check == "X,X,X") {
      p2score++;
      didWin = true;
    } else if (check == "O,O,O") {
      p1score++;
      didWin = true;
    } else {
      if ($('td:empty').length === 0) {
        if (!didWin) {
          $('#message').html('<button id="newgame">New Game</button>');
          $('#winmsg').text('Game Tied !');
          isgameOn = false;
        }
      }
    }

  });

  if (didWin) {
    $('#winmsg').text('Player ' + player + ' Wins !');
    $('#message').html('<button id="newgame">New Game</button>');
    isgameOn = false;
    refreshScores();
  }
}

function refreshScores() {
  $('#p1').text(p1score);
  $('#p2').text(p2score);
}

function newGame() {
  $('td').text('');
  isgameOn = true;
  didWin = false;
  player = Math.floor(Math.random() * (2)) + 1;
  $('#message').text('Player ' + player + '\'s Turn.');
  $('#winmsg').text('');
  board = [];
}

$('#message').on('click', '#newgame', function() {
  newGame();
});

$(function() {
  newGame();
});