FreeCodeCamp Tic-Tac-Toe

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

<!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/ */
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/ */
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);

This awesome code ( FreeCodeCamp Tic-Tac-Toe ) is write by russell mckee, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © russell mckee