Tic Tac Toe

In this example below you will see how to do a Tic Tac Toe with some HTML / CSS and Javascript

Tic-Tac-Toe! You can play with a friend or against the computer!

Thumbnail
This awesome code was written by captnstarburst, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright captnstarburst ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Tic Tac Toe</title>
  <link href="https://fonts.googleapis.com/css?family=Coiny|Itim" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container-fluid background">
 
  <div class="pusher"></div>
 
  <div class="row title">
    <div class="col-xs-12">
    <h1 class="text-center"> Tic-Tac-Toe </h1>
    </div>
  </div>
 
  
  <div class="pusher"></div>
 
  <div class="row">
   <div class="col-xs-12">
      <div class="gameBorder">
        <p>&nbsp  X Wins : <span id="xWin">0</span> &nbsp &nbsp 
          O Wins : <span id = "oWin">0</span> &nbsp &nbsp 
CAT : <span id="CAT">0</span> &nbsp &nbsp &nbsp &nbsp
        <span id= "whoseTurn"> Player Turn  </span>
        
  &nbsp &nbsp 
          <button class="btn btn-primary pull-right" id="reset">Reset</button>
        </p>

            <div class="row"></div>
        <h3><div class="winner" id="winner"> You are the Winner </div></h3> 
        <div class="gameBoard" id="gameBoard">
          
          <div class= "squares" id="0"> <h1 class="text text-center" id="text0"> </h1> </div>
          <div class="verticalBorder"></div>
          <div class= "squares" id="1"> <h1 class="text text-center" id="text1"> </h1> </div>
          <div class="verticalBorder"></div>
          <div class= "endSquares" id="2"><h1 class="text text-center" id="text2">  </h1></div>
         <div class="horizontalBorder"></div>
           
       
           <div class= "squares" id="3"><h1 class="text text-center" id="text3">  </h1></div>
          <div class="verticalBorder"></div>
          <div class= "squares" id="4"><h1 class="text text-center" id="text4">  </h1></div>
          <div class="verticalBorder"></div>
          <div class= "endSquares" id="5"><h1 class="text text-center" id="text5">  </h1></div>
        
           <div class="horizontalBorder"></div>
         
          <div class= "squares" id="6"><h1 class="text text-center" id="text6">  </h1></div>
          <div class="verticalBorder"></div>
          <div class= "squares" id="7"><h1 class="text text-center" id="text7">  </h1></div>
          <div class="verticalBorder"></div>
          <div class= "endSquares" id="8"><h1 class="text text-center" id="text8">  </h1></div>
         
          
        </div>


<div class="playerSelection" id="playerSelection">
  <h2>How Many Players? </h2>

<h3 id="onePlayer"> 1 </h3>    &nbsp &nbsp &nbsp  <h3 id="twoPlayer">2 </h3>
</div>

<div class="XorO" id="XorO">
<h2><span id="pvp">Player One, </span> X OR O ? </h2>

<h3 id="xPlay"> X </h3>    &nbsp &nbsp &nbsp    <h3 id="oPlay"> O </h3>

</div>
           
      </div> 
    </div> 
  </div>
   
</div> 
 
<div class="text-center footer"> Coded by Conor Hinchee </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/tic-tac-toe-GjNmYY */
.background{
  background-color:  #2243B6;
  min-height: 600px;
  font-family: 'Itim', cursive;
 
}
.pusher{
  padding-bottom : 40px;
}
.gameBorder{
  background: #5FA778;
   
  position: relative;
  border-radius: 10px;
  width: 405px;
  height: 415px;
  margin: 0 auto;
 
}
.squares{
 
height: 133px;
width: 133px;

 display: inline-block;
 vertical-align: top;
 
 z-index: 1;

}
.gameBoard{
 
  background: #1A1110;
  width: 405px;
  height: 415px;
  border-radius: 10px;
}
.verticalBorder{
  width: 3px;
  height: 133px;
  background: #FEFEFA;
  display: inline-block;
  
}
.endSquares{
  height: 133px;
  width: 110px;

display: inline-block;
 vertical-align: top;
 
}
.horizontalBorder{
  width: 399px;
  height: 3px;
  background: #FEFEFA;
  vertical-align: top ;
 
}
.playerSelection{
  width: 399px;
  height: 200px;
  background: #CEC8EF;
  margin: 80px auto;
  text-align: center;  
  border-radius: 10px;  
}

.XorO{
  width: 399px;
  height: 200px;
  background: #CEC8EF;
  margin: 80px auto;
  text-align: center;  
  border-radius: 10px;  
}
h3:hover{
border: dotted;

}
.text{
color: white;
 font-family: 'Coiny', cursive; 
  font-size :76px;

} 
.winner{
color : white;
text-align: center;
zindex : 1;
} 
.footer{
  background-color : #2243B6;
}
/* @media(max-width: 500px){ 
 .gameBorder{
   width: 300px;
  } 
}*/

/*Downloaded from https://www.codeseek.co/captnstarburst/tic-tac-toe-GjNmYY */
$(document).ready(function() {
  var players = 0;
  var playerPiece = "";
  var whoseOnFirst = "X";
  var turn = 2;
  var winArr;
  var boardArr;
  var whoseTurn;
  startScreen();

  $("#onePlayer").on("click", function() {
    players = 1;
    $("#pvp").hide();
    XorOScreen();
  });

  $("#twoPlayer").on("click", function() {
    players = 2;
    $("#pvp").show();
    XorOScreen();
  });

  $("#xPlay").on("click", function() {
    playerPiece = "X";
    gameBoardScreen();
    turnChange(whoseOnFirst, turn);
  });

  $("#oPlay").on("click", function() {
    playerPiece = "O";
    gameBoardScreen();
    turnChange(whoseOnFirst, turn);

    if (players === 1) {
      setTimeout(function() {
        moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);
        turn++;
        turnChange(whoseOnFirst, turn);
      }, 1500);
    }
  });

  $("#0").on("click", function() {
    boardArr = getBoard();
    whoseTurn = getWhoseTurn();
    var module = turn % 2;

    if (module === 0 && whoseTurn === whoseOnFirst && boardArr[1][0]) {
      moveSpace("0", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    } else if (module === 1 && whoseTurn != whoseOnFirst && boardArr[1][0]) {
      moveSpace("0", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    }
  });

  $("#1").on("click", function() {
    boardArr = getBoard();
    whoseTurn = getWhoseTurn();
    var module = turn % 2;

    if (module === 0 && whoseTurn === whoseOnFirst && boardArr[1][1]) {
      moveSpace("1", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    } else if (module === 1 && whoseTurn != whoseOnFirst && boardArr[1][1]) {
      moveSpace("1", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    }
  });

  $("#2").on("click", function() {
    boardArr = getBoard();
    whoseTurn = getWhoseTurn();
    var module = turn % 2;

    if (module === 0 && whoseTurn === whoseOnFirst && boardArr[1][2]) {
      moveSpace("2", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    } else if (module === 1 && whoseTurn !== whoseOnFirst && boardArr[1][2]) {
      moveSpace("2", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    }
  });

  $("#3").on("click", function() {
    boardArr = getBoard();
    whoseTurn = getWhoseTurn();
    var module = turn % 2;

    if (module === 0 && whoseTurn === whoseOnFirst && boardArr[1][3]) {
      moveSpace("3", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    } else if (module === 1 && whoseTurn != whoseOnFirst && boardArr[1][3]) {
      moveSpace("3", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    }
  });

  $("#4").on("click", function() {
    boardArr = getBoard();
    whoseTurn = getWhoseTurn();
    var module = turn % 2;

    if (module === 0 && whoseTurn === whoseOnFirst && boardArr[1][4]) {
      moveSpace("4", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    } else if (module === 1 && whoseTurn != whoseOnFirst && boardArr[1][4]) {
      moveSpace("4", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    }
  });

  $("#5").on("click", function() {
    boardArr = getBoard();
    whoseTurn = getWhoseTurn();
    var module = turn % 2;

    if (module === 0 && whoseTurn === whoseOnFirst && boardArr[1][5]) {
      moveSpace("5", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    } else if (module === 1 && whoseTurn != whoseOnFirst && boardArr[1][5]) {
      moveSpace("5", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    }
  });

  $("#6").on("click", function() {
    boardArr = getBoard();
    whoseTurn = getWhoseTurn();
    var module = turn % 2;

    if (module === 0 && whoseTurn === whoseOnFirst && boardArr[1][6]) {
      moveSpace("6", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    } else if (module === 1 && whoseTurn != whoseOnFirst && boardArr[1][6]) {
      moveSpace("6", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    }
  });

  $("#7").on("click", function() {
    boardArr = getBoard();
    whoseTurn = getWhoseTurn();
    var module = turn % 2;

    if (module === 0 && whoseTurn === whoseOnFirst && boardArr[1][7]) {
      moveSpace("7", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    } else if (module === 1 && whoseTurn != whoseOnFirst && boardArr[1][7]) {
      moveSpace("7", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    }
  });

  $("#8").on("click", function() {
    boardArr = getBoard();
    whoseTurn = getWhoseTurn();
    var module = turn % 2;

    if (module === 0 && whoseTurn === whoseOnFirst && boardArr[1][8]) {
      moveSpace("8", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                  if (whoseTurn === whoseOnFirst) {
                    setTimeout(function() {
                      moveSpace(
                        gameLogic(turn, playerPiece),
                        whoseOnFirst,
                        turn
                      );
                    }, 500);
                  }
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    } else if (module === 1 && whoseTurn != whoseOnFirst && boardArr[1][8]) {
      moveSpace("8", whoseOnFirst, turn);

      winArr = winCheck();
      if (winArr[0]) {
        gameWin(winArr[1]);
      } else {
        turn++;
        turnChange(whoseOnFirst, turn);

        if (turn === 11) {
          gameWin("CAT");
        } else {
          if (players === 1) {
            setTimeout(function() {
              moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);

              winArr = winCheck();
              if (winArr[0]) {
                gameWin(winArr[1]);
              } else {
                turn++;
                if (turn === 11) {
                  gameWin("CAT");
                } else {
                  turnChange(whoseOnFirst, turn);
                }
              }
            }, 500);
          }
        }
      }
    }
  });

  function gameWin(winner) {
    var str;
    var int;
    var convert;

    if (winner === "X") {
      str = $("#xWin").text();
      int = parseInt(str);
      int++;
      convert = int.toString();
      $("#xWin").text(convert);
      $("#winner").text("X WINS");
      $("#winner").fadeIn();
      $("#winner").fadeOut();
    } else if (winner === "O") {
      str = $("#oWin").text();
      int = parseInt(str);
      int++;
      convert = int.toString();
      $("#oWin").text(convert);
      $("#winner").text("O WINS");
      $("#winner").fadeIn();
      $("#winner").fadeOut();
    } else {
      str = $("#CAT").text();
      int = parseInt(str);
      int++;
      convert = int.toString();
      $("#CAT").text(convert);
      $("#winner").text("CAT Game");
      $("#winner").fadeIn();
      $("#winner").fadeOut();
    }

    if (whoseOnFirst === "X") {
      whoseOnFirst = "O";
    } else {
      whoseOnFirst = "X";
    }

    setTimeout(function() {
      turn = 2;
      turnChange(whoseOnFirst, turn);
      whoseTurn = getWhoseTurn();

      $("#text0").text("");
      $("#text1").text("");
      $("#text2").text("");
      $("#text3").text("");
      $("#text4").text("");
      $("#text5").text("");
      $("#text6").text("");
      $("#text7").text("");
      $("#text8").text("");

      if (players === 1) {
        if (playerPiece !== whoseOnFirst) {
          setTimeout(function() {
            moveSpace(gameLogic(turn, playerPiece), whoseOnFirst, turn);
            turn++;
            turnChange(whoseOnFirst, turn);
          }, 500);
        }
      }
    }, 1000);
  }

  $("#reset").on("click", function() {
    players = 0;
    playerPiece = "";
    whoseOnFirst = "X";
    turn = 2;
    $("#xWin").text("0");
    $("#oWin").text("0");
    $("#CAT").text("0");
    startScreen();

    $("#text0").text("");
    $("#text1").text("");
    $("#text2").text("");
    $("#text3").text("");
    $("#text4").text("");
    $("#text5").text("");
    $("#text6").text("");
    $("#text7").text("");
    $("#text8").text("");
  });
});

function startScreen() {
  $("#gameBoard").hide();
  $("#XorO").hide();
  $("#winner").hide();
  $("#playerSelection").show();
}

function XorOScreen() {
  $("#gameBoard").hide();
  $("#XorO").show();
  $("#playerSelection").hide();
}

function gameBoardScreen() {
  $("#gameBoard").show();
  $("#XorO").hide();
  $("#playerSelection").hide();
}

function turnChange(whoseOnFirst, turn) {
  var opposite = "";

  if (whoseOnFirst === "X") {
    opposite = "O";
  } else {
    opposite = "X";
  }

  if (turn % 2 === 0) {
    $("#whoseTurn").text(whoseOnFirst + "'s turn");
  } else {
    $("#whoseTurn").text(opposite + "'s turn");
  }
}

function getWhoseTurn() {
  var str = $("#whoseTurn").text();
  return str.substring(0, 1);
}

function moveSpace(space, whoseOnFirst, turn) {
  var opposite = "";
  var str = "#text" + space;
  console.log(space + " space");
  if (whoseOnFirst === "X") {
    opposite = "O";
  } else {
    opposite = "X";
  }

  if (turn % 2 === 0) {
    $(str).text(whoseOnFirst);
  } else {
    $(str).text(opposite);
  }
}

function getBoard() {
  var arr = [
    $("#text0").text(),
    $("#text1").text(),
    $("#text2").text(),
    $("#text3").text(),
    $("#text4").text(),
    $("#text5").text(),
    $("#text6").text(),
    $("#text7").text(),
    $("#text8").text()
  ];
  var arr2 = [];

  for (i = 0; i < arr.length; i++) {
    if (arr[i] === "X" || arr[i] === "O") {
      arr2.push(false);
    } else {
      arr2.push(true);
    }
  }

  var multiArr = [arr, arr2];

  return multiArr;
}

function generateRandomNumber(max) {
  return Math.floor(Math.random() * (max - 0) + 0);
}

/* Game Logic take a look at my break down on my blog */

function gameLogic(turn, playerPiece) {
  var opposite = "";
  var rn;
  var searching = true;
  console.log(turn + " turn");
  if (playerPiece === "X") {
    opposite = "O";
  } else {
    opposite = "X";
  }

  var boardArr = getBoard();
  var blockArr = checkBlock(playerPiece);
  var scoreArr = checkWin(opposite);

  switch (turn) {
    case 2:
      rn = generateRandomNumber(3);

      if (rn === 0) {
        return "4";
      } else if (rn === 1) {
        rn = generateRandomNumber(4);

        if (rn === 0) {
          return "0";
        } else if (rn === 1) {
          return "2";
        } else if (rn === 2) {
          return "6";
        } else {
          return "8";
        }
      } else {
        rn = generateRandomNumber(4);

        if (rn === 0) {
          return "1";
        } else if (rn === 1) {
          return "3";
        } else if (rn === 2) {
          return "5";
        } else {
          return "7";
        }
      }

      break;

    case 3:
      if (playerPiece === boardArr[0][4]) {
        rn = generateRandomNumber(4);
        if (rn === 0) {
          return "0";
        } else if (rn === 1) {
          return "2";
        } else if (rn === 2) {
          return "6";
        } else {
          return "8";
        }
      } else if (
        playerPiece === boardArr[0][0] ||
        playerPiece === boardArr[0][2] ||
        playerPiece === boardArr[0][6] ||
        playerPiece === boardArr[0][8]
      ) {
        return "4";
      } else {
        if (playerPiece === boardArr[0][1]) {
          rn = generateRandomNumber(2);
          if (rn === 0) {
            return "0";
          } else {
            return "2";
          }
        } else if (playerPiece === boardArr[0][3]) {
          rn = generateRandomNumber(2);
          if (rn === 0) {
            return "0";
          } else {
            return "6";
          }
        } else if (playerPiece === boardArr[0][5]) {
          rn = generateRandomNumber(2);
          if (rn === 0) {
            return "2";
          } else {
            return "8";
          }
        } else if (playerPiece === boardArr[0][7]) {
          rn = generateRandomNumber(2);
          if (rn === 0) {
            return "6";
          } else {
            return "8";
          }
        }
      }
      break;

    case 4:
      if (boardArr[0][4] === opposite) {
        if (boardArr[0][0] === playerPiece) {
          return "8";
        } else if (boardArr[0][1] === playerPiece) {
          rn = generateRandomNumber(2);

          if (rn === 0) {
            return "0";
          } else {
            return "2";
          }
        } else if (boardArr[0][2] === playerPiece) {
          return "6";
        } else if (boardArr[0][3] === playerPiece) {
          rn = generateRandomNumber(2);

          if (rn === 0) {
            return "0";
          } else {
            return "6";
          }
        } else if (boardArr[0][5] === playerPiece) {
          rn = generateRandomNumber(2);

          if (rn === 0) {
            return "2";
          } else {
            return "8";
          }
        } else if (boardArr[0][6] === playerPiece) {
          return "2";
        } else if (boardArr[0][7] === playerPiece) {
          rn = generateRandomNumber(2);

          if (rn === 0) {
            return "6";
          } else {
            return "8";
          }
        } else if (boardArr[0][8] === playerPiece) {
          return "0";
        }
      } else if (boardArr[0][4] === playerPiece) {
        if (boardArr[0][0] === opposite) {
          return "8";
        } else if (boardArr[0][1] === opposite || boardArr[0][7] === opposite) {
          rn = generateRandomNumber(2);

          if (rn === 0) {
            return "3";
          } else {
            return "5";
          }
        } else if (boardArr[0][2] === opposite) {
          return "6";
        } else if (boardArr[0][3] === opposite || boardArr[0][5] === opposite) {
          rn = generateRandomNumber(2);

          if (rn === 0) {
            return "1";
          } else {
            return "7";
          }
        } else if (boardArr[0][6] === opposite) {
          return "2";
        } else if (boardArr[0][8] === opposite) {
          return "0";
        }
      } else {
        if (boardArr[0][1] === opposite) {
          if (
            boardArr[0][3] === playerPiece ||
            boardArr[0][6] === playerPiece
          ) {
            return "0";
          } else if (
            boardArr[0][5] === playerPiece ||
            boardArr[0][8] === playerPiece
          ) {
            return "2";
          } else if (boardArr[0][7] === playerPiece) {
            rn = generateRandomNumber(2);
            if (rn === 0) {
              return "6";
            } else {
              return "8";
            }
          } else if (boardArr[0][0] === playerPiece) {
            return "6";
          } else if (boardArr[0][2] === playerPiece) {
            return "8";
          }
        } else if (boardArr[0][3] === opposite) {
          if (
            boardArr[0][1] === playerPiece ||
            boardArr[0][2] === playerPiece
          ) {
            return "0";
          } else if (
            boardArr[0][7] === playerPiece ||
            boardArr[0][8] === playerPiece
          ) {
            return "6";
          } else if (boardArr[0][5] === playerPiece) {
            rn = generateRandomNumber(2);

            if (rn === 0) {
              return "2";
            } else {
              return "8";
            }
          } else if (boardArr[0][0] === playerPiece) {
            return "2";
          } else if (boardArr[0][6] === playerPiece) {
            return "8";
          }
        } else if (boardArr[0][5] === opposite) {
          if (
            boardArr[0][0] === playerPiece ||
            boardArr[0][1] === playerPiece
          ) {
            return "2";
          } else if (
            boardArr[0][6] === playerPiece ||
            boardArr[0][7] === playerPiece
          ) {
            return "8";
          } else if (boardArr[0][3] === playerPiece) {
            rn = generateRandomNumber(2);

            if (rn === 0) {
              return "0";
            } else {
              return "6";
            }
          } else if (boardArr[0][2] === playerPiece) {
            return "6";
          } else if (boardArr[0][8] === playerPiece) {
            return "6";
          }
        } else if (boardArr[0][7] === opposite) {
          if (
            boardArr[0][0] === playerPiece ||
            boardArr[0][3] === playerPiece
          ) {
            return "6";
          } else if (
            boardArr[0][5] === playerPiece ||
            boardArr[0][8] === playerPiece
          ) {
            return "8";
          } else if (boardArr[0][1] === playerPiece) {
            rn = generateRandomNumber(2);

            if (rn === 0) {
              return "0";
            } else {
              return "2";
            }
          } else if (boardArr[0][6] === playerPiece) {
            return "0";
          } else if (boardArr[0][8] === playerPiece) {
            return "2";
          }
        } else {
          return "4";
        }
      }

      break;

    case 5:
      if (blockArr[0]) {
        return blockArr[1];
      } else if (boardArr[0][4] === opposite) {
        if (
          (boardArr[0][0] === playerPiece && boardArr[0][8] === playerPiece) ||
          (boardArr[0][2] === playerPiece && boardArr[0][6] == playerPiece)
        ) {
          rn = generateRandomNumber(4);

          if (rn === 0) {
            return "1";
          } else if (rn === 1) {
            return "3";
          } else if (rn === 2) {
            return "5";
          } else {
            return "7";
          }
        } else if (boardArr[0][0] === playerPiece) {
          if (boardArr[0][5] === playerPiece) {
            return "2";
          } else if (boardArr[0][7] === playerPiece) {
            return "6";
          }
        } else if (boardArr[0][2] === playerPiece) {
          if (boardArr[0][3] === playerPiece) {
            return "0";
          } else if (boardArr[0][7] === playerPiece) {
            return "8";
          }
        } else if (boardArr[0][6] === playerPiece) {
          if (boardArr[0][1] === playerPiece) {
            return "8";
          } else if (boardArr[0][5] === playerPiece) {
            return "2";
          }
        } else if (boardArr[0][8] === playerPiece) {
          if (baordArr[0][1] === playerPiece) {
            return "2";
          } else if (boardArr[0][3] === playerPiece) {
            return "6";
          }
        }
      } else if (boardArr[0][4] === playerPiece) {
        if (boardArr[0][0] === opposite || boardArr[0][8] === opposite) {
          rn = generateRandomNumber(2);

          if (rn === 0) {
            return "2";
          } else {
            return "6";
          }
        } else if (boardArr[0][2] === opposite || boardArr[0][6] === opposite) {
          rn = generateRandomNumber(2);

          if (rn === 0) {
            return "0";
          } else {
            return "8";
          }
        }
      } else {
        if (boardArr[0][0] === opposite && boardArr[0][1] === playerPiece) {
          if (boardArr[0][2] === playerPiece) {
            return "3";
          } else if (boardArr[0][5] === playerPiece) {
            return "6";
          } else {
            return "4";
          }
        } else if (
          boardArr[0][2] === opposite &&
          boardArr[0][1] === playerPiece
        ) {
          if (boardArr[0][0] === playerPiece) {
            return "5";
          } else if (boardArr[0][3] === playerPiece) {
            return "8";
          } else {
            return "4";
          }
        } else if (
          boardArr[0][0] === opposite &&
          boardArr[0][3] === playerPiece
        ) {
          if (boardArr[0][6] === playerPiece) {
            return "1";
          } else if (boardArr[0][7] === playerPiece) {
            return "2";
          } else {
            return "4";
          }
        } else if (
          boardArr[0][6] === opposite &&
          boardArr[0][3] === playerPiece
        ) {
          if (boardArr[0][0] === playerPiece) {
            return "7";
          } else if (boardArr[0][1] === playerPiece) {
            return "8";
          } else {
            return "4";
          }
        } else if (
          boardArr[0][6] === opposite &&
          boardArr[0][7] === playerPiece
        ) {
          if (boardArr[0][8] === playerPiece) {
            return "3";
          } else if (boardArr[0][5] === playerPiece) {
            return "0";
          } else {
            return "4";
          }
        } else if (
          boardArr[0][8] === opposite &&
          boardArr[0][7] === playerPiece
        ) {
          if (boardArr[0][3] === playerPiece) {
            return "2";
          } else if (boardArr[0][6] === playerPiece) {
            return "5";
          } else {
            return "4";
          }
        } else if (
          boardArr[0][8] === opposite &&
          boardArr[0][5] === playerPiece
        ) {
          if (boardArr[0][2] === playerPiece) {
            return "7";
          } else if (boardArr[0][1] === playerPiece) {
            return "6";
          } else {
            return "4";
          }
        } else if (
          boardArr[0][2] === opposite &&
          boardArr[0][5] === playerPiece
        ) {
          if (boardArr[0][8] === playerPiece) {
            return "1";
          } else if (boardArr[0][7] === playerPiece) {
            return "0";
          } else {
            return "4";
          }
        }
      }

      break;

    case 6:
      if (scoreArr[0]) {
        return scoreArr[1];
      } else if (blockArr[0]) {
        return blockArr[1];
      } else if (boardArr[0][4] === opposite) {
        if (boardArr[0][0] === playerPiece) {
          if (boardArr[0][7] === playerPiece) {
            return "2";
          } else if (boardArr[0][5] === playerPiece) {
            return "6";
          }
        } else if (boardArr[0][1] === playerPiece) {
          if (boardArr[0][6] === playerPiece) {
            return "8";
          } else if (boardArr[0][8] === playerPiece) {
            return "6";
          }
        } else if (boardArr[0][2] === playerPiece) {
          if (boardArr[0][3] === playerPiece) {
            return "8";
          } else if (boardArr[0][7] === playerPiece) {
            return "0";
          }
        } else if (boardArr[0][3] === playerPiece) {
          if (boardArr[0][8] === playerPiece) {
            return "2";
          } else if (boardArr[0][2] === playerPiece) {
            return "8";
          }
        } else if (boardArr[0][5] === playerPiece) {
          if (boardArr[0][6] === playerPiece) {
            return "8";
          } else if (boardArr[0][0] === playerPiece) {
            return "6";
          }
        } else if (boardArr[0][6] === playerPiece) {
          if (boardArr[0][1] === playerPiece) {
            return "8";
          } else if (boardArr[0][5] === playerPiece) {
            return "0";
          }
        } else if (boardArr[0][7] === playerPiece) {
          if (boardArr[0][2] === playerPiece) {
            return "0";
          } else if (boardArr[0][0] === playerPiece) {
            return "2";
          }
        } else if (boardArr[0][8] === playerPiece) {
          if (boardArr[0][1] === playerPiece) {
            return "6";
          } else if (boardArr[0][3] === playerPiece) {
            return "2";
          }
        }
      } else if (boardArr[0][4] === playerPiece) {
        if (boardArr[0][1] === opposite) {
          if (boardArr[0][3] === opposite) {
            return "0";
          } else if (boardArr[0][5] === opposite) {
            return "2";
          } else if (boardArr[0][6] === opposite) {
            return "0";
          } else if (boardArr[0][8] === opposite) {
            return "2";
          }
        } else if (boardArr[0][7] === opposite) {
          if (boardArr[0][3] === opposite) {
            return "6";
          } else if (boardArr[0][5] === opposite) {
            return "8";
          } else if (boardArr[0][0] === opposite) {
            return "6";
          } else if (boardArr[0][2] === opposite) {
            return "8";
          }
        } else if (boardArr[0][3] === opposite) {
          if (boardArr[0][2] === opposite) {
            return "0";
          } else if (boardArr[0][8] === opposite) {
            return "6";
          }
        } else if (boardArr[0][5] === opposite) {
          if (boardArr[0][0] === opposite) {
            return "2";
          } else if (boardArr[0][6] === opposite) {
            return "8";
          }
        } else {
          return "4";
        }
      } else {
        return "4";
      }
      break;

    case 7:
      if (scoreArr[0]) {
        return scoreArr[1];
      } else if (blockArr[0]) {
        return blockArr[1];
      } else {
        while (searching) {
          rn = generateRandomNumber(8);
          if (rn === 0 && boardArr[1][0]) {
            searching = false;
            return "0";
          } else if (rn === 1 && boardArr[1][1]) {
            searching = false;
            return "1";
          } else if (rn === 2 && boardArr[1][2]) {
            searching = false;
            return "2";
          } else if (rn === 3 && boardArr[1][3]) {
            searching = false;
            return "3";
          } else if (rn === 4 && boardArr[1][4]) {
            searching = false;
            return "4";
          } else if (rn === 5 && boardArr[1][5]) {
            searching = false;
            return "5";
          } else if (rn === 6 && boardArr[1][6]) {
            searching = false;
            return "6";
          } else if (rn === 7 && boardArr[1][7]) {
            searching = false;
            return "7";
          } else if (boardArr[1][8]) {
            searching = false;
            return "8";
          }
        }
      }

      break;

    case 8:
      if (scoreArr[0]) {
        return scoreArr[1];
      } else if (blockArr[0]) {
        return blockArr[1];
      } else {
        while (searching) {
          rn = generateRandomNumber(8);
          if (rn === 0 && boardArr[1][0]) {
            searching = false;
            return "0";
          } else if (rn === 1 && boardArr[1][1]) {
            searching = false;
            return "1";
          } else if (rn === 2 && boardArr[1][2]) {
            searching = false;
            return "2";
          } else if (rn === 3 && boardArr[1][3]) {
            searching = false;
            return "3";
          } else if (rn === 4 && boardArr[1][4]) {
            searching = false;
            return "4";
          } else if (rn === 5 && boardArr[1][5]) {
            searching = false;
            return "5";
          } else if (rn === 6 && boardArr[1][6]) {
            searching = false;
            return "6";
          } else if (rn === 7 && boardArr[1][7]) {
            searching = false;
            return "7";
          } else if (boardArr[1][8]) {
            searching = false;
            return "8";
          }
        }
      }

      break;

    case 9:
      if (scoreArr[0]) {
        return scoreArr[1];
      } else if (blockArr[0]) {
        return blockArr[1];
      } else {
        while (searching) {
          rn = generateRandomNumber(8);
          if (rn === 0 && boardArr[1][0]) {
            searching = false;
            return "0";
          } else if (rn === 1 && boardArr[1][1]) {
            searching = false;
            return "1";
          } else if (rn === 2 && boardArr[1][2]) {
            searching = false;
            return "2";
          } else if (rn === 3 && boardArr[1][3]) {
            searching = false;
            return "3";
          } else if (rn === 4 && boardArr[1][4]) {
            searching = false;
            return "4";
          } else if (rn === 5 && boardArr[1][5]) {
            searching = false;
            return "5";
          } else if (rn === 6 && boardArr[1][6]) {
            searching = false;
            return "6";
          } else if (rn === 7 && boardArr[1][7]) {
            searching = false;
            return "7";
          } else if (boardArr[1][8]) {
            searching = false;
            return "8";
          }
        }
      }

      break;

    case 10:
      if (scoreArr[0]) {
        return scoreArr[1];
      } else if (blockArr[0]) {
        return blockArr[1];
      } else {
        while (searching) {
          rn = generateRandomNumber(8);
          if (rn === 0 && boardArr[1][0]) {
            searching = false;
            return "0";
          } else if (rn === 1 && boardArr[1][1]) {
            searching = false;
            return "1";
          } else if (rn === 2 && boardArr[1][2]) {
            searching = false;
            return "2";
          } else if (rn === 3 && boardArr[1][3]) {
            searching = false;
            return "3";
          } else if (rn === 4 && boardArr[1][4]) {
            searching = false;
            return "4";
          } else if (rn === 5 && boardArr[1][5]) {
            searching = false;
            return "5";
          } else if (rn === 6 && boardArr[1][6]) {
            searching = false;
            return "6";
          } else if (rn === 7 && boardArr[1][7]) {
            searching = false;
            return "7";
          } else if (boardArr[1][8]) {
            searching = false;
            return "8";
          }
        }
      }

      break;
  }
}

function checkBlock(playerPiece) {
  var arr = getBoard();

  if (arr[0][1] === playerPiece && arr[0][2] === playerPiece && arr[1][0]) {
    return [true, "0"];
  } else if (
    arr[0][4] === playerPiece &&
    arr[0][8] === playerPiece &&
    arr[1][0]
  ) {
    return [true, "0"];
  } else if (
    arr[0][3] === playerPiece &&
    arr[0][6] === playerPiece &&
    arr[1][0]
  ) {
    return [true, "0"];
  } else if (
    arr[0][4] === playerPiece &&
    arr[0][7] === playerPiece &&
    arr[1][1]
  ) {
    return [true, "1"];
  } else if (
    arr[0][0] === playerPiece &&
    arr[0][2] === playerPiece &&
    arr[1][1]
  ) {
    return [true, "1"];
  } else if (
    arr[0][5] === playerPiece &&
    arr[0][8] === playerPiece &&
    arr[1][2]
  ) {
    return [true, "2"];
  } else if (
    arr[0][0] === playerPiece &&
    arr[0][1] === playerPiece &&
    arr[1][2]
  ) {
    return [true, "2"];
  } else if (
    arr[0][6] === playerPiece &&
    arr[0][4] === playerPiece &&
    arr[1][2]
  ) {
    return [true, "2"];
  } else if (
    arr[0][0] === playerPiece &&
    arr[0][6] === playerPiece &&
    arr[1][3]
  ) {
    return [true, "3"];
  } else if (
    arr[0][4] === playerPiece &&
    arr[0][5] === playerPiece &&
    arr[1][3]
  ) {
    return [true, "3"];
  } else if (
    arr[0][0] === playerPiece &&
    arr[0][8] === playerPiece &&
    arr[1][4]
  ) {
    return [true, "4"];
  } else if (
    arr[0][2] === playerPiece &&
    arr[0][6] === playerPiece &&
    arr[1][4]
  ) {
    return [true, "4"];
  } else if (
    arr[0][1] === playerPiece &&
    arr[0][7] === playerPiece &&
    arr[1][4]
  ) {
    return [true, "4"];
  } else if (
    arr[0][2] === playerPiece &&
    arr[0][6] === playerPiece &&
    arr[1][4]
  ) {
    return [true, "4"];
  } else if (
    arr[0][1] === playerPiece &&
    arr[0][7] === playerPiece &&
    arr[1][4]
  ) {
    return [true, "4"];
  } else if (
    arr[0][3] === playerPiece &&
    arr[0][5] === playerPiece &&
    arr[1][4]
  ) {
    return [true, "4"];
  } else if (
    arr[0][2] === playerPiece &&
    arr[0][8] === playerPiece &&
    arr[1][5]
  ) {
    return [true, "5"];
  } else if (
    arr[0][3] === playerPiece &&
    arr[0][4] === playerPiece &&
    arr[1][5]
  ) {
    return [true, "5"];
  } else if (
    arr[0][0] === playerPiece &&
    arr[0][3] === playerPiece &&
    arr[1][6]
  ) {
    return [true, "6"];
  } else if (
    arr[0][2] === playerPiece &&
    arr[0][4] === playerPiece &&
    arr[1][6]
  ) {
    return [true, "6"];
  } else if (
    arr[0][7] === playerPiece &&
    arr[0][8] === playerPiece &&
    arr[1][6]
  ) {
    return [true, "6"];
  } else if (
    arr[0][6] === playerPiece &&
    arr[0][8] === playerPiece &&
    arr[1][7]
  ) {
    return [true, "7"];
  } else if (
    arr[0][1] === playerPiece &&
    arr[0][4] === playerPiece &&
    arr[1][7]
  ) {
    return [true, "7"];
  } else if (
    arr[0][0] === playerPiece &&
    arr[0][4] === playerPiece &&
    arr[1][8]
  ) {
    return [true, "8"];
  } else if (
    arr[0][6] === playerPiece &&
    arr[0][7] === playerPiece &&
    arr[1][8]
  ) {
    return [true, "8"];
  } else if (
    arr[0][2] === playerPiece &&
    arr[0][5] === playerPiece &&
    arr[1][8]
  ) {
    return [true, "8"];
  } else {
    return [false, false];
  }
}

function checkWin(opposite) {
  var arr = getBoard();

  if (arr[0][1] === opposite && arr[0][2] === opposite && arr[1][0]) {
    return [true, "0"];
  } else if (arr[0][4] === opposite && arr[0][8] === opposite && arr[1][0]) {
    return [true, "0"];
  } else if (arr[0][3] === opposite && arr[0][6] === opposite && arr[1][0]) {
    return [true, "0"];
  } else if (arr[0][4] === opposite && arr[0][7] === opposite && arr[1][1]) {
    return [true, "1"];
  } else if (arr[0][0] === opposite && arr[0][2] === opposite && arr[1][1]) {
    return [true, "1"];
  } else if (arr[0][5] === opposite && arr[0][8] === opposite && arr[1][2]) {
    return [true, "2"];
  } else if (arr[0][0] === opposite && arr[0][1] === opposite && arr[1][2]) {
    return [true, "2"];
  } else if (arr[0][6] === opposite && arr[0][4] === opposite && arr[1][2]) {
    return [true, "2"];
  } else if (arr[0][0] === opposite && arr[0][6] === opposite && arr[1][3]) {
    return [true, "3"];
  } else if (arr[0][4] === opposite && arr[0][5] === opposite && arr[1][3]) {
    return [true, "3"];
  } else if (arr[0][0] === opposite && arr[0][8] === opposite && arr[1][4]) {
    return [true, "4"];
  } else if (arr[0][2] === opposite && arr[0][6] === opposite && arr[1][4]) {
    return [true, "4"];
  } else if (arr[0][1] === opposite && arr[0][7] === opposite && arr[1][4]) {
    return [true, "4"];
  } else if (arr[0][2] === opposite && arr[0][6] === opposite && arr[1][4]) {
    return [true, "4"];
  } else if (arr[0][1] === opposite && arr[0][7] === opposite && arr[1][4]) {
    return [true, "4"];
  } else if (arr[0][3] === opposite && arr[0][5] === opposite && arr[1][4]) {
    return [true, "4"];
  } else if (arr[0][2] === opposite && arr[0][8] === opposite && arr[1][5]) {
    return [true, "5"];
  } else if (arr[0][3] === opposite && arr[0][4] === opposite && arr[1][5]) {
    return [true, "5"];
  } else if (arr[0][0] === opposite && arr[0][3] === opposite && arr[1][6]) {
    return [true, "6"];
  } else if (arr[0][2] === opposite && arr[0][4] === opposite && arr[1][6]) {
    return [true, "6"];
  } else if (arr[0][7] === opposite && arr[0][8] === opposite && arr[1][6]) {
    return [true, "6"];
  } else if (arr[0][6] === opposite && arr[0][8] === opposite && arr[1][7]) {
    return [true, "7"];
  } else if (arr[0][1] === opposite && arr[0][4] === opposite && arr[1][7]) {
    return [true, "7"];
  } else if (arr[0][0] === opposite && arr[0][4] === opposite && arr[1][8]) {
    return [true, "8"];
  } else if (arr[0][6] === opposite && arr[0][7] === opposite && arr[1][8]) {
    return [true, "8"];
  } else if (arr[0][2] === opposite && arr[0][5] === opposite && arr[1][8]) {
    return [true, "8"];
  } else {
    return [false, false];
  }
}

function winCheck() {
  var arr = getBoard();
  var win = false;

  if (arr[1][0] === false && arr[1][1] === false && arr[1][2] === false) {
    if (arr[0][0] === "X" && arr[0][1] === "X" && arr[0][2] === "X") {
      win = true;
      return [true, "X"];
    } else if (arr[0][0] === "O" && arr[0][1] === "O" && arr[0][2] === "O") {
      win = true;
      return [true, "O"];
    }
  }

  if (arr[1][0] === false && arr[1][3] === false && arr[1][6] === false) {
    if (arr[0][0] === "X" && arr[0][3] === "X" && arr[0][6] === "X") {
      win = true;
      return [true, "X"];
    } else if (arr[0][0] === "O" && arr[0][3] === "O" && arr[0][6] === "O") {
      win = true;
      return [true, "O"];
    }
  }

  if (arr[1][0] === false && arr[1][4] === false && arr[1][8] === false) {
    if (arr[0][0] === "X" && arr[0][4] === "X" && arr[0][8] === "X") {
      win = true;
      return [true, "X"];
    } else if (arr[0][0] === "O" && arr[0][4] === "O" && arr[0][8] === "O") {
      win = true;
      return [true, "O"];
    }
  }
  if (arr[1][1] === false && arr[1][4] === false && arr[1][7] === false) {
    if (arr[0][1] === "X" && arr[0][4] === "X" && arr[0][7] === "X") {
      win = true;
      return [true, "X"];
    } else if (arr[0][1] === "O" && arr[0][4] === "O" && arr[0][7] === "O") {
      win = true;
      return [true, "O"];
    }
  }
  if (arr[1][2] === false && arr[1][5] === false && arr[1][8] === false) {
    if (arr[0][2] === "X" && arr[0][5] === "X" && arr[0][8] === "X") {
      win = true;
      return [true, "X"];
    } else if (arr[0][2] === "O" && arr[0][5] === "O" && arr[0][8] === "O") {
      win = true;
      return [true, "O"];
    }
  }

  if (arr[1][2] === false && arr[1][4] === false && arr[1][6] === false) {
    if (arr[0][2] === "X" && arr[0][4] === "X" && arr[0][6] === "X") {
      win = true;
      return [true, "X"];
    } else if (arr[0][2] === "O" && arr[0][4] === "O" && arr[0][6] === "O") {
      win = true;
      return [true, "O"];
    }
  }

  if (arr[1][3] === false && arr[1][4] === false && arr[1][5] === false) {
    if (arr[0][3] === "X" && arr[0][4] === "X" && arr[0][5] === "X") {
      win = true;
      return [true, "X"];
    } else if (arr[0][3] === "O" && arr[0][4] === "O" && arr[0][5] === "O") {
      win = true;
      return [true, "O"];
    }
  }

  if (arr[1][6] === false && arr[1][7] === false && arr[1][8] === false) {
    if (arr[0][6] === "X" && arr[0][7] === "X" && arr[0][8] === "X") {
      win = true;
      return [true, "X"];
    } else if (arr[0][6] === "O" && arr[0][7] === "O" && arr[0][8] === "O") {
      win = true;
      return [true, "O"];
    }
  }

  if (win !== true) {
    return [false, false];
  }
}

Comments