TicTacToe

Tutorials of (Tictactoe) by David garza

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>TicTacToe</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>
  <!--Acknowledgments to Dylan Israel; CodingTutorials 360 -->

<div class="container text-center">
  <h1>TicTacToe</h1>
  <h2>Choose either X or O!</h2>
  <h3>Hit button to switch either as 'X' or 'O'.</h3>
    
  <a class ="btn btn-primary" id="turnX">X</a>
  <a class ="btn btn-secondary" id="turnO">O</a>
  <div class="row">
    <div class="col-md-6">
      <a class="btn btn-primary tic" id="0">#</a>
      <a class="btn btn-primary tic" id="1">#</a>
      <a class="btn btn-primary tic" id="2">#</a>
    </div>
  </div>
      <div class="row">
      <div class="col-md-6">
      <a class="btn btn-primary tic" id="3">#</a>
      <a class="btn btn-primary tic" id="4">#</a>
      <a class="btn btn-primary tic" id="5">#</a>
        </div>
      </div>
        <div class="row">
        <div class="col-md-6">
      <a class="btn btn-primary tic" id="6">#</a>
      <a class="btn btn-primary tic" id="7">#</a>
      <a class="btn btn-primary tic" id="8">#</a>
          </div>
        </div>
        </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

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

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body{
  background-color:black;
}
h1 {
  color : white;
}
h2 {
  color : yellow;
}
h3{
  color : yellow
}
/* Downloaded from https://www.codeseek.co/ */
//Acknoweledgments to CodingTutorials 360; Dylan Israel//

$(document).ready(function(){
  //defaults player's turn to x
  var turn="X"
  //Array stores values that we will check later for a winner
  var turns=["#","#","#","#","#","#","#","#","#"];
  //Default computer 
  var computersTurn="O";
  //Keeps track if it is the computer's turn
  var gameOn=false;
  //No loop
  var count = 0;
  //Change player's turn to x and computer's to O
  $('#turnX').click(function(){
    turn = "O";
    computersTurn = "X";
    $("#turnX").removeClass("btn-primary");
    $("#turnO").addClass("btn-primary"); 
    reset();
  });
  $('#turnO').click(function(){
    turn = "X";
    computersTurn = "O";
    $("#turnO").removeClass("btn-primary");
    $("#turnX").addClass("btn-primary");     
    reset();
  });
  
  function computerTurn(){
    //Used to break the while loop
    var taken=false;
    while(taken===false && count !==5){
      //generate computer's random turn
      var computersMove= (Math.random()*10).toFixed();
      var move= $("#"+computersMove).text();
      if(move==="#"){
        $("#"+computersMove).text(computersTurn);
           taken=true;
        turns[computersMove]= computersTurn;
      }
    }
  }
  
  function playerTurn(turn, id){
    var spotTaken = $("#"+id).text();
    if(spotTaken ==="#"){
      count++;
      turns[id]= turn;
      $("#"+id).text(turn);
      
      winCondition(turns, turn);
      if(gameOn===false){
        computerTurn();
        winCondition(turns, computersTurn);
        
      }
   
    }
  }
 //7:41
   function winCondition(turnArray, currentTurn){
     if(turnArray[0] === currentTurn &&
       turnArray[1]===currentTurn && turnArray[2] === currentTurn){
       gameOn = true;
       reset();
       alert("Player " + currentTurn + " wins! (Top across 0,1, and 2 spots)");
     }else if(turnArray[2] === currentTurn &&
       turnArray[4]===currentTurn && turnArray[6] === currentTurn){
       gameOn = true;
       reset();
       alert("Player " + currentTurn + " wins! (Top across 2,4, and 6 spots)");
   }else if(turnArray[0] === currentTurn &&
       turnArray[3]===currentTurn && turnArray[6] === currentTurn){
       gameOn = true;
       reset();
       alert("Player " + currentTurn + " wins! (1st row down 0,3, and 6 spots)");
   }else if(turnArray[0] === currentTurn &&
       turnArray[4]===currentTurn && turnArray[8] === currentTurn){
       gameOn = true;
       reset();
       alert("Player " + currentTurn + " wins! (Top across 0,4, and 8 spots)");
   }else if(turnArray[1] === currentTurn &&
       turnArray[4]===currentTurn && turnArray[7] === currentTurn){
       gameOn = true;
       reset();
       alert("Player " + currentTurn + " wins! (2nd row down1,4 and 7 spots)");
   }else if(turnArray[2] === currentTurn &&
       turnArray[5]===currentTurn && turnArray[8] === currentTurn){
       gameOn = true;
       reset();
       alert("Player " + currentTurn + " wins! (3rd row down2,5, and 8 spots)");
   }else if(turnArray[2] === currentTurn &&
       turnArray[5]===currentTurn && turnArray[8] === currentTurn){
       gameOn = true;
       reset();
       alert("Player " + currentTurn + " wins! (3rd row 2,5 and 8 spots)");
   }else if(turnArray[3] === currentTurn &&
       turnArray[4]===currentTurn && turnArray[5] === currentTurn){
       gameOn = true;
       reset();
       alert("Player " + currentTurn + " wins! (3rd row across 2,4, and 6 spots)");
   }else if(turnArray[6] === currentTurn &&
       turnArray[7]===currentTurn && turnArray[8] === currentTurn){
       gameOn = true;
       reset();
       alert("Player " + currentTurn + " wins! (Bottom row6,7, and 8 spots)");
   }else {
     gameOn =false;
   }
   }
  $(".tic").click(function(){
    var slot = $(this).attr('id');
    playerTurn(turn, slot);
    
                  });
  function reset(){
    turns = ["#","#","#","#","#","#","#","#","#"];
    count=0;
    $(".tic").text("#");
    gameOn = false;
  }
});

This awesome code ( TicTacToe ) is write by David Garza, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © David Garza