FreeCodeCamp Tic-Tac-Toe

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

Tic Tac Toe game for FreeCodeCamp. HTML, CSS, jQuery, Bootstrap.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>FreeCodeCamp Tic-Tac-Toe</title>
  
  
  <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>

  <html>
<div class="container-fluid">

  <head>
    <title>Tic-Tac-Toe</title>

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

  <body>

    <h1 class="text-center">
         Tic-Tac-Toe
        </h1>

    <div class="game-starter text-center">
      <p>Would you like to be X or O?</p>
      <button class="chooseX">X</button>
      <button class="chooseO">O</button>
    </div>

    <div class=" game-board row text-center">
      <button class='btn' id="1"></button>
      <button class='btn' id="2"></button>
      <button class='btn' id="3"></button>
    </div>

    <div class="game-board row text-center">
      <button class='btn' id="4"></button>
      <button class='btn' id="5"></button>
      <button class='btn' id="6"></button>
    </div>

    <div class="game-board row text-center">
      <button class='btn' id="7"></button>
      <button class='btn' id="8"></button>
      <button class='btn' id="9"></button>
    </div>

    <div class="game-over text-center">
      <h1>game over
     </h1>
      <button id="game_over">Play Again?</button>
    </div>

    <footer class="text-center">
        <p></p>
      </footer>

  </body>
</div>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>

</html>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/russell305/freecodecamp-tic-tac-toe-aBbdoz */
body {
  margin-top: 60px;
  background-color: #67BCDB;
}

h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 100px;
}

button {
  width: 65px;
  height: 65px;
  border: 2px solid black;
  background-color: #ffff66;
  font-weight: bold;
  padding: 5px;
  text-align: center;
  margin: 3px;
  margin-top: 15px;
}

.chooseX {
  width: 40px;
  height: 40px;
  background-color: #ffff66;
  text-align: center;
  margin: 0px;
}

.chooseO {
  width: 40px;
  height: 40px;
  background-color: #ffff66;
  text-align: center;
  margin: 5px;
}

.game-over{
  margin-top: -32px;
}

#game_over {
  width: 200px;
  height: 65px;
  border: 2px solid black;
  background-color: #ffff66;
  font-weight: bold;
  padding: 5px;
  text-align: center;
  margin: 3px;
  margin-top: 10px;
}



/*Downloaded from https://www.codeseek.co/russell305/freecodecamp-tic-tac-toe-aBbdoz */
var main = function() {
  var playerCharacter;
  var computerCharacter;
  var playerMove = [];
  var computerMove = [];
  var moves = 0;
  var stopComputerMove = false;
  var winMove = 0;
  var remainderMoves = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  function removeNumber(number) {
    var a = remainderMoves.indexOf(number);
    moves = remainderMoves.splice(a, 1);

    console.log("move" + number);
    $("#" + number).attr("disabled", true);
  }

  function checkWins() {
    checkForWin1();
    checkForWin2();
    checkForWin3();
    checkForWin4();
    checkForWin5();
    checkForWin6();
    checkForWin7();
    checkForWin8();
    computerTurn();
    if (playerMove.length == 5) {
      playerWin(1);
    }
  }

  function computerTurn() {
    if (stopComputerMove == true) {
      return;
    }

    var randomNumber = Math.floor(Math.random() * remainderMoves.length);
    var computerSpot = remainderMoves[randomNumber];
    console.log(computerSpot + "computerSpot");
    $("#" + computerSpot).html(computerCharacter);
    removeNumber(computerSpot);
    computerMove.push(moves[0]);

    checkComputerWin1();
    checkComputerWin2();
    checkComputerWin3();
    checkComputerWin4();
    checkComputerWin5();
    checkComputerWin6();
    checkComputerWin7();
    checkComputerWin8();
  }

  function checkComputerWin1() {
    var numberHits1 = 0;
    for (var i = 0; i < computerMove.length; i++) {
      for (var ii = 0; ii < winCombo[0].length; ii++)
        if (computerMove[i] == winCombo[0][ii]) {
          numberHits1++;
          console.log("computerhit" + numberHits1);
          if (numberHits1 == 3) {
            console.log("computer win1");
            playerWin(1);
            //$("#1").css("background-color", "orange");
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[0][i]).css("background-color", "red");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkComputerWin2() {
    var numberHits1 = 0;
    for (var i = 0; i < computerMove.length; i++) {
      for (var ii = 0; ii < winCombo[1].length; ii++)
        if (computerMove[i] == winCombo[1][ii]) {
          numberHits1++;
          console.log("computerhit" + numberHits1);
          if (numberHits1 == 3) {
            console.log("computer win2");
            playerWin(1);
            //$("#1").css("background-color", "orange");
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[1][i]).css("background-color", "red");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkComputerWin3() {
    var numberHits1 = 0;
    for (var i = 0; i < computerMove.length; i++) {
      for (var ii = 0; ii < winCombo[2].length; ii++)
        if (computerMove[i] == winCombo[2][ii]) {
          numberHits1++;
          console.log("computerhit" + numberHits1);
          if (numberHits1 == 3) {
            console.log("computer win3");
            playerWin(1);
            //$("#1").css("background-color", "orange");
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[2][i]).css("background-color", "red");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkComputerWin4() {
    var numberHits1 = 0;
    for (var i = 0; i < computerMove.length; i++) {
      for (var ii = 0; ii < winCombo[3].length; ii++)
        if (computerMove[i] == winCombo[3][ii]) {
          numberHits1++;
          console.log("computerhit" + numberHits1);
          if (numberHits1 == 3) {
            console.log("computer win4");
            playerWin(1);
            //$("#1").css("background-color", "orange");
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[3][i]).css("background-color", "red");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkComputerWin5() {
    var numberHits1 = 0;
    for (var i = 0; i < computerMove.length; i++) {
      for (var ii = 0; ii < winCombo[4].length; ii++)
        if (computerMove[i] == winCombo[4][ii]) {
          numberHits1++;
          console.log("computerhit" + numberHits1);
          if (numberHits1 == 3) {
            console.log("computer win1");
            playerWin(1);
            //$("#1").css("background-color", "orange");
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[4][i]).css("background-color", "red");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkComputerWin6() {
    var numberHits1 = 0;
    for (var i = 0; i < computerMove.length; i++) {
      for (var ii = 0; ii < winCombo[5].length; ii++)
        if (computerMove[i] == winCombo[5][ii]) {
          numberHits1++;
          console.log("computerhit" + numberHits1);
          if (numberHits1 == 3) {
            console.log("computer win1");
            playerWin(1);
            //$("#1").css("background-color", "orange");
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[5][i]).css("background-color", "red");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkComputerWin7() {
    var numberHits1 = 0;
    for (var i = 0; i < computerMove.length; i++) {
      for (var ii = 0; ii < winCombo[6].length; ii++)
        if (computerMove[i] == winCombo[6][ii]) {
          numberHits1++;
          console.log("computerhit" + numberHits1);
          if (numberHits1 == 3) {
            console.log("computer win6");
            playerWin(1);
            //$("#1").css("background-color", "orange");
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[6][i]).css("background-color", "red");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkComputerWin8() {
    var numberHits1 = 0;
    for (var i = 0; i < computerMove.length; i++) {
      for (var ii = 0; ii < winCombo[7].length; ii++)
        if (computerMove[i] == winCombo[7][ii]) {
          numberHits1++;
          console.log("computerhit" + numberHits1);
          if (numberHits1 == 3) {
            console.log("computer win1");
            playerWin(1);
            //$("#1").css("background-color", "orange");
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[7][i]).css("background-color", "red");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkForWin1() {
    var numberHits1 = 0;
    for (var i = 0; i < playerMove.length; i++) {
      for (var ii = 0; ii < winCombo[0].length; ii++)
        if (playerMove[i] == winCombo[0][ii]) {
          numberHits1++;
          console.log("hit" + numberHits1);
          if (numberHits1 == 3) {
            console.log("win1");
            playerWin(1);
            //$("#1").css("background-color", "orange");
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[0][i]).css("background-color", "green");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkForWin2() {
    var numberHits2 = 0;
    for (var i = 0; i < playerMove.length; i++) {
      for (var ii = 0; ii < winCombo[1].length; ii++)
        if (playerMove[i] == winCombo[1][ii]) {
          numberHits2++;
          //console.log("hit" + numberHits2)
          if (numberHits2 == 3) {
            console.log("win2");
            playerWin(2);
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[1][i]).css("background-color", "green");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkForWin3() {
    var numberHits3 = 0;
    for (var i = 0; i < playerMove.length; i++) {
      for (var ii = 0; ii < winCombo[2].length; ii++)
        if (playerMove[i] == winCombo[2][ii]) {
          numberHits3++;
          console.log("hit" + numberHits3);
          if (numberHits3 == 3) {
            console.log("win3");
            playerWin(3);
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[2][i]).css("background-color", "green");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkForWin4() {
    var numberHits4 = 0;

    for (var i = 0; i < playerMove.length; i++) {
      for (var ii = 0; ii < winCombo[3].length; ii++)
        if (playerMove[i] == winCombo[3][ii]) {
          //console.log(playerMove);
          numberHits4++;
          console.log("hit4= " + numberHits4);
          if (numberHits4 == 3) {
            console.log("win4");
            playerWin(4);
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[3][i]).css("background-color", "green");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkForWin5() {
    var numberHits5 = 0;

    for (var i = 0; i < playerMove.length; i++) {
      for (var ii = 0; ii < winCombo[4].length; ii++)
        if (playerMove[i] == winCombo[4][ii]) {
          //console.log(playerMove);
          numberHits5++;
          console.log("hit5= " + numberHits5);
          if (numberHits5 == 3) {
            console.log("win5");
            playerWin(5);
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[4][i]).css("background-color", "green");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkForWin6() {
    var numberHits6 = 0;

    for (var i = 0; i < playerMove.length; i++) {
      for (var ii = 0; ii < winCombo[5].length; ii++)
        if (playerMove[i] == winCombo[5][ii]) {
          //console.log(playerMove);
          numberHits6++;
          console.log("hit6= " + numberHits6);
          if (numberHits6 == 3) {
            console.log("win6");
            playerWin(6);
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[5][i]).css("background-color", "green");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkForWin7() {
    var numberHits7 = 0;

    for (var i = 0; i < playerMove.length; i++) {
      for (var ii = 0; ii < winCombo[6].length; ii++)
        if (playerMove[i] == winCombo[6][ii]) {
          //console.log(playerMove);
          numberHits7++;
          console.log("hit7= " + numberHits7);
          if (numberHits7 == 3) {
            console.log("win7");
            playerWin(7);
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[6][i]).css("background-color", "green");
            }
          }
        }
    }
  }
  ////////////////////////////////
  function checkForWin8() {
    var numberHits8 = 0;

    for (var i = 0; i < playerMove.length; i++) {
      for (var ii = 0; ii < winCombo[7].length; ii++)
        if (playerMove[i] == winCombo[7][ii]) {
          numberHits8++;
          console.log("hit8= " + numberHits8);
          if (numberHits8 == 3) {
            console.log("win8");
            playerWin(8);
            for (var i = 0; i <= 3; i++) {
              $("#" + winCombo[7][i]).css("background-color", "green");
            }
          }
        }
    }
  }
  ////////////////////////////////

  $("#1").click(function() {
    $("#1").html(playerCharacter);
    removeNumber(1);
    playerMove.push(moves[0]);
    checkWins();
  });

  $("#2").click(function() {
    $("#2").html(playerCharacter);
    removeNumber(2);
    playerMove.push(moves[0]);
    checkWins();
  });

  $("#3").click(function() {
    $("#3").html(playerCharacter);
    removeNumber(3);
    playerMove.push(moves[0]);
    checkWins();
  });

  $("#4").click(function() {
    $("#4").html(playerCharacter);
    removeNumber(4);
    playerMove.push(moves[0]);
    checkWins();
  });

  $("#5").click(function() {
    $("#5").html(playerCharacter);
    removeNumber(5);
    playerMove.push(moves[0]);
    checkWins();
  });

  $("#6").click(function() {
    $("#6").html(playerCharacter);
    removeNumber(6);
    playerMove.push(moves[0]);
    checkWins();
  });

  $("#7").click(function() {
    $("#7").html(playerCharacter);
    removeNumber(7);
    playerMove.push(moves[0]);
    checkWins();
  });

  $("#8").click(function() {
    $("#8").html(playerCharacter);
    removeNumber(8);
    playerMove.push(moves[0]);
    checkWins();
  });

  $("#9").click(function() {
    $("#9").html(playerCharacter);
    removeNumber(9);
    playerMove.push(moves[0]);
    checkWins();
  });

  var winCombo = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [1, 4, 7],
    [2, 5, 8],
    [3, 6, 9],
    [1, 5, 9],
    [3, 5, 7]
  ];

  ///////////////////////////////

  $(".chooseX").click(function() {
    $(".game-starter").hide();
    $(".game-board").show();
    playerCharacter = "X";
    computerCharacter = "O";
  });

  $(".chooseO").click(function() {
    $(".game-starter").hide();
    $(".game-board").show();
    playerCharacter = "O";
    computerCharacter = "X";
  });

  $("#game_over").click(function() {
    $(".game-board").hide();
    $(".game-over").hide();
    $(".game-starter").show();
    playerMove = [];
    computerMove = [];
    remainderMoves = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    for (var i = 1; i <= 9; i++) {
      $("#" + i).html("");
      $("#" + i).attr("disabled", false);
      $(".game-over").hide();
      stopComputerMove = false;
      $("#" + i).css("background-color", "#ffff66");
    }
  });

  function playerWin(winNumber) {
    for (var i = 1; i <= 9; i++) {
      $("#" + i).attr("disabled", true);
    }
    stopComputerMove = true;
    $(".game-over").show();
  }

  $(".game-board").hide();
  $(".game-over").hide();
};

$(document).ready(main);

Comments