TicTacToe

In this example below you will see how to do a TicTacToe with some HTML / CSS and Javascript

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

Technologies

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

<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/xxToadxx/tictactoe-aBbJVZ */
body{
  background-color:black;
}
h1 {
  color : white;
}
h2 {
  color : yellow;
}
h3{
  color : yellow
}

/*Downloaded from https://www.codeseek.co/xxToadxx/tictactoe-aBbJVZ */
//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;
  }
});

Comments