Coding Interview Question – Design Tic Tac Toe Game

Many big tech companies like Amazon, Apple, Google ask design question to test client side development skill.

Question: Create Tic Tac Toe Game.

First we need to figure out the layout. Design would look like table with 3 columns and 2 rows with border.

Now we can create table using css3 grid layout to optimize our design.

<style>
  .gridcontainer {
    display: inline-grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
  }
  .gridcontainer div {
    border: 1px solid black;
    cursor: pointer;
    text-align: center;
    padding: 20px;
  }
 </style>
 <section>
   <h1>Play Tic Toc Game!</h1>
    <div class="gridcontainer">
      <div class="item1"></div>
      <div class="item2"></div>
      <div class="item3"></div>
      <div class="item4"></div>
      <div class="item5"></div>
      <div class="item6"></div>
      <div class="item7"></div>
      <div class="item8"></div>
      <div class="item9"></div>
    </div>
  </section>

Now we need to handle the click for each Player. So we can define player1, player2 and current player.

const player1 = 'X';
const player2 = 'O';
let currentPlayer = player1;

Now we need to write event listener call back function which will make sure active player and place the value after click.

const placeValue = (target) => {
  if (target.innerHTML === '') {
    target.innerHTML = currentPlayer;
    currentPlayer = (currentPlayer === player1) ? player2 : player1;
  }
}

Now last part is to check results to verify which player is wining! To check that we have to predefine array with wining condition and check if any player has satisfied that winning condition.

Read New Interview Question on Coded Transmission.

const winningConditions = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];

With each player turn, add value to result array to check winning condition.

const addValue = (target) => {
  let index = target.className;
  index = index.replace("item", "");
  index = Number(index);
  results[index - 1] = currentPlayer;
}

Now we have results array so we can verify each winning condition to that array to announce winner.

const checkResults = () => {
  for (let i = 0; i < winningConditions.length; i++) {
    let win1 = winningConditions[i];
    let a = results[win1[0]];
    let b = results[win1[1]];
    let c = results[win1[2]];
    if (a !== undefined && b !== undefined && c !== undefined) {
      if (a === b && b === c) {
        alert("Winner!");
      }
    }
  }
}

With putting all code together, here is the working app.

const player1 = 'X';
const player2 = 'O';
let currentPlayer = player1;
let results = [];
const winningConditions = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];

const playTictac = () => {
  const ele = document.querySelector(".gridcontainer");
ele.addEventListener("click", (e) => { placevalue(e.target); }, false);
}
    
const placevalue = (target) => {
  if (target.innerHTML === '') {
    target.innerHTML = currentPlayer;
    addValue(target);
    currentPlayer = (currentPlayer === player1) ? player2 : player1;
  }
}

const addValue = (target) => {
  let index = target.className;
  index = index.replace("item", "");
  index = Number(index);
  results[index - 1] = currentPlayer;
  checkResults();
}

const checkResults = () => {
  for (let i = 0; i < winningConditions.length; i++) {
    let win1 = winningConditions[i];
    let a = results[win1[0]];
    let b = results[win1[1]];
    let c = results[win1[2]];
    if (a !== undefined && b !== undefined && c !== undefined) {
      if (a === b && b === c) {
        alert("Winner!");
      }
    }
  }
}

window.onload = playTictac();
    

Tailwind CSS Tutorial

Play Here with Live Code Play Ground: