Tic Tac Toe Game

by Venkatesh Dematti

HTML

<h1 class="main-title">Tic Tac Toe</h1>

<div class="container">
  <div class="choice overlay">
    <h2>Choose your sign</h2>
    <div class="choices-container">
      <div class="choices">
        <p>X</p>
      </div>
      <div class="choices">
        <p>O</p>
      </div>
    </div>
  </div>
  <div class="final overlay">
    <div class="final-container">
      <h3 id="final"></h3>
      <p><a href="#" id="restart">Restart game</a></p>
    </div>
  </div>
  <div class="square" id="sq-1"></div>
  <div class="square" id="sq-2"></div>
  <div class="square" id="sq-3"></div>
  <div class="square" id="sq-4"></div>
  <div class="square" id="sq-5"></div>
  <div class="square" id="sq-6"></div>
  <div class="square" id="sq-7"></div>
  <div class="square" id="sq-8"></div>
  <div class="square" id="sq-9"></div>
</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Lobster|Open+Sans:400,800");
body {
  background-color: #fefefe;
}

.main-title {
  font-family: "Lobster", cursive;
  text-align: center;
  font-size: 70px;
  margin: 25px 0;
  color: #222;
}

.container {
  font-family: "Open Sans", sans-serif;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 400px;
  margin: 0 auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  text-align: center;
  z-index: 10;
}

.choice {
  display: block;
  padding-top: 30px;
  background-color: rgba(255, 255, 255, 0.9);
}
.choice .choices-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 50px;
}
.choice .choices-container .choices {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  height: 125px;
  border: solid black 2px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.choice .choices-container .choices:hover {
  background-color: tomato;
}
.choice .choices-container .choices p {
  margin: 0;
  padding-top: 0;
  font-size: 70px;
  font-weight: 800;
}

.final {
  display: none;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.final .final-container {
  color: white;
  background-color: rgba(51, 51, 51, 0.8);
  padding: 24px 0 24px;
  text-align: center;
  width: 300px;
}
.final .final-container p {
  margin: 0;
}
.final .final-container h3 {
  margin: 0;
  marin-bottom: 8px;
}
.final .final-container a {
  color: #eee;
}

.square {
  background-color: tomato;
  width: 129.3333333333px;
  height: 129.3333333333px;
  margin: 2px;
  line-height: 129.3333333333px;
  border-radius: 10px;
  color: white;
  font-weight: 800;
  font-size: 100px;
  text-align: center;
  cursor: pointer;
}

JavaScript

$(document).ready(function(){
  
  // Create a state
  function createState(player,board,status,score,depth) {
    let state = {};
    state.player = player;
    state.board = board;
    state.status = status;
    return state;
  }
  
  
  function getStatus(board) {
    let combo = [
      [0,1,2],[3,4,5],[6,7,8],
      [0,3,6],[1,4,7],[2,5,8],
      [0,4,8],[2,4,6]
    ];
    for(let i=0; i<combo.length; i++) {
      if(board[combo[i][0]] == board[combo[i][1]] && board[combo[i][2]] == board[combo[i][0]] && board[combo[i][0]] !== "e") {
        if(board[combo[i][0]] == players[1].sign) {
          return "won";
        } else {
          return "lost";
        }
      }
    }
    if(board.includes("e")) {
      return "on";
    }
    return "tie";
  }
  
  function getNextStates(state) {
    return state.board.reduce(function(acc, val, i) {
      if(val == "e") {
        let board = state.board.slice(0, i).concat([players[1].sign], state.board.slice(i+1));
        acc.push(
          createState(
            players[0],
            board,
            getStatus(board)
          )
        )
      }
      return acc;
    }, []);
  }
  
  function canItWin(stateList) {
    for(let i=0; i<stateList.length; i++) {
      if(stateList[i].status == "won") {
        return stateList[i];
      }
    }
    return false;
  }
  
  function canItLoose(state) {
    for(let i=0; i<state.board.length; i++) {
      if(state.board[i] == "e") {
        let board =  state.board.slice(0, i).concat([players[0].sign], state.board.slice(i+1));
        if(getStatus(board) == "lost") {
          board = state.board.slice(0, i).concat([players[1].sign], state.board.slice(i+1));
          return createState(
            players[0],
            board,
            getStatus(board)
          )
        }
      }
    }
    return false;
  }
  
  
  function chooseNextState(stateList, currentState) {
    if(canItWin(stateList) !== false) {
      return canItWin(stateList);
    } else...