Design Tic Tac Toe - Leetcode Solution

Design Tic Tac Toe is a problem on LeetCode that requires designing a Tic Tac Toe game. The game should be designed in such a way that it can be played by two players, X and O, and the game should be able to determine who has won the game.

To solve this problem, we can first create a 2D array to represent the game board. The array can be initialized to contain empty spaces.

const board = [
  [' ', ' ', ' '],
  [' ', ' ', ' '],
  [' ', ' ', ' ']
];

We can then create a function to display the board on the console. This function can iterate through the rows and columns of the array and display the content of each cell.

function displayBoard() {
  console.log(`${board[0][0]} | ${board[0][1]} | ${board[0][2]}`);
  console.log(`---------`);
  console.log(`${board[1][0]} | ${board[1][1]} | ${board[1][2]}`);
  console.log(`---------`);
  console.log(`${board[2][0]} | ${board[2][1]} | ${board[2][2]}`);
}

Next, we can create a function to get the user's input. This function can prompt the user to enter a row and column number to place their marker (X or O) on the board.

function getUserInput() {
  const row = prompt("Enter row number (0-2)");
  const col = prompt("Enter column number (0-2)");

  return { row: parseInt(row), col: parseInt(col) };
}

Once we have the user's input, we can create a function to place the marker on the board. This function should check if the cell is empty before placing the marker. If the cell is already occupied, the function should prompt the user to enter a different cell.

function placeMarker(marker, row, col) {
  if (board[row][col] === ' ') {
    board[row][col] = marker;
    return true;
  } else {
    console.log("Cell is already occupied. Choose another cell.");
    return false;
  }
}

After placing the marker on the board, we can create a function to determine if there is a winner. This function can check all the rows, columns, and diagonals to see if there are three markers of the same type in a row.

function hasWinner(marker) {
  // Check rows
  for (let i = 0; i < 3; i++) {
    if (board[i][0] === marker && board[i][1] === marker && board[i][2] === marker) {
      return true;
    }
  }

  // Check columns
  for (let j = 0; j < 3; j++) {
    if (board[0][j] === marker && board[1][j] === marker && board[2][j] === marker) {
      return true;
    }
  }

  // Check diagonals
  if (board[0][0] === marker && board[1][1] === marker && board[2][2] === marker) {
    return true;
  }

  if (board[0][2] === marker && board[1][1] === marker && board[2][0] === marker) {
    return true;
  }

  return false;
}

Finally, we can create the main game loop. In this loop, we can display the board, get the user's input, place the marker on the board, and check if there is a winner. If there is a winner, we can display a message and end the game.

function playGame() {
  let currentPlayer = 'X';

  while (true) {
    console.clear();
    displayBoard();

    console.log(`Player ${currentPlayer}, it's your turn.`);

    const { row, col } = getUserInput();

    if (placeMarker(currentPlayer, row, col)) {
      if (hasWinner(currentPlayer)) {
        console.clear();
        displayBoard();

        console.log(`Player ${currentPlayer} wins!`);
        break;
      }

      currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    }
  }
}

To start the game, we can call the playGame() function.

playGame();

This solution should provide a functional design for a Tic Tac Toe game that can be played in the console. However, for a more comprehensive solution, a user interface and additional game logic (such as checking for a tie and allowing the user to start a new game) would need to be implemented.

1