TicTacToeGame (Free Code Camp Challenge)

index.html

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Permanent+Marker"> 
<div class="container text-center"style="background: url('https://images.unsplash.com/photo-1448201509143-782c98e5d1c6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=46099a9141e9db4b463d29120c046555'),black; background-size: cover; color:white; width:100vw; height:100vh; font-family: Verdana, Arial;">
<div style="font-family: Permanent Marker">
    <h1>TicTacToe Game</h1>
    <h3>A Challenge by Free Code Camp</h3>
    <h4>Written by Daniel Deutsch</h4>
</div>
  <div class="row" id="question" style="height:9em; font-family: Arial Black, Arial;">
      <h1>Do you want to be 
      <a class="btn btn-success" id="X">X</a> or 
      <a class="btn btn-primary" id="O">O</a> ?
      </h1>
  </div>
  <div class="row"style="font-family: Arial Black, Arial;">
      <h1 id="answer"></h1>
  </div>
  <div id="field">
  <div class="row">
      <a class="btn btn-default col-xs-2 col-xs-offset-3" id="0" style="height:9em; padding-top: 4em;"></a>
      <a class="btn btn-default col-xs-2" id="1" style="height:9em; padding-top: 4em;"></a>
      <a class="btn btn-default col-xs-2" id="2" style="height:9em; padding-top: 4em;"></a>   
  </div>
  <div class="row">
      <a class="btn btn-default col-xs-2 col-xs-offset-3" id="3" style="height:9em; padding-top: 4em;"></a>
      <a class="btn btn-default col-xs-2" id="4" style="height:9em; padding-top: 4em;"></a>
      <a class="btn btn-default col-xs-2" id="5" style="height:9em; padding-top: 4em;"></a>   
  </div>
  <div class="row">
      <a class="btn btn-default col-xs-2 col-xs-offset-3" id="6" style="height:9em; padding-top: 4em;"></a>
      <a class="btn btn-default col-xs-2" id="7" style="height:9em; padding-top: 4em;"></a>
      <a class="btn btn-default col-xs-2" id="8" style="height:9em; padding-top: 4em;"></a>   
  </div>
  </div>  
  <div class="row">
      <a class="btn btn-danger col-xs-6 col-xs-offset-3" id="reset">Reset</a>
  </div>
 
  
</div>

script.js

$(document).ready(function(){
  var turn="X";
  var turns=["#", "#", "#", "#", "#", "#", "#", "#", "#"];
  var computersTurn="O";
  var gameOn=false;
  var count=0;//keeping track of computer to prevent looping
  var tie=false;
  
  function computer(){
    var taken= false;
    while(taken===false && count<5){
      var random=(Math.random()*8).toFixed();
      var move=$("#"+random).text();
      if(move===""){
        $("#"+random).text(computersTurn);
        taken=true;
        turns[random] = computersTurn;
      }//when the field is empty the computer should mark his turn 
      if(move===turn || computersTurn){
        random=(Math.random()*10).toFixed();
        move=$("#"+random).text();
      }//repeat random function in case of taken field 
      console.log(random, move);
    }
  }  
  function playerTurn(turn, id){
    var spot=$("#"+id).text();
    if(spot===""){
      count++;
      turns[id]= turn;
      $("#"+id).text(turn);
      win(turns, turn);
      if(gameOn===false){
        computer();
        win(turns, computersTurn)
      }
    }
  }//function for playerturn
  function celebrate(){
    $("#field").css("background","linear-gradient( rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0.5))");
    $("#answer").show().html("We have a Winner!");
  }//displaying a message when someone won
  function win(arr, cur){
    for(var i=0;i<3;i++){
      if(arr[3*i] == cur && arr[3*i+1] == cur && arr[3*i+2] == cur) {
      celebrate();
      arr=["#", "#", "#", "#", "#", "#", "#", "#", "#"];
      gameOn=true;
      }//horizontal
      else if(arr[0+i] == cur && arr[3+i] == cur && arr[6+i] == cur) {
      celebrate()
      arr=["#", "#", "#", "#", "#", "#", "#", "#", "#"];
      gameOn=true;
      }//vertical
      else if(arr[0] == cur && arr[4] == cur && arr[8] == cur) {
      celebrate()
      arr=["#", "#", "#", "#", "#", "#", "#", "#", "#"];
      gameOn=true;
      }//diagonal left
      else if(arr[2] == cur && arr[4] == cur && arr[6] == cur) {
      celebrate();
      arr=["#", "#", "#", "#", "#", "#", "#", "#", "#"];
      gameOn=true;
      }//diagonal right
      else {gameOn=false};
    }//iterating through the array
  }//win function. checking 3 in a row
  
  $("#X").click(function(){
    turn="X";
    computersTurn="O";
    $("#question").hide();
    $("#answer").html("You are <em>"+ turn +"</em> ! <br>  Fight!");  
  });//Choose turn with click function
  $("#O").click(function(){
    turn="O";
    computersTurn="X";
    $("#question").hide();
    $("#answer").html("You are <em>"+ turn +"</em> ! <br>  Fight!");  
  });//Choose turn with click function
  $(".btn-default").click(function(){
    var slot= $(this).attr("id");
    playerTurn(turn, slot);
  });//click function to add X or O
  $("#reset").click(function(){
    $(".btn-default").text("");
    turns=["#", "#", "#", "#", "#", "#", "#", "#", "#"];
    count=0;
    gameOn=true;
    $("#field").css("background","none");
    $("#answer").hide();
  });//reset function
  
  
  
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

tictactoegame-free-code-camp-challenge.markdown

TicTacToeGame (Free Code Camp Challenge)

A Pen by Daniel Deutsch on CodePen.

License.