Tic Tac Toe JavaScript Code

Introduction

Tic Tac Toe is a classic game that can be played with pen and paper, but it's also a great game to develop in JavaScript. In this article, we'll take a look at a simple Tic Tac Toe game implemented in JavaScript using HTML, CSS, and jQuery.

Code Explanation

The game board is implemented using a simple HTML table with three rows and three columns. Each cell in the table has a unique Id that can be used to identify it.

The gameArray array is used to keep track of the state of the game. The array is initialized with nine elements, one for each cell on the game board. The initial state of the game is represented by an array full of null values.

var gameArray = [null, null, null, null, null, null, null, null, null];

The playMove() function is called whenever a player clicks on a cell on the game board. The function takes two arguments: player and cellId. The player argument is set to either 'X' or 'O', depending on which player is taking their turn. The cellId argument is the Id of the cell the player clicked on.

The playMove() function updates the gameArray array with the new move and updates the table cell with the new value. The function also checks if the game has been won or if it's a tie. If the game is over, the gameOver() function is called.

function playMove(player, cellId) {
  var cellNumber = parseInt(cellId.charAt(4));
  gameArray[cellNumber] = player;
  $("#" + cellId).html(player);
  $("#" + cellId).unbind('click');
  checkGame(player);
}

The checkGame() function is called after each turn to check if the game has been won or if it's a tie. The function checks for all possible winning combinations and calls the gameOver() function if a winning combination is found. If the gameArray array does not contain any null values, then the game is a tie and the gameOver() function is called with winner set to 'tie'.

function checkGame(player) {
  if ((gameArray[0] == player && gameArray[1] == player && gameArray[2] == player) ||
      (gameArray[3] == player && gameArray[4] == player && gameArray[5] == player) ||
      (gameArray[6] == player && gameArray[7] == player && gameArray[8] == player) ||
      (gameArray[0] == player && gameArray[3] == player && gameArray[6] == player) ||
      (gameArray[1] == player && gameArray[4] == player && gameArray[7] == player) ||
      (gameArray[2] == player && gameArray[5] == player && gameArray[8] == player) ||
      (gameArray[0] == player && gameArray[4] == player && gameArray[8] == player) ||
      (gameArray[2] == player && gameArray[4] == player && gameArray[6] == player)) {
    gameOver(player);
  } else if (gameArray.indexOf(null) == -1) {
    gameOver('tie');
  }
}

The gameOver() function is called when the game is over. The function takes one argument: winner, which is set to either 'X', 'O', or 'tie', depending on how the game ended. The function displays a message to the user with the outcome of the game and disables all remaining cells on the game board.

function gameOver(winner) {
  if (winner == 'tie') {
    alert("Game Over. It's a tie!");
  } else {
    alert("Game Over. '" + winner + "' wins!");
  }
  $('td').unbind('click');
}

Conclusion

In this article, we discussed how to implement a simple Tic Tac Toe game in JavaScript using HTML, CSS, and jQuery. The code we went over is just one possible implementation of the game, and there are many other ways to approach the problem. However, the principles we went over should give you a good idea of how to get started building your own games in JavaScript.