Tic Tac Toe Game in JavaScript

This tutorial provides a simple implementation of the classic Tic Tac Toe game using JavaScript. The game is played on a 3x3 board where two players take turns marking their symbol (X or O) on an empty cell. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.

Game Rules

1. The game is played on a 3x3 board.
2. There are two players in the game: X and O.
3. The game starts with an empty board.
4. Players take turns placing their symbol on an empty cell.
5. The first player to get three symbols in a row (horizontally, vertically, or diagonally) wins the game.
6. If all cells are filled and no player has won, the game ends in a tie.

Implementation

Here is the implementation of the Tic Tac Toe game in JavaScript:

// Define the players
const PLAYER_X = 'X';
const PLAYER_O = 'O';

// Define the game board
let board = [
  ['', '', ''],
  ['', '', ''],
  ['', '', '']
];

// Define the current player
let currentPlayer = PLAYER_X;

// Function to check if the game is over
function isGameOver() {
  // Check for horizontal win
  for (let i = 0; i < 3; i++) {
    if (board[i][0] !== '' && board[i][0] === board[i][1] && board[i][1] === board[i][2]) {
      return true;
    }
  }

  // Check for vertical win
  for (let i = 0; i < 3; i++) {
    if (board[0][i] !== '' && board[0][i] === board[1][i] && board[1][i] === board[2][i]) {
      return true;
    }
  }

  // Check for diagonal win
  if (board[0][0] !== '' && board[0][0] === board[1][1] && board[1][1] === board[2][2]) {
    return true;
  }
  if (board[0][2] !== '' && board[0][2] === board[1][1] && board[1][1] === board[2][0]) {
    return true;
  }

  // Check if all cells are filled
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
      if (board[i][j] === '') {
        return false;
      }
    }
  }

  // If all cells are filled and no player has won, it's a tie
  return true;
}

// Function to switch the current player
function switchPlayer() {
  if (currentPlayer === PLAYER_X) {
    currentPlayer = PLAYER_O;
  } else {
    currentPlayer = PLAYER_X;
  }
}

// Function to make a move
function makeMove(row, col) {
  if (board[row][col] !== '') {
    return false;
  }

  board[row][col] = currentPlayer;
  return true;
}

// Function to reset the game
function resetGame() {
  board = [
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
  ];
  currentPlayer = PLAYER_X;
}

// Example usage
makeMove(0, 0); // true
makeMove(0, 1); // false (cell already occupied)
makeMove(1, 1); // true
makeMove(0, 2); // false (game over)
isGameOver(); // true
switchPlayer();
makeMove(2, 2); // true
resetGame();

Conclusion

That's it! You now have a working implementation of the Tic Tac Toe game in JavaScript. You can use this code as a starting point and modify it to fit your needs. Enjoy playing!