cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
  <main class="text-center">
    <!--START OF WHITEBOARD -->
    <div id="whiteboard">
      <h1 id="title1">Swole Papi's Tic Tac Toe Game!</h1>
      <h3 id="title2">Free Code Camp Advanced Front End Project</h3>
      <table class="winCount">
        <tr>
          <td class="br bb">Player 1</td>
          <td class="bb aiORp2"></td>
        </tr>
        <tr>
          <td class="br p1WinCount">0</td>
          <td class="aiORp2WinCount">0</td>
        </tr>
      </table>
      <hr>
      <div id="winner"></div>
      <div class="playerOneTurn">Player 1</div>
      <div class="playerTwoTurn">Player 2</div>
      <!--PLAYERS - FIND NUM OF PLAYERS -->
      <div id="players">How many players?
        <div><a id="oneP" href="#">One Player</a></div>
        <div><a id="twoP" href="#">Two Players</a></div>
      </div>
      <!--END OF PLAYERS -->

      <!--CHOOSE X OR O -->
      <div id="xo">Would you like to be X or O?
        <br>
        <div><a id="X" href="#">X</a></div>
        <div><a id="O" href="#">O</a></div>
      </div>
      <!--END OF X OR O -->

      <!--START OF GAMEBOARD -->
      <table id="gameboard">
        <tr>
          <td id="grid0" class="br bb"></td>
          <td id="grid1" class="br bb"></td>
          <td id="grid2" class="bb"></td>
        </tr>
        <tr>
          <td id="grid3" class="br bb"></td>
          <td id="grid4" class="br bb"></td>
          <td id="grid5" class="bb"></td>
        </tr>
        <tr>
          <td id="grid6" class="br"></td>
          <td id="grid7" class="br"></td>
          <td id="grid8"></td>
        </tr>
      </table>
      <!--END OF GAMEBOARD -->
    </div>
    <!--END OF WHITEBOARD -->
    <br>
    <!--RESET BUTTON -->
    <button id="resetbtn" class="btn btn-info btn-lg">Reset</button>
    <!--END OF RESET BUTTON -->
  </main>
</body>

</html>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Lobster|Permanent+Marker|Press+Start+2P');
main, body, html {
  background-color: #D2B887;
  background-size: 100%;
  background-attachment: fixed;
  color: red;
  font-size: 40px;
  font-family: 'Permanent Marker', cursive;
}

#whiteboard {
  background: white;
  width: 700px;
  height: 550px;
  border: 15px solid grey;
  border-radius: 10px;
  margin: auto;
  margin-top: 20px;
  -webkit-box-shadow: 0px 17px 15px 11px rgba(69, 67, 69, 1);
  -moz-box-shadow: 0px 17px 15px 11px rgba(69, 67, 69, 1);
  box-shadow: 0px 17px 15px 11px rgba(69, 67, 69, 1);
  position: relative;
}

#title1, #title2 {
  color: black;
  font-family: 'Lobster', cursive;
}

#whiteboard hr {
  display: block;
  width: 90%;
  height: 2px;
  border-top: 2px solid black;
}

.playerOneTurn, .playerTwoTurn {
  height: 160px;
  width: 22px;
  letter-spacing: 10px;
  padding: 2px;
  font-size: 15px;
  word-break: break-all;
  background-color: blue;
  border: 2px solid black;
  color: white;
  font-family: 'Press Start 2P', cursive;
  position: absolute;
}

.playerOneTurn {
  border-left: none;
}

.playerTwoTurn {
  border-right: none;
  right: 0;
}

table {
  margin: auto;
  font-size: 50px;
}

#gameboard td {
  height: 100px;
  width: 100px;
}

.winCount td {
  height: 20px;
  width: 50px;
  font-size: 10px;
  color: black;
}

.br {
  border-right: 1px solid black;
}

.bb {
  border-bottom: 1px solid black;
}

#players, #xo {
  margin-top: 70px;
  margin-bottom: 20px;
}

#oneP {
  color: black;
  margin-bottom: 10px;
}

#oneP:hover {
  padding: 5px;
  border: 2px dashed grey;
  border-radius: 20px;
}

#twoP {
  color: black;
}

#twoP:hover {
  padding: 5px;
  border: 2px dashed grey;
  border-radius: 20px;
}

#X {
  color: black;
  float: left;
  margin-left: 42%;
}

#X:hover {
  padding: 5px;
  border: 2px dashed grey;
  border-radius: 20px;
}

#O {
  color: black;
  float: left;
  margin-left: 50px;
}

#O:hover {
  padding: 5px;
  border: 2px dashed grey;
  border-radius: 20px;
}

#resetbtn {
  font-size: 40px;
}

#winner {
  background: blue;
  width: 400px;
  height: 160px;
  margin: auto;
  margin-top: 70px;
  padding-top: 50px;
  border-radius: 50%;
  font-size: 40px;
  color: white;
}

            
          
!
            
              $(document).ready(function() {
    var numPlayers = 0; //stores number of players
    var p1xo, p2xo; //stores p1 and p2 as 'X' or 'O'
    var turn = 0; //turn counter
    var prefix = 'grid';
    var el; //used with prefix to set mark on a grid position
    var spots = [0, 0, 0, 0, 0, 0, 0, 0, 0]; //array of spots for checkWin conditions
    var empty = ['6', '2', '0', '1', '3', '4', '8', '5', '7']; //array for empty grid spaces
    var lastDigit; //gets the digit off grid id
    var p1Mark = [], p2Mark = []; //stores p1 and p2/AI's marks
    var computerGo; //true/false variable for the AI turn
    var win;  //variable to stop game if there is a win or draw
    var turnTime = 350;
    var p1WinCount = 0, p2WinCount = 0, computerWinCount = 0;

    $("#gameboard").hide();
    $("#xo").hide();
    $("#winner").hide();
    $(".playerOneTurn").hide();
    $(".playerTwoTurn").hide();
    $(".winCount").css({
      opacity: 0
    });

    //CHOOSES NUMBER OF PLAYERS
    $("#oneP").click(function() {
      numPlayers = 1;
      $("#players").hide();
      $("#xo").show();
      $(".aiORp2").html("Computer");
    });
    $("#twoP").click(function() {
      numPlayers = 2;
      $("#players").hide();
      $("#xo").show();
      $(".aiORp2").html("Player 2");
    });

    //P1 CHOOSES X OR O
    $("#X").click(function() {
      p1xo = "X";
      p2xo = "O";
      $("#xo").hide();
      $("#gameboard").show();
      $('.playerOneTurn').animate({
        width: 'toggle'
      }, turnTime);
      $(".winCount").fadeTo( "slow", 1 );
    });
    $("#O").click(function() {
      p1xo = "O";
      p2xo = "X";
      $("#xo").hide();
      $("#gameboard").show();
      $('.playerOneTurn').animate({
        width: 'toggle'
      }, turnTime);
      $(".winCount").fadeTo( "slow", 1 );
    });

    //RESET BUTTON LOGIC
    $('#resetbtn').click(function() {
      resetAll();
    });

    $("td").on("click", function() {
      //GAMEPLAY FOR ONE PLAYER
      if (numPlayers === 1 && turn < 9) {
        if ( $(this).html() === "" ) { //makes sure spot is empty first
          computerGo = false;
          $(this).html(p1xo); //sets p1 marker at the clicked location
          turn++; //increments turn
          checkWin(); //checks to see if p1 has won
          if (win === true) {
            return;
          }
          $('.playerOneTurn').animate({
            width: 'toggle'
          }, turnTime);
          $('.playerTwoTurn').animate({
            width: 'toggle'
          }, turnTime);
          $( "#gameboard" ).css( 'pointer-events', 'none' ); //disables clicking during computer turn
          lastDigit = this.id.substr(-1); //grabs digit from grid id
          setTimeout(function() {
            p1Mark.push(lastDigit); //adds grid location to array of p1 marks
            empty.splice(empty.indexOf(lastDigit), 1); //removes the clicked location from array of empty spots
            almostWin(); //checks to see if user/AI has almost won before AI chooses a spot and if not sets computerGo to 1
            if (computerGo === true) { //denotes that it is the AI's turn and user/AI is not in a position to win
              el = document.getElementById(prefix + empty[0]); //sets el as the id of the first grid space in empty array
              $(el).html(p2xo); //puts AI mark at el
              p2Mark.push(empty.shift()); //removes first value from empty and adds to p2mark
            }
            $('.playerOneTurn').animate({
              width: 'toggle'
            }, turnTime);
            $('.playerTwoTurn').animate({
              width: 'toggle'
            }, turnTime);
            $( "#gameboard" ).css( 'pointer-events', 'auto' ); //re-enables clicking after computer turn
            turn++; //increments turn
            checkWin(); //checks to see if AI has won
          }, 1200);
        }
      }

      //GAMEPLAY FOR TWO PLAYERS
      else if (numPlayers === 2 && turn < 9) {
        if (turn % 2 === 0) { //if turn is even, p1 goes
          if ( $(this).html() === "" ) {
            $(this).html(p1xo); //sets p1 marker at the clicked location
            turn++; //increments turn
            $('.playerOneTurn').animate({
              width: 'toggle'
            }, turnTime);
            $('.playerTwoTurn').animate({
              width: 'toggle'
            }, turnTime);
            checkWin(); //checks if p1 has won
            if (win === true) {
              return;
            }
          }
        } else { //if turn is odd, p2 goes
          if ( $(this).html() === "" ) {
            $(this).html(p2xo); //sets p2 marker at the clicked location
            turn++; //increments turn
            $('.playerOneTurn').animate({
              width: 'toggle'
            }, turnTime);
            $('.playerTwoTurn').animate({
              width: 'toggle'
            }, turnTime);
            checkWin(); //checks if p2 has won
          }
        }
      }
    });

    //checkWin FUNCTION
    function checkWin() {
      for (var i = 0; el = document.getElementById(prefix + i); i++) { //since prefix is 'grid', checks from grid0 - grid9
        if ($(el).html() === p1xo) { //if that grid space = p1
          spots.splice(i, 1, 1); //replace the 0 in spots array with a 1 at i's location
        } else if ($(el).html() === p2xo) { //if that grid space = p2
          spots.splice(i, 1, 2); //replace the 0 in spots array with a 2 at i's location
        }
      }
      //Goes through all possible win combinations and displays winner if conditions met
      if (spots[0] === 1 && spots[1] === 1 && spots[2] === 1) {
        p1Win(0,1,2);
      } else if (spots[3] === 1 && spots[4] === 1 && spots[5] === 1) {
        p1Win(3,4,5);
      } else if (spots[6] === 1 && spots[7] === 1 && spots[8] === 1) {
        p1Win(6,7,8);
      } else if (spots[0] === 1 && spots[3] === 1 && spots[6] === 1) {
        p1Win(0,3,6);
      } else if (spots[1] === 1 && spots[4] === 1 && spots[7] === 1) {
        p1Win(1,4,7);
      } else if (spots[2] === 1 && spots[5] === 1 && spots[8] === 1) {
        p1Win(2,5,8);
      } else if (spots[0] === 1 && spots[4] === 1 && spots[8] === 1) {
        p1Win(0,4,8);
      } else if (spots[2] === 1 && spots[4] === 1 && spots[6] === 1) {
        p1Win(2,4,6);
      } else if (spots[0] === 2 && spots[1] === 2 && spots[2] === 2) {
        p2Win(0,1,2);
      } else if (spots[3] === 2 && spots[4] === 2 && spots[5] === 2) {
        p2Win(3,4,5);
      } else if (spots[6] === 2 && spots[7] === 2 && spots[8] === 2) {
        p2Win(6,7,8);
      } else if (spots[0] === 2 && spots[3] === 2 && spots[6] === 2) {
        p2Win(0,3,6);
      } else if (spots[1] === 2 && spots[4] === 2 && spots[7] === 2) {
        p2Win(1,4,7);
      } else if (spots[2] === 2 && spots[5] === 2 && spots[8] === 2) {
        p2Win(2,5,8);
      } else if (spots[0] === 2 && spots[4] === 2 && spots[8] === 2) {
        p2Win(0,4,8);
      } else if (spots[2] === 2 && spots[4] === 2 && spots[6] === 2) {
        p2Win(2,4,6);
      } else if (turn === 9) {
        noWin();
      }
    }

    //Chooses where AI marks on the grid if p1 or AI is about to win
    function almostWin() {
      //check AI's positions first
      if (p2Mark.includes("0") && p2Mark.includes("1") && empty.includes("2")) {
        $('#grid2').html(p2xo);
      } else if (p2Mark.includes("0") && p2Mark.includes("2") && empty.includes("1")) {
        $('#grid1').html(p2xo);
      } else if (p2Mark.includes("0") && p2Mark.includes("3") && empty.includes("6")) {
        $('#grid6').html(p2xo);
      } else if (p2Mark.includes("0") && p2Mark.includes("4") && empty.includes("8")) {
        $('#grid8').html(p2xo);
      } else if (p2Mark.includes("0") && p2Mark.includes("6") && empty.includes("3")) {
        $('#grid3').html(p2xo);
      } else if (p2Mark.includes("0") && p2Mark.includes("8") && empty.includes("4")) {
        $('#grid4').html(p2xo);
      }

      //1's
      else if (p2Mark.includes("1") && p2Mark.includes("2") && empty.includes("0")) {
        $('#grid0').html(p2xo);
      } else if (p2Mark.includes("1") && p2Mark.includes("4") && empty.includes("7")) {
        $('#grid7').html(p2xo);
      } else if (p2Mark.includes("1") && p2Mark.includes("7") && empty.includes("4")) {
        $('#grid4').html(p2xo);
      }

      //2's
      else if (p2Mark.includes("2") && p2Mark.includes("6") && empty.includes("4")) {
        $('#grid4').html(p2xo);
      } else if (p2Mark.includes("2") && p2Mark.includes("4") && empty.includes("6")) {
        $('#grid6').html(p2xo);
      } else if (p2Mark.includes("2") && p2Mark.includes("5") && empty.includes("8")) {
        $('#grid8').html(p2xo);
      } else if (p2Mark.includes("2") && p2Mark.includes("8") && empty.includes("5")) {
        $('#grid5').html(p2xo);
      }

      //3's
      else if (p2Mark.includes("3") && p2Mark.includes("4") && empty.includes("5")) {
        $('#grid5').html(p2xo);
      } else if (p2Mark.includes("3") && p2Mark.includes("5") && empty.includes("4")) {
        $('#grid4').html(p2xo);
      } else if (p2Mark.includes("3") && p2Mark.includes("6") && empty.includes("0")) {
        $('#grid0').html(p2xo);
      }

      //4's
      else if (p2Mark.includes("4") && p2Mark.includes("5") && empty.includes("3")) {
        $('#grid3').html(p2xo);
      } else if (p2Mark.includes("4") && p2Mark.includes("6") && empty.includes("2")) {
        $('#grid2').html(p2xo);
      } else if (p2Mark.includes("4") && p2Mark.includes("7") && empty.includes("1")) {
        $('#grid1').html(p2xo);
      } else if (p2Mark.includes("4") && p2Mark.includes("8") && empty.includes("0")) {
        $('#grid0').html(p2xo);
      }

      //6
      else if (p2Mark.includes("6") && p2Mark.includes("7") && empty.includes("8")) {
        $('#grid8').html(p2xo);
      }

      //8's
      else if (p2Mark.includes("8") && p2Mark.includes("5") && empty.includes("2")) {
        $('#grid2').html(p2xo);
      } else if (p2Mark.includes("8") && p2Mark.includes("6") && empty.includes("7")) {
        $('#grid7').html(p2xo);
      } else if (p2Mark.includes("8") && p2Mark.includes("7") && empty.includes("6")) {
        $('#grid6').html(p2xo);
      }

      //check p1's positions
      else if (p1Mark.includes("0") && p1Mark.includes("1") && empty.includes("2")) {
        $('#grid2').html(p2xo);
        empty.splice(empty.indexOf("2"), 1);
        p2Mark.push("2");
      } else if (p1Mark.includes("0") && p1Mark.includes("2") && empty.includes("1")) {
        $('#grid1').html(p2xo);
        empty.splice(empty.indexOf("1"), 1);
        p2Mark.push("1");
      } else if (p1Mark.includes("0") && p1Mark.includes("3") && empty.includes("6")) {
        $('#grid6').html(p2xo);
        empty.splice(empty.indexOf("6"), 1);
        p2Mark.push("6");
      } else if (p1Mark.includes("0") && p1Mark.includes("4") && empty.includes("8")) {
        $('#grid8').html(p2xo);
        empty.splice(empty.indexOf("8"), 1);
        p2Mark.push("8");
      } else if (p1Mark.includes("0") && p1Mark.includes("6") && empty.includes("3")) {
        $('#grid3').html(p2xo);
        empty.splice(empty.indexOf("3"), 1);
        p2Mark.push("3");
      } else if (p1Mark.includes("0") && p1Mark.includes("8") && empty.includes("4")) {
        $('#grid4').html(p2xo);
        empty.splice(empty.indexOf("4"), 1);
        p2Mark.push("4");
      }

      //1's
      else if (p1Mark.includes("1") && p1Mark.includes("2") && empty.includes("0")) {
        $('#grid0').html(p2xo);
        empty.splice(empty.indexOf("0"), 1);
        p2Mark.push("0");
      } else if (p1Mark.includes("1") && p1Mark.includes("4") && empty.includes("7")) {
        $('#grid7').html(p2xo);
        empty.splice(empty.indexOf("7"), 1);
        p2Mark.push("7");
      } else if (p1Mark.includes("1") && p1Mark.includes("7") && empty.includes("4")) {
        $('#grid4').html(p2xo);
        empty.splice(empty.indexOf("4"), 1);
        p2Mark.push("4");
      }

      //2's
      else if (p1Mark.includes("2") && p1Mark.includes("6") && empty.includes("4")) {
        $('#grid4').html(p2xo);
        empty.splice(empty.indexOf("4"), 1);
        p2Mark.push("4");
      } else if (p1Mark.includes("2") && p1Mark.includes("4") && empty.includes("6")) {
        $('#grid6').html(p2xo);
        empty.splice(empty.indexOf("6"), 1);
        p2Mark.push("6");
      } else if (p1Mark.includes("2") && p1Mark.includes("5") && empty.includes("8")) {
        $('#grid8').html(p2xo);
        empty.splice(empty.indexOf("8"), 1);
        p2Mark.push("8");
      } else if (p1Mark.includes("2") && p1Mark.includes("8") && empty.includes("5")) {
        $('#grid5').html(p2xo);
        empty.splice(empty.indexOf("5"), 1);
        p2Mark.push("5");
      }

      //3's
      else if (p1Mark.includes("3") && p1Mark.includes("4") && empty.includes("5")) {
        $('#grid5').html(p2xo);
        empty.splice(empty.indexOf("5"), 1);
        p2Mark.push("5");
      } else if (p1Mark.includes("3") && p1Mark.includes("5") && empty.includes("4")) {
        $('#grid4').html(p2xo);
        empty.splice(empty.indexOf("4"), 1);
        p2Mark.push("4");
      } else if (p1Mark.includes("3") && p1Mark.includes("6") && empty.includes("0")) {
        $('#grid0').html(p2xo);
        empty.splice(empty.indexOf("0"), 1);
        p2Mark.push("0");
      }

      //4's
      else if (p1Mark.includes("4") && p1Mark.includes("5") && empty.includes("3")) {
        $('#grid3').html(p2xo);
        empty.splice(empty.indexOf("3"), 1);
        p2Mark.push("3");
      } else if (p1Mark.includes("4") && p1Mark.includes("6") && empty.includes("2")) {
        $('#grid2').html(p2xo);
        empty.splice(empty.indexOf("2"), 1);
        p2Mark.push("2");
      } else if (p1Mark.includes("4") && p1Mark.includes("7") && empty.includes("1")) {
        $('#grid1').html(p2xo);
        empty.splice(empty.indexOf("1"), 1);
        p2Mark.push("1");
      } else if (p1Mark.includes("4") && p1Mark.includes("8") && empty.includes("0")) {
        $('#grid0').html(p2xo);
        empty.splice(empty.indexOf("0"), 1);
        p2Mark.push("0");
      }

      //6
      else if (p1Mark.includes("6") && p1Mark.includes("7") && empty.includes("8")) {
        $('#grid8').html(p2xo);
        empty.splice(empty.indexOf("8"), 1);
        p2Mark.push("8");
      }

      //8's
      else if (p1Mark.includes("8") && p1Mark.includes("5") && empty.includes("2")) {
        $('#grid2').html(p2xo);
        empty.splice(empty.indexOf("2"), 1);
        p2Mark.push("2");
      } else if (p1Mark.includes("8") && p1Mark.includes("6") && empty.includes("7")) {
        $('#grid7').html(p2xo);
        empty.splice(empty.indexOf("7"), 1);
        p2Mark.push("7");
      } else if (p1Mark.includes("8") && p1Mark.includes("7") && empty.includes("6")) {
        $('#grid6').html(p2xo);
        empty.splice(empty.indexOf("6"), 1);
        p2Mark.push("6");
      }

      // if none
      else {
        computerGo = true;
      }
    }

    //RESET FUNCTION TO RESET GAME AFTER A WIN OR DRAW
    function reset() {
      win = false;
      turn = 0;
      spots = [0, 0, 0, 0, 0, 0, 0, 0, 0];
      empty = ['6', '2', '0', '1', '3', '4', '8', '5', '7'];
      p1Mark = [];
      p2Mark = [];

      for (i = 0; el = document.getElementById(prefix + i); i++) {
        $(el).html("");
      }
      $("#gameboard").show();
      $('.playerOneTurn').animate({
        width: 'toggle'
      }, turnTime);
      return turn = 0;
    }

    //RESET FUNCTION TO RESET EVERYTHING
    function resetAll() {
      numPlayers = 0;
      p1xo = "";
      p2xo = "";
      win = false;
      turn = 0;
      p1WinCount = 0;
      p2WinCount = 0;
      computerWinCount = 0;
      spots = [0, 0, 0, 0, 0, 0, 0, 0, 0];
      empty = ['6', '2', '0', '1', '3', '4', '8', '5', '7'];
      p1Mark = [];
      p2Mark = [];

      $(".p1WinCount").html("0");
      $(".aiORp2WinCount").html("0");

      for (i = 0; el = document.getElementById(prefix + i); i++) {
        $(el).html("");
      }
      $("#gameboard").hide();
      $("#xo").hide();
      $("#winner").hide();
      $("#players").show();
      $(".playerOneTurn").hide();
      $(".playerTwoTurn").hide();
      $(".winCount").fadeTo( "slow", 0 );

      return turn = 0;
    }

    //WHAT TO DO IN DIFFERENT WIN/DRAW SCENARIOS
    function p1Win(x1, x2, x3) {
      win = true;
      p1WinCount++;

      $('#'+prefix+x1).css('background-color', 'black');
      $('#'+prefix+x2).css('background-color', 'black');
      $('#'+prefix+x3).css('background-color', 'black');

      $('#'+prefix+x1).css('color', 'white');
      $('#'+prefix+x2).css('color', 'white');
      $('#'+prefix+x3).css('color', 'white');

      setTimeout(function () {
        $('#'+prefix+x1).css('background-color', 'transparent');
        $('#'+prefix+x2).css('background-color', 'transparent');
        $('#'+prefix+x3).css('background-color', 'transparent');

        $('#'+prefix+x1).css('color', 'red');
        $('#'+prefix+x2).css('color', 'red');
        $('#'+prefix+x3).css('color', 'red');

        $(".p1WinCount").html(p1WinCount);
        $("#gameboard").hide();
        $(".playerOneTurn").hide();
        $(".playerTwoTurn").hide();
        $("#winner").html("Player 1 wins!").fadeIn().fadeOut(1000);
        setTimeout(function() {
          reset();
        }, 2001);
      }, 1500);
    }

    function p2Win(x1,x2,x3) {
      win = true;

      $('#'+prefix+x1).css('background-color', 'black');
      $('#'+prefix+x2).css('background-color', 'black');
      $('#'+prefix+x3).css('background-color', 'black');

      $('#'+prefix+x1).css('color', 'white');
      $('#'+prefix+x2).css('color', 'white');
      $('#'+prefix+x3).css('color', 'white');

      setTimeout(function () {
        $('#'+prefix+x1).css('background-color', 'transparent');
        $('#'+prefix+x2).css('background-color', 'transparent');
        $('#'+prefix+x3).css('background-color', 'transparent');

        $('#'+prefix+x1).css('color', 'red');
        $('#'+prefix+x2).css('color', 'red');
        $('#'+prefix+x3).css('color', 'red');

        $("#gameboard").hide();
        $(".playerOneTurn").hide();
        $(".playerTwoTurn").hide();
        if (numPlayers === 1) {
          $("#winner").html("Computer wins!").fadeIn().fadeOut(1000);
          computerWinCount++;
          $(".aiORp2WinCount").html(computerWinCount);
        } else if (numPlayers === 2) {
          $("#winner").html("Player 2 wins!").fadeIn().fadeOut(1000);
          p2WinCount++;
          $(".aiORp2WinCount").html(p2WinCount);
        }
        setTimeout(function() {
          reset();
        }, 2001);
      }, 1500);
    }

    function noWin() {
      win = true;
      $("#gameboard").hide();
      $(".playerOneTurn").hide();
      $(".playerTwoTurn").hide();
      $("#winner").html("It's a draw!").fadeIn().fadeOut(1000);
      setTimeout(function() {
        reset();
      }, 2001);
    }

  });
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console