VvVyPR

index.html

<div id='title'><h1>Tic-Tac-Toe</h1></div>
<div id='you-win' class='end-game animated'><h4>You Win!</h4></div>
<div id='you-lose' class='end-game animated'><h4>You Lose!</h4></div>
<div id='cats-game' class='end-game animated'><h4>Cat's Game!</h4></div>
<div id='board-holder' class=''>
  
  <div id='space1' class='game-space'><p id='00' class='game-space-p'></p></div>
  <div id='space2' class='game-space'><p id='01' class='game-space-p'></p></div>
  <div id='space3' class='game-space'><p id='02' class='game-space-p'></p></div><br>
  <div id='space4' class='game-space'><p id='10' class='game-space-p'></p></div>
  <div id='space5' class='game-space'><p id='11' class='game-space-p'></p></div>
  <div id='space6' class='game-space'><p id='12' class='game-space-p'></p></div><br>
  <div id='space7' class='game-space'><p id='20' class='game-space-p'></p></div>
  <div id='space8' class='game-space'><p id='21' class='game-space-p'></p></div>
  <div id='space9' class='game-space'><p id='22' class='game-space-p'></p></div>
  <div id='X-or-O'><h4>Choose your weapon: </h4>
  <button id='Xs' class='XO'>X</button> 
  <button id='Os' class='XO'>O</button>
</div>
<div id='first-or-second'><h4>Go First or Second?</h4>
  <button id='1st' class='1st2nd'>1st</button> 
  <button id='2nd' class='1st2nd'>2nd</button>
</div>  
</div>

script.js

//variables 

var playerChoice, compChoice, playerOrder, compOrder, playerTurn;
var playerMoves = [];
var compMoves = [];
//winning combinations to detect win conditions later
var endingCombos = [[1,2,3],[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9], [1,5,9], [3,5,7]]

$(document).ready(function(){   
  preGame();    
//get player preference for X or O and first or second, reset everything on pregame
  function preGame(){
    playerTurn = false;
    $('.game-space-p').delay(1000).fadeOut(400, function(){
       $('.game-space-p').empty().show();
     });
    playerMoves = [];
    compMoves = []; 
    playerChoice = '';
    compChoice = '';
    playerOrder = '';
    compOrder = '';   

    $('#X-or-O').fadeIn(800);  
    //Establishing player as X or O
    $('.XO').unbind('click').click(function(){      
    playerChoice = this.innerHTML;
      if (playerChoice == 'X') {
        compChoice = 'O'  
      }
      else {
        compChoice = 'X';
      }      
      $('#X-or-O').fadeOut(400);
      $('#first-or-second').delay(400).fadeIn(1000)
  })
 $('.1st2nd').unbind('click').click(function(){
   //establishing turn order  
   playerOrder = this.innerHTML;
   if (playerOrder == '1st') {
     compOrder = '2nd'
     playerTurn = true;   
   }
   else {
     compOrder = '1st'
     playerTurn = false;     
     compTurn();
   }
   $('#first-or-second').fadeOut(400);
 })
  }
  
  $('.game-space').mousedown(function(){     
    if (playerTurn && $('p', this).text() === '') {     
      $('p', this).text(playerChoice);    
      playerTurn = false;
      playerMoves.push(parseInt(this.getAttribute('id').slice(-1)));
      //keep track of where player moves for scoring later
      if (winner(playerMoves)) {
        $('#you-win').fadeIn(800)
        $('#you-win').delay(1500).fadeOut(800);
        preGame();
      }
      else if (checkCatsGame()) {
        $('#cats-game').fadeIn(800);
        $('#cats-game').delay(1500).fadeOut(800);
        preGame();
      }
      else {
        setInterval(compTurn(), 1000);
        if (winner(compMoves)) {
          $('#you-lose').fadeIn(800);
          $('#you-lose').delay(1500).fadeOut(800);
          preGame();
        } 
        else if (checkCatsGame()) {
          $('#cats-game').fadeIn(800);
          $('#cats-game').delay(1500).fadeOut(800);
          preGame();
        }
      }
    }        
  });  
    
function compTurn(){
  spaceNum = Math.floor(Math.random() * (9 - 1 + 1)) + 1; 
  var compSpace = '#space' + spaceNum;
  if ($(compSpace).text() === '') {
    $(compSpace).find('p').html(compChoice);    
    compMoves.push(spaceNum);
    playerTurn = true;
    //keep track of where comp moves
  }
  else {
    //re-run to find an empty space if necessary
    compTurn()
  }
};
    
  //some help from @SaintPeter here
  function winner(arr){
    for (var i=0; i<endingCombos.length; i++) {      
        // check to see if this combo exists in the user array
        result = endingCombos[i].every(function(move) {
                return arr.indexOf(move) !== -1;
      });
      // if we win, return true
      if(result) {
        return true;
      }
    }
  // no wins is false
    return false;
  }
  
  function checkCatsGame(){     
    var catsGame = true;  
    $('p').each(function(){
      if ($(this).text() === '') {
        catsGame = false
      }      
    })
    return catsGame
}
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background-color: #D3FAD6;
  font-family: 'Slabo 27px', serif;
}

#title h1 {
  text-align: center;
  font-size: 5em;
  color: #C3C48D;
  text-shadow: 2px 2px 5px black;
}

#board-holder {
  width: 350px;
  height: 350px;
  margin: 0 auto;
  padding-top: 30px;
  text-align: center;
  border-radius: 4px;

}

.game-space {
  height: 100px;
  width: 100px;
  background-color: #C3C48D;
  display: inline-block;
  color: #928C6F;
  position: relative;
  vertical-align: top;
  box-shadow: inset 0px 0px 8px 4px #928C6F;
  transition: all .25s ease;
  border-radius: 6px;
  cursor: pointer;
}

.game-space:hover {
  box-shadow: inset 0px 0px 8px 4px #EDEBA0;
}

#space1 {
  border-bottom: 3px solid #D3FAD6;
}
#space2 {
 border-bottom: 3px solid #D3FAD6;
}
#space3 {
border-bottom: 3px solid #D3FAD6;
}
#space4 {
 border-bottom: 3px solid #D3FAD6;
}
#space5 {
  border-bottom: 3px solid #D3FAD6;
}
#space6 {
 border-bottom: 3px solid #D3FAD6;
}

.game-space-p {
  position: relative;
  top: 15px;
  left: 2px;
  font-size: 50px;
  text-shadow: 0px 4px 2px #D3FAD6;
}

#X-or-O, #first-or-second {
  margin: 25px auto;
  width: 250px;
  height: 85px;
  background-color: #D0FFCE;
  border: 1px solid #CBEFB6;
  border-radius: 75px;
  text-align: center;
  color: black;
  box-shadow: inset 0px 0px 4px black;
  position: absolute;
  left: 0;
  right: 0;
  display: none;
  
}

button {
  height: 35px;
  width: 50px;
  font-size: 20px;
  color: #928C6F;
  background-color: #C3C48D;
  border: none;
  border-radius: 100px; 
  outline: none;
  transition: all .25s ease;
}


button:hover {
  background-color: #273B09;
  color: #B9FFB7;
  
}

.end-game {
  margin: 25px auto;
  width: 250px;
  height: 85px;
  background-color: #273B09;
  border: 1px solid #CBEFB6;
  border-radius: 75px;
  text-align: center;
  color: #B9FFB7;
  box-shadow: inset 0px 0px 4px black;
  position: absolute;
  left: 0;
  right: 0;
  top: 218px;
  z-index: 1;
  display: none;
}

.end-game h4 {
  font-size: 2em;
  padding-top: 15px
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />

VvVyPR.markdown

VvVyPR

A Pen by Tim Bell on CodePen.

License.