Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <link href="https://fonts.googleapis.com/css?family=Bungee|Rajdhani:300,400|Sunshiney" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
  <body>
    <div id="wrapper">
      <div id="app">
        <div id="header"> 
          <img src="https://raw.githubusercontent.com/Feldbot/Free-Code-Camp-Projects/master/Project-9-Build-A-Tic-Tac-Toe-Game/images/title.png" id="title" />
          <button id="reset">Reset</button>
        </div>
        <div id="boardArea">
          <div class="gameSetup"></div>
          <div id="board"></div>
        </div>
        <div id="stats"></div>
        <footer>
          <a id="footer" href="https://www.linkedin.com/in/feldbot/">code and design by feldbot</a>
        </footer>
      </div>
    </div>
  </body>
</html>
              
            
!

CSS

              
                /* General */
html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  /* overflow: hidden; */
  background: url("https://raw.githubusercontent.com/Feldbot/Free-Code-Camp-Projects/master/Project-9-Build-A-Tic-Tac-Toe-Game/images/blue-background.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#wrapper {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
button {
  border: 0;
}
#app {
  height: 575px;
  background-color: rgb(142, 197, 63);
  border-radius: 10px 0px 10px 10px;
  box-shadow: 7px 13px 50px 7px #202b4e;
  padding-top: 10px;
}

/* Header */
#header {
  width: 369px;
  height: 90px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#reset {
  grid-area: reset;
  width: 75px;
  height: 25px;
  position: absolute;
  top: -25px;
  right: 0;
  color: white;
  background-color: rgb(142, 197, 63);
  border-radius: 6px 6px 0px 0px;
  font-family: "Bungee";
  font-size: .8em;
  letter-spacing: .172em;
  text-shadow: 1px 1px 2px #777777;
}
#reset:hover {
  cursor: pointer;
  color: rgb(249, 236, 49);
  text-shadow: 1px 1px 2px #777777;
}
h1 { /* Title */
  font-family: "Bungee Shade";
  font-size: 2.4em;
}
#title {
  width: 300px;
  padding-top: 20px;
  margin: 0 auto;
}

/* Board area */
#boardArea {
  display: relative;
  background-color: white;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border-radius: 10px;
  position: relative;
  box-shadow: inset 5px 5px 22px 2px #555;
}

/* Game setup */
div.gameSetup {
  text-align: center;
  width: 300px;
  padding-top: 25px;
}
h2 { /* Setup dialog */
  font-family: Rajdhani;
  font-size: 1.3em;
  font-weight: 400;
}
button.setup {
  cursor: pointer;
  width: 100px;
  height: 40px;
  margin: 0px 10px 0px 10px;
  background-color: rgb(155, 222, 200);
  border-radius: 10px;
  font-family: "Bungee";
  font-size: 1.2em;
  color: white;
  text-shadow: 1px 1px 2px #777777;
  box-shadow: 5px 5px 12px #AAAAAA;
}
button.setup:hover {
  background-color: rgb(146, 199, 184);
  color: rgb(249, 236, 49);
}
button.difficulty {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
}

/* Board */
#board {
  position: absolute;
  left: 30px;
  top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 75px);
  grid-template-rows: repeat(3, 75px);
  grid-template-areas:
  "zero   one    two"
  "three  four   five"
  "six    seven  eight";
  grid-gap: .72em;
}
button.squares {
  display: inline-block;
  width: 70px;
  height: 70px;
  font-family: "Sunshiney";
  font-size: 3em;
  background-color: rgb(155,222,200);
  color: rgb(83,134,109);
  cursor: pointer;
  box-shadow: 5px 5px 12px #AAAAAA;
}
button[id="0"] {
  grid-area: zero;
}
button[id="1"] {
  grid-area: one;
}
button[id="2"]{
  grid-area: two;
}
button[id="3"] {
  grid-area: three;
}
button[id="4"] {
  grid-area: four;
}
button[id="5"] {
  grid-area: five;
}
button[id="6"] {
  grid-area: six;
}
button[id="7"] {
  grid-area: seven;
}
button[id="8"] {
  grid-area: eight;
}

/* Stats */
#stats {
  margin: 0 auto;
  margin-top: 30px;
  width: 300px;
  height: 100px;
  border-radius: 10px;
  background-color: rgb(84,163,141);
  box-shadow: inset 5px 5px 22px 2px rgb(44,85,74);
}
#players {
  display: inline-block;
  width: 150px;
  line-height: .5em;
  position: relative;
  top: -2px;
  left: 20px;
}
#score {
  display: inline-block;
  width: 40px;
  text-align: center;
  line-height: .5em;
  position: relative;
  top: -2px;
  left: 18px;
}
#smallStats {
  display: inline-block;
  width: 75px;
  position: relative;
  top: -3px;
  left: 21px;
  line-height: .3em;
}
h3, h4, span, span.score {
  font-family: Bungee;
  color: white;
  text-shadow: 1px 1px 2px #555555;
  letter-spacing: .025em;
}
h4, h4.smallStats { /* wins/draws/games */
  font-family: Rajdhani;
  font-size: 1em;
}
h4#gamesTied {
  position: relative;
  left: 4px;
}
.currentPlayer {
  color: rgb(249,236,49);
}

/* Footer */
footer {
  padding: 25px;
}
a#footer {
  display: block;
  text-align: center;
  font-family: Rajdhani;
  font-weight: 300;
  font-size: .8em;
  text-decoration: none;
  color: white;
}
a#footer:hover {
  color: rgb(249,236,49);
}


/* Media Queries */
@media screen and (max-width: 480px) {
  #app {
    height: 475px;
    box-shadow: 5px 7px 30px 5px #202b4e;
  }

  /* Header */
  #header {
    width: 300px;
    height: 65px;
  }
  #title {
    width: 270px;
    padding-top: 10px;
    margin: 0 auto;
  }
  #reset {
    height: 20px;
    top: -20px;
    font-size: .7em;
  }
  #reset:hover {
    cursor: pointer;
    color: rgb(249, 236, 49);
    text-shadow: 1px 1px 2px #777777;
  }
  h1 {
    font-family: "Bungee Shade";
    font-size: 2em;
  }

  /* Board area */
  #boardArea {
    width: 270px;
    height: 270px;
  }
  div.gameSetup {
    width: 270px;
    padding-top: 15px;
  }
  h2 {
    font-size: 1.2em;
  }
  button.setup {
    width: 90px;
    height: 40px;
  }

  /* Board */
  #board {
    left: 20px;
    top: 20px;
    grid-template-columns: repeat(3, 70px);
    grid-template-rows: repeat(3, 70px);
  }
  button.squares {
    width: 65px;
    height: 65px;
  }

  /* Stats Area */
  #stats {
    margin: 0 auto;
    margin-top: 25px;
    width: 270px;
    height: 100px;
  }
  #players {
    width: 145px;
    line-height: .5em;
    top: -3px;
    left: 12px;
  }
  #score {
    width: 40px;
    text-align: center;
    line-height: .6em;
    top: -3px;
    left: 8px;
  }
  #smallStats {
    width: 70px;
    top: -3px;
    left: 6px;
    line-height: .4em;
  }
  footer {
    height: 25px;
    margin-top: 25px;
    padding: 25px;
  }
}
              
            
!

JS

              
                
// Holds Tic Tac Toe game state
var ttt = {
  level: '',
  board: [null, null, null, null, null, null, null, null, null],
  boardString: function stringifyBoard() {
    return JSON.stringify(this.board);
  },
  openPositions: [],
  players: '',
  player1_symbol: '',
  player2_symbol: '',
  computer_symbol: '',
  player1_turn: false,
  moveCount: 0,
  lastMove: '',
  draw: false,
  winner: '',
  winningPositions: [],
  player1_score: 0,
  player2_score: 0,
  computer_score: 0,
  gamesPlayed: 0,
  gamesTied: 0,
};

// Winning line combinations
var winLines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], // horiz. ['X', 'X', 'X']
                 [0, 3, 6], [1, 4, 7], [2, 5, 8], // vert.
                 [0, 4, 8], [2, 4, 6] ];          // diag.

var timeoutID1, // Slows taketurn() computer move
    timeoutID2, // Delays game results to show final moves
    timeoutID3, // Slows displayGameResults() message
    timeoutID4; // Slows takeTurn() message

// Initial game setup options
function setGameOptions() {

  // Clear board and stats
  $("div#board").hide();
  $("div#stats").html('');

  // One or two player buttons
  $("div.gameSetup").html(`
      <h2>One or Two players?</h2>
      <button id="onePlayer" class="setup">1</button>
      <button id="twoPlayer" class="setup">2</button>
    `).fadeIn(1000);

  // One player game setup options
  $("button#onePlayer").on("click", function() {
    ttt.players = 1;
    selectLevel();
  });

  // Two player game setup options
  $("button#twoPlayer").on("click", function() {
    ttt.players = 2;
    chooseXO();
  } );

  // Transition between screens; fn callbacks are executed after timer runs
  function changeScreen(html, fn) {
    $("div.gameSetup").fadeOut(500, function() {
      $("div.gameSetup").html(html).fadeIn(500);
      fn();
    });
  }

  // Select level of play
  function selectLevel() {
    var html;

    html = `
      <h2>Select a level of difficulty:</h2>
      <button class="setup difficulty" id="easy">Easy</button>
      <button class="setup difficulty" id="hard">Hard</button>
      <button class="setup difficulty" id="pro">Pro</button>
    `;

    changeScreen(html, assignLevel);
  }

  // Register clicks and assign options
  function assignLevel() {
    $("button.difficulty").on("click", function() {
      ttt.level = ($(this)[0].id);
      chooseXO();
    });
  }

  // Choose a symbol
  function chooseXO() {
    var html;

    if (ttt.players === 1) {
      html = `
      <h2>Would you like to be X or O?<br>
        <em>X goes first.</em>
      </h2>
      <button class="setup symbol">X</button>
      <button class="setup symbol">O</button>
      `;
    } else {
      html = `
      <h2><strong>Player 1&mdash;</strong><br> Would you like to be X or O?<br>
        <em>X goes first.</em></h2>
      <button class="setup symbol">X</button>
      <button class="setup symbol">O</button>
      `;
    }

    changeScreen(html, assignXO);
  }

  function assignXO() {
    $("button.symbol").on("click", function () {
      ttt.player1_symbol = ($(this)[0].innerHTML);
      if ($(this)[0].innerText === 'X') {
        ttt.player1_turn = true;
        ttt.computer_symbol = 'O';
        ttt.player2_symbol = 'O';
      } else {
        ttt.computer_symbol = 'X';
        ttt.player2_symbol = 'X';
      };

      renderGameUI();
    });
  };

  // Display stats header and board
  function renderGameUI() {
    $("div.gameSetup").fadeOut(1000, function() {
      $("div#board").show().html(`
        <button id="0" class="squares"></button>
        <button id="1" class="squares"></button>
        <button id="2" class="squares"></button>
        <button id="3" class="squares"></button>
        <button id="4" class="squares"></button>
        <button id="5" class="squares"></button>
        <button id="6" class="squares"></button>
        <button id="7" class="squares"></button>
        <button id="8" class="squares"></button>
      `);

    $("div.gameSetup").html('');

      // Setup header
      if (ttt.players === 1) {
        $("div#stats").html(`
          <div id="players">
            <h3 id="player1">${ttt.player1_symbol} - Player 1 </h3>
            <h3 id="computer">${ttt.computer_symbol} - Computer </h3>
          </div>
          <div id="score">
            <h4>Wins:</h4>
            <h3><span id="player1_score" class="score">0</span></h3>
            <h3><span id="computer_score" class="score">0</span></h3>
          </div>
          <div id="smallStats">
            <h4 id="gamesTied"> Draws: 0<h4>
            <h4 id="gamesPlayed">Games: 0</h4>
          </div>`);
      } else {
        $("div#stats").html(`
          <div id="players">
            <h3 id="player1">${ttt.player1_symbol} - Player 1 </h3>
            <h3 id="player2">${ttt.player2_symbol} - Player 2 </h3>
          </div>
          <div id="score">
            <h4>Wins:</h4>
            <h3><span id="player1_score" class="score">0</span></h3>
            <h3><span id="player2_score" class="score">0</span></h3>
          </div>
          <div id="smallStats">
            <h4 id="gamesTied">Draws: 0<h4>
            <h4 id="gamesPlayed">Games: 0</h4>
          </div>`);
      }

    takeTurn();
    });
  }
};

setGameOptions();

function takeTurn() {
  var probability, positionPlayed, winLinesMatch, matchingIndex;

  highlightCurrentPlayer();

  // Player 1 or 2 turn (multiplayer mode)
  if (ttt.player1_turn  || !ttt.player1_turn && ttt.players === 2) {

    // Apply hover only on playable positions on player's turn
    $("button.squares").on("mouseover", function(e) {
      if (e.target.innerText === '' && ttt.player1_turn || ttt.player2_turn) {
        $(this).css({ "background-color": "rgb(146,199,184)" });
      } else { $(this).css({ "background-color": "rgb(155,222,200)" }) }
    });

    $("button.squares").on("mouseout", function(e) {
      if (e.target.innerText === '') {
        $(this).css({ "background-color": "rgb(155,222,200)" });
      }
    });

    // Register player move
    $("button.squares").on("click", function(e) {
      if (e.target.innerText === '') {

        $(this).css({ "background-color": "rgb(155,222,200)" });

        // Capture board position value
        positionPlayed = Number(e.target.id);
        ttt.lastMove = positionPlayed;

        // Capture only one click per turn
        $("button.squares").off("click");

        // Assign symbol onto ttt.board array
        if (ttt.player1_turn) {
          ttt.board[positionPlayed] = ttt.player1_symbol; }
        else {
          ttt.board[positionPlayed] = ttt.player2_symbol;
        }

        // Iterate winLines arrays and replace matched indices w/ player 1 symbol
        winLines.forEach(function(el) {
          winLinesMatch = el.find(function(match) {
            if (positionPlayed === match) {
              matchingIndex = el.indexOf(match);
              if (ttt.player1_turn) {
                el[matchingIndex] = ttt.player1_symbol;
              } else {
                el[matchingIndex] = ttt.player2_symbol;
              }
            };
          });
        })

        // Render symbol on board
        if (ttt.player1_turn) {
          $(this)[0].innerHTML = ttt.player1_symbol;
        } else {
          $(this)[0].innerHTML = ttt.player2_symbol;
        }

        // Toggle player turn
        if (ttt.player1_turn) {
          ttt.player1_turn = false;
        } else {
          ttt.player1_turn = true;
        }

        checkForWin();
      }
    });

  // Computer's turn (1 player mode)
  } else if (!ttt.player1_turn && ttt.players === 1) {

    // Make computer delay move
    timeoutID1 = setTimeout(slowCompMove, 1500);

    function slowCompMove() {

      // Make a random move
      function randomMove(openPositions) {

        // Find open board positions if no openPositions args are passed in
        if (arguments.length === 0) {
          ttt.board.forEach(function(position, i) {
            if (ttt.board[i] === null) {
              ttt.openPositions.push(i);
            };
          });
        }

        // If openPositions args are passed in, use them for open positions
        else if (arguments.length > 0) {
          ttt.openPositions = openPositions;
        }

        // Select a random open position on board based on open positions
        positionPlayed = ttt.openPositions[Math.floor(Math.random() *
          ttt.openPositions.length)];
      }

      // Always go for the winning move if available
      function goForWin() {
        winLines.forEach(function(el, i) {
          if (ttt.computer_symbol === 'X') {
            if (typeof el[0] === 'number' && el[1] === 'X' && el[2] === 'X' ||
                el[0] === 'X' && typeof el[1] === 'number' && el[2] === 'X' ||
                el[0] === 'X' && el[1] === 'X' && typeof el[2] === 'number') {
              getBoardPosition(i);
            }
          }
          if (ttt.computer_symbol === 'O') {
            if (typeof el[0] === 'number' && el[1] === 'O' && el[2] === 'O' ||
                el[0] === 'O' && typeof el[1] === 'number' && el[2] === 'O' ||
                el[0] === 'O' && el[1] === 'O' && typeof el[2] === 'number') {
              getBoardPosition(i);
            }
          }
        });
      }

      // Always go for the block if opponent would win on next turn
      function goForBlock() {
        winLines.forEach(function(el, i) {
          if (ttt.computer_symbol === 'X') {
            if (typeof el[0] === 'number' && el[1] === 'O' && el[2] === 'O' ||
                el[0] === 'O' && typeof el[1] === 'number' && el[2] === 'O' ||
                el[0] === 'O' && el[1] === 'O' && typeof el[2] === 'number') {
              getBoardPosition(i);
            }
          }
          if (ttt.computer_symbol === 'O') {
            if (typeof el[0] === 'number' && el[1] === 'X' && el[2] === 'X' ||
                el[0] === 'X' && typeof el[1] === 'number' && el[2] === 'X' ||
                el[0] === 'X' && el[1] === 'X' && typeof el[2] === 'number') {
              getBoardPosition(i);
            }
          }
        });
      }

      // Helper function that finds index/board position
      function getBoardPosition(i) {
        winLines[i].forEach(function(num) {
          if (typeof num === 'number') { positionPlayed = num; }
        });
      }

      ttt.openPositions = [];

      // Decide computer move based on difficulty level
      if (ttt.level === 'easy') { randomMove(); }
      if (ttt.level === 'hard') {

        // Computer will make a pro move 85% of the time
        probability = 85;
        if (Math.random() * 100 <= probability) {
          console.log('proMove')
          proMove();
        } else {
          console.log('randomMove');
          randomMove();
        }
      }

      if (ttt.level === 'pro') { proMove(); }

      function proMove() {

        /*********************************************************************
         *                    Computer is X (goes first)                     *
         *********************************************************************/

        if (ttt.computer_symbol === 'X') {

          // Move 1: X takes center to start on pro level
          if (ttt.moveCount === 0) {
            positionPlayed = 4;
          }

          // Moves 2-3: if X randomly took a corner and O has center
          if (ttt.moveCount === 2 &&
            ttt.boardString() === '[null,null,null,null,"O",null,"X",null,null]') {
              positionPlayed = 2;
          }
          if (ttt.moveCount === 2 &&
            ttt.boardString() === '["X",null,null,null,"O",null,null,null,null]') {
              positionPlayed = 8;
          }
          if (ttt.moveCount === 2 &&
            ttt.boardString() === '[null,null,"X",null,"O",null,null,null,null]') {
              positionPlayed = 6;
          }
          if (ttt.moveCount === 2 &&
            ttt.boardString() === '[null,null,null,null,"O",null,null,null,"X"]') {
              positionPlayed = 0;
          }

          // Moves 2-3: if X randomly took a side and O has center
          if (ttt.moveCount === 2 &&
            ttt.boardString() === '[null,null,null,"X","O",null,null,null,null]') {
              randomMove([2, 8]);
          }
          if (ttt.moveCount === 2 &&
            ttt.boardString() === '[null,"X",null,null,"O",null,null,null,null]') {
              randomMove([6, 8]);
          }
          if (ttt.moveCount === 2 &&
            ttt.boardString() === '[null,null,null,null,"O","X",null,null,null]') {
              randomMove([0, 6]);
          }
          if (ttt.moveCount === 2 &&
            ttt.boardString() === '[null,null,null,null,"O",null,null,"X",null]') {
              randomMove([0, 2]);
          }

          // Moves 2-3: if O takes a side, X counters with opposite corner
          if (ttt.moveCount === 2 && ttt.board[1] === 'O') {
            randomMove([6, 8]);
          }
          if (ttt.moveCount === 2 && ttt.board[3] === 'O') {
            randomMove([2, 8]);
          }
          if (ttt.moveCount === 2 && ttt.board[5] === 'O') {
            randomMove([0, 6]);
          }
          if (ttt.moveCount === 2 && ttt.board[7] === 'O') {
            randomMove([0, 2]);
          }
        }

        // Moves 2-3: if O takes a corner, counter with straight diagonal line
        if (ttt.moveCount === 2 && ttt.board[0] === 'O') { positionPlayed = 8; }
        if (ttt.moveCount === 2 && ttt.board[2] === 'O') { positionPlayed = 6; }
        if (ttt.moveCount === 2 && ttt.board[6] === 'O') { positionPlayed = 2; }
        if (ttt.moveCount === 2 && ttt.board[8] === 'O') { positionPlayed = 0; }

        // Move 2-3: take center if available
        if (ttt.moveCount === 2 && ttt.board[4] === null) {
          positionPlayed = 4;
        }

        // Move 4-5: If opponent takes far side opposite his symbol, take open corner
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '["O",null,null,null,"X","O",null,null,"X"]') {
          positionPlayed = 6;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '["O",null,null,null,"X",null,null,"O","X"]') {
          positionPlayed = 2;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,null,"O","O","X",null,"X",null,null]') {
          positionPlayed = 8;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,null,"O",null,"X",null,"X","O",null]') {
          positionPlayed = 0;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '["X","O",null,null,"X",null,null,null,"O"]') {
          positionPlayed = 6;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '["X",null,null,"O","X",null,null,null,"O"]') {
          positionPlayed = 2;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,"O","X",null,"X",null,"O",null,null]') {
          positionPlayed = 8;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,null,"X",null,"X","O","O",null,null]') {
          positionPlayed = 0;
        }

        // Move 4-5: take adjacent corner for win on next turn
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,"O",null,null,"X","O",null,"X",null]' ||
          ttt.boardString() === '[null,"O",null,"O","X",null,null,"X",null]') {
            randomMove([6, 8]);
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,null,null,"X","X","O",null,"O",null]' ||
          ttt.boardString() === '[null,"O",null,"X","X","O",null,null,null]') {
          randomMove([0, 6]);
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,"X",null,"O","X",null,null,"O",null]' ||
          ttt.boardString() === '[null,"X",null,null,"X","O",null,"O",null]') {
          randomMove([0, 2]);
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,"O",null,"O","X","X",null,null,null]' ||
          ttt.boardString() === '[null,null,null,"O","X","X",null,"O",null]') {
          randomMove([2, 8]);
        }

        if (ttt.moveCount === 4 &&
          ttt.boardString() === '["X","O",null,null,"O",null,null,"X",null]' ||
          ttt.boardString() === '[null,null,null,"X","O","O",null,null,"X"]') {
          positionPlayed = 6;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,"O","X",null,"O",null,null,"X",null]' ||
          ttt.boardString() === '[null,null,null,"O","O","X","X",null,null]') {
          positionPlayed = 8;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,null,"X","X","O","O",null,null,null]' ||
          ttt.boardString() === '[null,"X",null,null,"O",null,"X","O",null]') {  positionPlayed = 0;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,"X",null,null,"O",null,null,"O","X"]' ||
          ttt.boardString() === '["X",null,null,"O","O","X",null,null,null]') {
          positionPlayed = 2;
        }

        // Move 4-5: take far corner
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,"O",null,null,"X",null,null,"X","O"]') {
            positionPlayed = 2; // or randomMove([2, 5]);
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,"O",null,null,"X",null,"O","X",null]') {
            positionPlayed = 0; // or randomMove([0, 3]);
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,null,null,"X","X","O","O",null,null]') {
            positionPlayed = 8; // or randomMove([7, 8]);
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '["O",null,null,"X","X","O",null,null,null]') {
            positionPlayed = 2; // or randomMove([1, 2]);
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '["O","X",null,null,"X",null,null,"O",null]') {
            positionPlayed = 6; // or randomMove([3, 6]);
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,"X","O",null,"X",null,null,"O",null]') {
            positionPlayed = 8; // or randomMove([5, 8]);
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,null,null,"O","X","X",null,null,"O"]') {
            positionPlayed = 6; // or randomMove([6, 7]);
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,null,"O","O","X","X",null,null,null]') {
            positionPlayed = 0; // or randomMove([0, 1]);
        }

        // Move 4-5: take closest corner
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,null,null,"O","O","X",null,"X",null]' ||
          ttt.boardString() === '[null,"O",null,null,"O","X",null,"X",null]') {
            positionPlayed = 8;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,"X",null,"O","O","X",null,null,null]' ||
          ttt.boardString() === '[null,"X",null,null,"O","X",null,"O",null]') {
            positionPlayed = 2;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,"O",null,"X","O",null,null,"X",null]' ||
          ttt.boardString() === '[null,null,null,"X","O","O",null,"X",null]') {
            positionPlayed = 6;
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,"X",null,"X","O","O",null,null,null]' ||
          ttt.boardString() === '[null,"X",null,"X","O",null,null,"O",null]') {
            positionPlayed = 0;
        }

        // Move 4-5: take open corner
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '[null,null,"X",null,"O",null,"O","X",null]' ||
          ttt.boardString() === '[null,"X","O",null,"O",null,"X",null,null]' ||
          ttt.boardString() === '[null,null,"O",null,"O","X","X",null,null]' ||
          ttt.boardString() === '[null,null,"X","X","O",null,"O",null,null]') {
            randomMove([0, 8]);
        }
        if (ttt.moveCount === 4 &&
          ttt.boardString() === '["X",null,null,null,"O",null,null,"X","O"]' ||
          ttt.boardString() === '["X",null,null,null,"O","X",null,null,"O"]' ||
          ttt.boardString() === '["O","X",null,null,"O",null,null,null,"X"]' ||
          ttt.boardString() === '["O",null,null,"X","O",null,null,null,"X"]') {
            randomMove([2, 6]);
        }

        // Move 4-5: take center if available
        if (ttt.moveCount === 4 && ttt.board[4] === null) {
          positionPlayed = 4;
        }

        // Move 6-7: choose random side instead of corner
        if (ttt.moveCount === 6 && JSON.stringify(winLines[1]) === '[3,"X",5]') {
          randomMove([3, 5]);
        }
        if (ttt.moveCount === 6 && JSON.stringify(winLines[4]) === '[1,"X",7]') {
          randomMove([1, 7]);
        }

        // Move 6-7: choose random corner
        if (ttt.moveCount === 6 &&
          ttt.boardString() === '[null,null,"O","O","X","X","X","O",null]' ||
          ttt.boardString() === '[null,"O","X","X","X","O","O",null,null]') {
            randomMove([0, 8]);
        }
        if (ttt.moveCount === 6 &&
          ttt.boardString() === '["X","O",null,"O","X",null,null,"X","O"]' ||
          ttt.boardString() === '["O","X",null,null,"X","O",null,"O","X"]') {
            randomMove([2, 6]);
        }

        // Move 6-7: take random position for draw
        if (ttt.moveCount === 6 &&
          ttt.boardString() === '["O","X",null,null,"O",null,"X","O","X"]' ||
          ttt.boardString() === '[null,"X","O",null,"O",null,"X","O","X"]' ||
          ttt.boardString() === '["X",null,"O","O","O","X","X",null,null]' ||
          ttt.boardString() === '["X",null,null,"O","O","X","X",null,"O"]' ||
          ttt.boardString() === '["X","O","X",null,"O",null,"O","X",null]' ||
          ttt.boardString() === '["X","O","X",null,"O",null,null,"X","O"]' ||
          ttt.boardString() === '["O",null,"X","X","O","O",null,null,"X"]' ||
          ttt.boardString() === '[null,null,"X","X","O","O","O",null,"X"]') {
            randomMove();
        }

        // Move 6-7: take center if available
        if (ttt.moveCount === 6 && ttt.board[4] === null) {
          positionPlayed = 4;
        }

        // Move 4-n: Try for win or prevent win on next move (when possible)
        if (ttt.moveCount >= 4) {
          goForBlock();
          goForWin();
        }

        // Move 9: Take the last open spot for a draw
        if (ttt.moveCount === 8) {
          winLines.forEach(function(arr) {
            winLinesMatch = arr.find(function(match) {
              if (typeof match === 'number') {
                positionPlayed = match;
              }
            });
          });
        }

        /*********************************************************************
         *                    Computer is O (goes second)                    *
         *********************************************************************/

        if (ttt.computer_symbol === 'O') {

          // Move 2A: if X took center, play a corner
          if (ttt.moveCount === 1 && ttt.lastMove === 4) {
            randomMove([0, 2, 6, 8]);
          }

          // Move 2B: if X didn't take center, take center
          if (ttt.moveCount === 1 && ttt.lastMove !== 4) { positionPlayed = 4; }

          // Move 3-4A (X center): if X took diagonal line, take corner
          if (ttt.moveCount === 3 &&
            ttt.boardString() === '[null,null,"O",null,"X",null,"X",null,null]' ||
            ttt.boardString() === '[null,null,"X",null,"X",null,"O",null,null]') {
              randomMove([0, 8]);
          }
          if (ttt.moveCount === 3 &&
            ttt.boardString() === '["X",null,null,null,"X",null,null,null,"O"]' ||
            ttt.boardString() === '["O",null,null,null,"X",null,null,null,"X"]') {
              randomMove([2, 6]);
          }

          // Move 3-4B (O center): if X takes diagonal line, play side
          if (ttt.moveCount === 3 &&
            ttt.boardString() === '["X",null,null,null,"O",null,null,null,"X"]' ||
            ttt.boardString() === '[null,null,"X",null,"O",null,"X",null,null]') {
              randomMove([1, 3, 5, 7]);
          }

          // Move 3-4C: if X chose horizontal line (O center), take corner
          if (ttt.moveCount === 3 &&
            ttt.boardString() === '[null,"X",null,null,"O",null,null,"X",null]' ||
            ttt.boardString() === '[null,null,null,"X","O","X",null,null,null]') {
              randomMove([0, 2, 6, 8]);
          }

          // Move 3-4D: if X chooses two adjacent sides, take corner between them
          if (ttt.moveCount === 3 &&
            ttt.boardString() === '[null,"X",null,null,"O","X",null,null,null]') {
              positionPlayed = 2;
          }
          if (ttt.moveCount === 3 &&
            ttt.boardString() === '[null,null,null,null,"O","X",null,"X",null]') {
              positionPlayed = 8;
          }
          if (ttt.moveCount === 3 &&
            ttt.boardString() === '[null,null,null,"X","O",null,null,"X",null]') {
              positionPlayed = 6;
          }
          if (ttt.moveCount === 3 &&
            ttt.boardString() === '[null,"X",null,"X","O",null,null,null,null]') {
              positionPlayed = 0;
          }

          // Move 3-4E: if X chooses corner and far side, take perpendicular corner
          if (ttt.moveCount === 3 &&
            ttt.boardString() === '["X",null,null,null,"O","X",null,null,null]' ||
            ttt.boardString() === '[null,"X",null,null,"O",null,null,null,"X"]') {
              positionPlayed = 2;
          }
          if (ttt.moveCount === 3 &&
            ttt.boardString() === '[null,null,"X",null,"O",null,null,"X",null]' ||
            ttt.boardString() === '[null,null,null,null,"O","X","X",null,null]') {
              positionPlayed = 8;
          }
          if (ttt.moveCount === 3 &&
            ttt.boardString() === '[null,null,null,"X","O",null,null,null,"X"]' ||
            ttt.boardString() === '["X",null,null,null,"O",null,null,"X",null]') {
              positionPlayed = 6;
          }
          if (ttt.moveCount === 3 &&
            ttt.boardString() === '[null,"X",null,null,"O",null,"X",null,null]' ||
            ttt.boardString() === '[null,null,"X","X","O",null,null,null,null]') {
              positionPlayed = 0;
          }

          // Move 5-6A: if X completes diagonal line
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '[null,"O","X",null,"X",null,"O","X",null]') {
              randomMove([0, 3]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '["O",null,null,"X","X","O",null,null,"X"]') {
              randomMove([1, 2]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '[null,"X","O",null,"X",null,"X","O",null]') {
              randomMove([5, 8]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '["X",null,null,"O","X","X",null,null,"O"]') {
              randomMove([6, 7]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '["X","O",null,null,"X",null,null,"X","O"]') {
              randomMove([2, 5]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '["O","X",null,null,"X",null,null,"O","X"]') {
              randomMove([3, 6]);
          }

          // Move 5B: Take an open side
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '["X","O","X",null,"O",null,null,"X",null]' ||
            ttt.boardString() === '[null,"X",null,null,"O",null,"X","O","X"]') {
              randomMove([3, 5]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '[null,null,"X","X","O","O",null,null,"X"]' ||
            ttt.boardString() === '["X",null,null,"O","O","X","X",null,null]') {
              randomMove([1, 7]);
          }

          // Move 5C: Take an open corner
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '[null,"X","O",null,"O","X","X",null,null]' ||
            ttt.boardString() === '[null,null,"X","X","O",null,"O","X",null]') {
              randomMove([0, 8]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '["X",null,null,null,"O","X",null,"X","O"]' ||
            ttt.boardString() === '["O","X",null,"X","O",null,null,null,"X"]') {
              randomMove([2, 6]);
          }

          // Move 5D: Take horizontal line as last possible win line
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '[null,null,"X","X","X","O","O",null,null]') {
              randomMove([7, 8]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '["O","X",null,null,"X",null,null,"O","X"]') {
              randomMove([3, 6]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '[null,null,"O","O","X","X","X",null,null]') {
              randomMove([0, 1]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '["X","O",null,null,"X",null,null,"X","O"]') {
              randomMove([2, 5]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '["X",null,null,"O","X","X",null,null,"O"]') {
              randomMove([6, 7]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '[null,"O","X",null,"X",null,"O","X",null]') {
              randomMove([0, 3]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '["O",null,null,"X","X","O",null,null,"X"]') {
              randomMove([1, 2]);
          }
          if (ttt.moveCount === 5 &&
            ttt.boardString() === '[null,"X","O",null,"X",null,"X","O",null]') {
              randomMove([5, 8]);
          }

          // Move 7A: take an open side for draw
          if (ttt.moveCount === 7 &&
            ttt.boardString() === '["O","X","O",null,"X",null,"X","O","X"]' ||
            ttt.boardString() === '["X","O","X",null,"X",null,"O","X","O"]') {
            randomMove([3, 5]);
          }

          if (ttt.moveCount === 7 &&
            ttt.boardString() === '["X",null,"O","O","X","X","X",null,"O"]' ||
            ttt.boardString() === '["O",null,"X","X","X","O","O",null,"X"]') {
            randomMove([1, 7]);
          }

          // Move 7B: take a random move for draw
          if (ttt.moveCount === 7 &&
            ttt.boardString() === '["X","X","O","O","O","X","X",null,null]') {
              randomMove([7, 8]);
          }
          if (ttt.moveCount === 7 &&
            ttt.boardString() === '["X","O","X",null,"O","X",null,"X","O"]') {
              randomMove([3, 6]);
          }
          if (ttt.moveCount === 7 &&
            ttt.boardString() === '[null,null,"X","X","O","O","O","X","X"]') {
              randomMove([0, 1]);
          }
          if (ttt.moveCount === 7 &&
            ttt.boardString() === '["O","X",null,"X","O",null,"X","O","X"]') {
              randomMove([2, 5]);
          }
          if (ttt.moveCount === 7 &&
            ttt.boardString() === '["O","X","X","X","O","O",null,null,"X"]') {
              randomMove([6, 7]);
          }
          if (ttt.moveCount === 7 &&
            ttt.boardString() === '[null,"X","O",null,"O","X","X","O","X"]') {
              randomMove([0, 3]);
          }
          if (ttt.moveCount === 7 &&
            ttt.boardString() === '["X",null,null,"O","O","X","X","X","O"]') {
              randomMove([1, 2]);
          }
          if (ttt.moveCount === 7 &&
            ttt.boardString() === '["X,""O","X","X","O",null,"O","X",null]') {
              randomMove([5, 8]);
          }

          // Move 4A: Block win on next move
          if (ttt.moveCount >= 3) {
            goForBlock();
            goForWin();
          }

        // Move 9A: Take the last open spot for a draw
        if (ttt.moveCount === 8) {
          winLines.forEach(function(arr) {
            winLinesMatch = arr.find(function(match) {
              if (typeof match === 'number') {
                positionPlayed = match;
              }
            });
          });
        }
      }
    }

      // Update board array & last move
      ttt.board[positionPlayed] = ttt.computer_symbol;
      ttt.lastMove = positionPlayed;

      // Update board with computer's symbol
      if (ttt.moveCount < 9) {
        $("button.squares")[positionPlayed].innerText = ttt.computer_symbol;
      }

      // Iterate winLines arrays and replace matched indices with computer symbol
      winLines.forEach(function(el) {
        winLinesMatch = el.find(function(match) {
          if (positionPlayed === match) {
            matchingIndex = el.indexOf(match);
            el[matchingIndex] = ttt.computer_symbol;
          };
        });
      })

      // Toggle players
      ttt.player1_turn = true;

      clearTimeout(timeoutID1);
      clearTimeout(timeoutID4);

      checkForWin();
    }
  }
}

function highlightCurrentPlayer() {

  // Indicate current player
  if (ttt.players === 1) {
    if (ttt.player1_turn) {  // X
      $("h3#player1").addClass("currentPlayer");
      $("h3#computer").removeClass("currentPlayer");
    } else if (!ttt.player1_turn) {  // O
      $("h3#player1").removeClass("currentPlayer");
      $("h3#computer").addClass("currentPlayer");
    }
  }
  if (ttt.players === 2) {
    if (ttt.player1_turn) {  // X
      $("h3#player1").addClass("currentPlayer");
      $("h3#player2").removeClass("currentPlayer");
    } else if (!ttt.player1_turn) {  // O
      $("h3#player1").removeClass("currentPlayer");
      $("h3#player2").addClass("currentPlayer");
    }
  }
}

function checkForWin() {
  var isXWinner, isOWinner;

  ttt.moveCount++;

  // Find winner and winLines winning index
  winLines.forEach(function(el, i) {
    if (JSON.stringify(el) === '["X","X","X"]') {
      ttt.winner = 'X';
      ttt.winningIndex = i;
    } else if (JSON.stringify(el) === '["O","O","O"]' ) {
      ttt.winner = 'O';
      ttt.winningIndex = i;
    };
  });

  // Highlight winning moves on board
  switch (ttt.winningIndex) {
    case 0:
      ttt.winningIndex = [0, 1, 2];
      $("button#0, button#1, button#2").css("backgroundColor", "rgb(249,236,49)");
      break;
    case 1:
      ttt.winningIndex = [3, 4, 5];
      $("button#3, button#4, button#5").css("backgroundColor", "rgb(249,236,49)");
      break;
    case 2:
      ttt.winningIndex = [6, 7, 8];
      $("button#6, button#7, button#8").css("backgroundColor", "rgb(249,236,49)");
      break;
    case 3:
      ttt.winningIndex = [0, 3, 6];
      $("button#0, button#3, button#6").css("backgroundColor", "rgb(249,236,49)");
      break;
    case 4:
      ttt.winningIndex = [1, 4, 7];
      $("button#1, button#4, button#7").css("backgroundColor", "rgb(249,236,49)");
      break;
    case 5:
      ttt.winningIndex = [2, 5, 8];
      $("button#2, button#5, button#8").css("backgroundColor", "rgb(249,236,49)");
      break;
    case 6:
      ttt.winningIndex = [0, 4, 8];
      $("button#0, button#4, button#8").css("backgroundColor", "rgb(249,236,49)");
      break;
    case 7:
      ttt.winningIndex = [2, 4, 6];
      $("button#2, button#4, button#6").css("backgroundColor", "rgb(249,236,49)");
      break;
  }

  // Game is won, disable button hover and delay to see winning move on board
  if (ttt.winner != '') {
    $("button.squares").off("mouseover");
    $("button.squares").off("mouseout");
    timeoutID2 = setTimeout(displayGameResults, 2000);
  };


  // Game is a draw, delay to see results on board
  if (ttt.moveCount === 9 && ttt.winner === '') {
    ttt.draw = true;
    timeoutID2 = setTimeout(displayGameResults, 1500);
  }

  // Game continues if no winner
  if (ttt.moveCount < 9 && ttt.winner === '') { takeTurn(); }
}

function displayGameResults() {
  var winMsg = `<h2>${ttt.winner} won!</h2>`,
      drawMsg = '<h2>It\'s a draw...</h2>';

  // Clear player indicators
  $("div#one, div#two").css("backgroundColor", "rgb(155,222,200)");

  // Render draw message
  if (ttt.draw) {
    $("div#board").fadeOut(500, function() {
      $("div#board").hide();
      $("div.gameSetup").show().html(drawMsg).fadeIn(1000, function() {
        timeoutID3 = setTimeout(pauseAndFade, 1000);
        });
      });
    };

  // Render win message
  if (ttt.winner) {
    $("div#board").fadeOut(500, function() {
      $("div#board").hide();
      $("div.gameSetup").show().html(winMsg).fadeIn(1000, function() {
        timeoutID3 = setTimeout(pauseAndFade, 1000);
        });
      });
    };

  function pauseAndFade() {
    $("div.gameSetup").fadeOut(1000, function() {
      $("div.gameSetup").hide();
      $("div#board").show();
    });
  }

  updateStats();

  clearTimeout(timeoutID2);
  clearTimeout(timeoutID3);

  playAnotherGame();
}

function updateStats() {

  // Update scores based on who won
  if (ttt.player1_symbol === ttt.winner) {
    ttt.player1_score++;
    $("span#player1_score").delay(3000).text(ttt.player1_score);
  }
  if (ttt.player2_symbol === ttt.winner) {
    ttt.player2_score++;
    $("span#player2_score").delay(3000).text(ttt.player2_score);
  }
  if (ttt.computer_symbol === ttt.winner) {
    ttt.computer_score++;
    $("span#computer_score").delay(3000).text(ttt.computer_score);
  }

  // Update games played, games tied
  ttt.gamesPlayed++;
  $("h4#gamesPlayed").text(`Games: ${ttt.gamesPlayed}`);
  if (ttt.winner === '') {
    ttt.gamesTied++;
    $("h4#gamesTied").text(`Draws: ${ttt.gamesTied}`);
  }
}

function playAnotherGame() {
  ttt.board = [null, null, null, null, null, null, null, null, null];
  ttt.openPositions = [];
  ttt.moveCount = 0;
  ttt.draw = false;
  ttt.winner = '';
  ttt.winningIndex = [];

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

  // Decide who goes first
  ttt.computer_symbol === 'X' ? ttt.player1_turn = false : ttt.player1_turn = true;

  $("div#board").html(`
    <button id="0" class="squares"></button>
    <button id="1" class="squares"></button>
    <button id="2" class="squares"></button>
    <button id="3" class="squares"></button>
    <button id="4" class="squares"></button>
    <button id="5" class="squares"></button>
    <button id="6" class="squares"></button>
    <button id="7" class="squares"></button>
    <button id="8" class="squares"></button>
  `);

  timeoutID4 = setTimeout(takeTurn, 4000);
}

// Reset game to beginning
$("button#reset").on("click", function() {
  reset();
  setGameOptions();
});

function reset() {
  ttt = {
    level: '',
    board: [null, null, null, null, null, null, null, null, null],
    boardString: function stringifyBoard() {
      return JSON.stringify(this.board);
    },
    openPositions: [],
    players: '',
    player1_symbol: '',
    player2_symbol: '',
    computer_symbol: '',
    player1_turn: false,
    moveCount: 0,
    lastMove: '',
    draw: false,
    winner: '',
    winningPositions: [],
    player1_score: 0,
    player2_score: 0,
    computer_score: 0,
    gamesPlayed: 0,
    gamesTied: 0,
  };

  winLines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8],
               [0, 3, 6], [1, 4, 7], [2, 5, 8],
               [0, 4, 8], [2, 4, 6] ];
}

              
            
!
999px

Console