Tic Tac Toe Game

index.html

<link href='https://fonts.googleapis.com/css?family=Play&effect=neon|emboss' rel='stylesheet' type='text/css'> 
<div class="container-fluid nopadding"> 
  <nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation"> 
  
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggle-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand font-effect-neon" target=_blank href="http://codepen.io/rfprod"><span class="glyphicon glyphicon-wrench"></span> RFProd</a>
    </div>
    <div class="collapse navbar-collapse" id="toggle-nav">
      <div class="container-fluid">
        <ul class="nav navbar-nav navbar-right font-effect-emboss">
          <li class="nav-pills temp-units-switcher enabled">
            <a href="#" id="temp-units" onclick="startOver();">Start Over</a>
          </li>
          <li class="nav-tabs"><a href="#tictactoe"><span class="glyphicon glyphicon-th"></span> TIC TAC TOE GAME</a></li>
          <li class="nav-tabs"><a href="https://gist.github.com/rfprod/e472c08cc02fdea5eea2" target=_blank><span class="glyphicon glyphicon-download-alt" ></span> GIST</a></li>
        </ul>
      </div>
    </div>

  </nav>
  <a name="tictactoe"></a>
  <div class="home sect">
    <div class="container-fluid">
      <div class="col-xs-12 col-cm-12 col-md-12 col-lg-12">
        <h2 class="font-effect-emboss">						Tic Tac Toe Game					</h2>
        <p class="output">
          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 well 1-1"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 well 1-2"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 well 1-3"></div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
          </div>
          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 well 2-1"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 well 2-2"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 well 2-3"></div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
          </div>
          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 well 3-1"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 well 3-2"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 well 3-3"></div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
          </div>
        </p>
        <span class="credits font-effect-emboss">licence <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target=_blank>GPL 3.0</a></span>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalSelector" role="dialog">
  <div class="modal-dialog">    
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title center">Select your marker</h4>
      </div>
      <div class="modal-body center">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class='zero glyphicon glyphicon-record'></span></button>
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class='cross glyphicon glyphicon-remove'></span></button> 
      </div>
    </div>
  </div>
</div>

script.js

var chk = [[null,null,null],[null,null,null],[null,null,null]];
var blockHeight;
var userMarker;
var userNumericalMarker;
var AINumericalMarker;
var AImarker;
var zeroHTML = "<span class='zero glyphicon glyphicon-record'></span>";
var crossHTML = "<span class='cross glyphicon glyphicon-remove'></span>";
var turn = 0;
var blockRowI = [];
var blockRowJ = [];
var must = false;

$(document).ready(function(){
  $("#modalSelector").modal({show:false});
  $("#modalSelector").modal('show');
  equalizeHeight();
  setUserAndAImarkers();
  setClickListener();
});

function equalizeHeight(){
  //alert("clientHeight: "+window.innerHeight);
  //alert("clientWidth: "+window.innerWidth);
  if (window.innerHeight < window.innerWidth){
    blockHeight = window.innerHeight / 6;
  }else{
    blockHeight = window.innerWidth / 12;
  }
  $(".well").each(function(){
    var thisWidth = $(this).width();
    $(this).height(thisWidth);
    var thisHeight = $(this).height();
    //alert($(this).height());
    //alert($(this).width());
    //blockHeight = $(this).height();
    $(this).css("padding-top",thisHeight/2.7);
    //$(this).css("padding-left",thisWidth/2.7);
  });
}

function setUserAndAImarkers(){
  $("#modalSelector").find("button").click(function(){
    var innerObjectClass = $(this).find("span").attr("class");
    //alert(innerObjectClass);
    if (innerObjectClass.contains("zero")){userMarker = zeroHTML; userNumericalMarker = 0; AINumericalMarker = 1; AImarker = crossHTML;}
    if (innerObjectClass.contains("cross")){userMarker = crossHTML; userNumericalMarker = 1; AINumericalMarker = 0; AImarker = zeroHTML;}
    AIturn();
  });
}             

function setClickListener(){
  $(".well").click(function(){
    var inner = $(this).html();
    //alert(inner);
    if (inner == ""){
      turn = turn + 1;
      //alert(turn);
      $(this).html(userMarker);
      var marker;
      if (userMarker.contains("zero")){
        marker = 0;
      }else{
        marker = 1;
      }
      var thisClass = $(this).attr("class");
      if (thisClass.contains("1-1")){chk[0][0] = marker;}
      if (thisClass.contains("1-2")){chk[0][1] = marker;}
      if (thisClass.contains("1-3")){chk[0][2] = marker;}
      if (thisClass.contains("2-1")){chk[1][0] = marker;}
      if (thisClass.contains("2-2")){chk[1][1] = marker;}
      if (thisClass.contains("2-3")){chk[1][2] = marker;}
      if (thisClass.contains("3-1")){chk[2][0] = marker;}
      if (thisClass.contains("3-2")){chk[2][1] = marker;}
      if (thisClass.contains("3-3")){chk[2][2] = marker;}
      //checkResult(AINumericalMarker);
      AIturn();
    }
  });
}
function reSetClickListener(){
  $(".well").off("click");
}  

function AIturn(){
  checkResult(userNumericalMarker);
  turn = turn + 1;
  //alert(turn);
  var marker;
  if (AImarker.contains("zero")){
    marker = 0;
  }else{
    marker = 1;
  }
  if (turn <= 1){
    // AI makes first move either to the corner or to the center
    var rnd = Math.floor(Math.random()*(10-1+1) + 1);
    var a,b;
    if (rnd <= 5){a=0;b=0;}else{a=1;b=1;}
    chk[a][b] = marker;
    $("."+(a+1)+"-"+(b+1)).html(AImarker);
  }else if (turn == 3){
    // 5 move combinations
    if (chk[0][0] == marker && chk[2][2] == null){
      chk[2][2] = marker;
      $(".3-3").html(AImarker);
    }else if (chk[0][0] == marker && chk[2][0] == null){
      chk[2][0] = marker;
      $(".3-1").html(AImarker);
    }else if (chk[0][0] == marker && chk[0][2] == null){
      chk[0][2] = marker;
      $(".1-3").html(AImarker);
    }else
      
    if (chk[0][2] == marker && chk[2][0] == null){
      chk[2][0] = marker;
      $(".3-1").html(AImarker);
    }else if (chk[0][2] == marker && chk[2][2] == null){
      chk[2][2] = marker;
      $(".3-3").html(AImarker);
    }else if (chk[0][2] == marker && chk[0][0] == null){
      chk[0][0] = marker;
      $(".1-1").html(AImarker);
    }else

    if (chk[2][0] == marker && chk[0][2] == null){
      chk[0][2] = marker;
      $(".1-3").html(AImarker);
    }else if (chk[2][0] == marker && chk[0][0] == null){
      chk[0][0] = marker;
      $(".1-1").html(AImarker);
    }else if (chk[2][0] == marker && chk[2][2] == null){
      chk[2][2] = marker;
      $(".3-3").html(AImarker);
    }else
      
    if (chk[2][2] == marker && chk[0][0] == null){
      chk[0][0] = marker;
      $(".1-1").html(AImarker);
    }else if (chk[2][2] == marker && chk[0][2] == null){
      chk[0][2] = marker;
      $(".1-3").html(AImarker);
    }else if (chk[2][2] == marker && chk[2][0] == null){
      chk[2][0] = marker;
      $(".3-1").html(AImarker);
    }else
    
    if (chk[1][1] == marker && chk[0][0] == null){
      chk[0][0] = marker;
      $(".1-1").html(AImarker);
    }else if (chk[1][1] == marker && chk[2][0] == null){
      chk[2][0] = marker;
      $(".3-1").html(AImarker);
    }else if (chk[1][1] == marker && chk[2][2] == null){
      chk[2][2] = marker;
      $(".3-3").html(AImarker);
    }else if (chk[1][1] == marker && chk[0][2] == null){
      chk[0][2] = marker;
      $(".1-3").html(AImarker);
    }
  }else if (turn >= 5 && turn < 9){
    // check if AI should block or make a finishing move
    var finishRow = mustBlock(AINumericalMarker);
    var blockRow = false;
    //alert("finishRow "+finishRow);
    console.log("finishRow "+finishRow);
    if (finishRow){
      var lngth = blockRowI.length;
      if (lngth <= 1){
        chk[blockRowI[lngth-1]][blockRowJ[lngth-1]] = AINumericalMarker;
        var className = "."+(blockRowI[lngth-1]+1)+"-"+(blockRowJ[lngth-1]+1)+"";
        //alert("finnishRow class name "+className);
        console.log("finnishRow class name "+className);
        $(""+className+"").html(AImarker);
      }else{
        for (var h=lngth-1;h>=0;h--){
          var classNm = "."+(blockRowI[h]+1)+"-"+(blockRowJ[h]+1)+"";
          //alert(classNm);
          console.log(classNm);
          if ($(classNm).html() == ""){
            chk[blockRowI[h]][blockRowJ[h]] = AINumericalMarker;
            //alert("finnishRow class name "+className);
            console.log("finnishRow class name "+className);
            $(""+className+"").html(AImarker);
          }
        }
      }
      blockRowI = [];
      blockRowJ = [];
    }else if (!finishRow){
      blockRow = mustBlock(userNumericalMarker);
      //alert("blockRow "+blockRow);
      console.log("blockRow "+blockRow);
      if (blockRow){
        var lngth = blockRowI.length;
        if (lngth <= 1){
          chk[blockRowI[lngth-1]][blockRowJ[lngth-1]] = AINumericalMarker;
          var className = "."+(blockRowI[lngth-1]+1)+"-"+(blockRowJ[lngth-1]+1)+"";
          //alert("blockUser class name "+className);
          console.log("blockUser class name "+className);
          $(""+className+"").html(AImarker);
        }else{
          for (var h=lngth-1;h>=0;h--){
            var classNm = "."+(blockRowI[h]+1)+"-"+(blockRowJ[h]+1)+"";
            //alert(classNm);
            console.log(classNm);
            if ($(classNm).html() == ""){
              chk[blockRowI[lngth-1]][blockRowJ[lngth-1]] = AINumericalMarker;
              //alert("blockUser class name "+className);
              console.log("blockUser class name "+className);
              $(""+className+"").html(AImarker);
            }
          }
        }
        blockRowI = [];
        blockRowJ = [];
      }
    
    if (!blockRow){
      // 10 move combinations
      // vertical + horyiontal
      if (chk[0][0] == marker && chk[2][0] == marker){
        if (chk[1][0] == null){
          chk[1][0] = marker;
          $(".2-1").html(AImarker);
        }else if (chk[1][1] == null){
          chk[1][1] = marker;
          $(".2-2").html(AImarker);
        }else if (chk[0][2] == null){
          chk[0][2] = marker;
          $(".1-3").html(AImarker);
        }else if (chk[2][2] == null){
          chk[2][2] = marker;
          $(".3-3").html(AImarker);
        }
      }else if (chk[0][0] == marker && chk[0][2] == marker){
        if (chk[0][1] == null){
          chk[0][1] = marker;
          $(".1-2").html(AImarker);
        }else if (chk[1][1] == null){
          chk[1][1] = marker;
          $(".2-2").html(AImarker);
        }else if (chk[2][0] == null){
          chk[2][0] = marker;
          $(".3-1").html(AImarker);
        }else if (chk[2][2] == null){
          chk[2][2] = marker;
          $(".3-3").html(AImarker);
        }
      }else if (chk[0][2] == marker && chk[2][2] == marker){
        if (chk[1][2] == null){
          chk[1][2] = marker;
          $(".2-3").html(AImarker);
        }else if (chk[1][1] == null){
          chk[1][1] = marker;
          $(".2-2").html(AImarker);
        }else if (chk[0][0] == null){
          chk[0][0] = marker;
          $(".1-1").html(AImarker);
        }else if (chk[2][0] == null){
          chk[2][0] = marker;
          $(".3-1").html(AImarker);
        }
      }else if (chk[2][0] == marker && chk[2][2] == marker){
        if (chk[2][1] == null){
          chk[2][1] = marker;
          $(".3-2").html(AImarker);
        }else if (chk[1][1] == null){
          chk[1][1] = marker;
          $(".2-2").html(AImarker);
        }else if (chk[0][0] == null){
          chk[0][0] = marker;
          $(".1-1").html(AImarker);
        }else if (chk[0][2] == null){
          chk[0][2] = marker;
          $(".1-3").html(AImarker);
        }
      }else
      // diagonals
      if (chk[0][0] == marker && chk[1][1] == marker){
        if (chk[2][2] == null){
          chk[2][2] = marker;
          $(".3-3").html(AImarker);
        }else if (chk[2][0] == null){
          chk[2][0] = marker;
          $(".3-1").html(AImarker);
        }else if (chk[0][2] == null){
          chk[0][2] = marker;
          $(".1-3").html(AImarker);
        }else if (chk[1][0] == null){
          chk[1][0] = marker;
          $(".2-1").html(AImarker);
        }else if (chk[0][1] == null){
          chk[0][1] = marker;
          $(".1-2").html(AImarker);
        }else if (chk[1][2] == null){
          chk[1][2] = marker;
          $(".2-3").html(AImarker);
        }else if (chk[2][1] == null){
          chk[2][1] = marker;
          $(".3-2").html(AImarker);
        }
      }else if (chk[2][0] == marker && chk[1][1] == marker){
        if (chk[0][2] == null){
          chk[0][2] = marker;
          $(".1-3").html(AImarker);
        }else if (chk[2][2] == null){
          chk[2][2] = marker;
          $(".3-3").html(AImarker);
        }else if (chk[0][0] == null){
          chk[0][0] = marker;
          $(".1-1").html(AImarker);
        }else if (chk[1][0] == null){
          chk[1][0] = marker;
          $(".2-1").html(AImarker);
        }else if (chk[0][1] == null){
          chk[0][1] = marker;
          $(".1-2").html(AImarker);
        }else if (chk[1][2] == null){
          chk[1][2] = marker;
          $(".2-3").html(AImarker);
        }else if (chk[2][1] == null){
          chk[2][1] = marker;
          $(".3-2").html(AImarker);
        }
      }else if (chk[0][2] == marker && chk[1][1] == marker){
        if (chk[2][0] == null){
          chk[2][0] = marker;
          $(".3-1").html(AImarker);
        }else if (chk[0][0] == null){
          chk[0][0] = marker;
          $(".1-1").html(AImarker);
        }else if (chk[2][2] == null){
          chk[2][2] = marker;
          $(".3-3").html(AImarker);
        }else if (chk[1][0] == null){
          chk[1][0] = marker;
          $(".2-1").html(AImarker);
        }else if (chk[0][1] == null){
          chk[0][1] = marker;
          $(".1-2").html(AImarker);
        }else if (chk[1][2] == null){
          chk[1][2] = marker;
          $(".2-3").html(AImarker);
        }else if (chk[2][1] == null){
          chk[2][1] = marker;
          $(".3-2").html(AImarker);
        }
      }else if (chk[2][2] == marker && chk[1][1] == marker){
        if (chk[0][0] == null){
          chk[0][0] = marker;
          $(".1-1").html(AImarker);
        }else if (chk[0][2] == null){
          chk[0][2] = marker;
          $(".1-3").html(AImarker);
        }else if (chk[2][0] == null){
          chk[2][0] = marker;
          $(".3-1").html(AImarker);
        }else if (chk[1][0] == null){
          chk[1][0] = marker;
          $(".2-1").html(AImarker);
        }else if (chk[0][1] == null){
          chk[0][1] = marker;
          $(".1-2").html(AImarker);
        }else if (chk[1][2] == null){
          chk[1][2] = marker;
          $(".2-3").html(AImarker);
        }else if (chk[2][1] == null){
          chk[2][1] = marker;
          $(".3-2").html(AImarker);
        }
      }else if (chk[0][0] == marker && chk[2][2] == marker){
        if (chk[1][1] == null){
          chk[1][1] = marker;
          $(".2-2").html(AImarker);
        }else if (chk[0][2] == null){
          chk[0][2] = marker;
          $(".1-3").html(AImarker);
        }else if (chk[2][0] == null){
          chk[2][0] = marker;
          $(".3-1").html(AImarker);
        }else if (chk[1][0] == null){
          chk[1][0] = marker;
          $(".2-1").html(AImarker);
        }else if (chk[0][1] == null){
          chk[0][1] = marker;
          $(".1-2").html(AImarker);
        }else if (chk[1][2] == null){
          chk[1][2] = marker;
          $(".2-3").html(AImarker);
        }else if (chk[2][1] == null){
          chk[2][1] = marker;
          $(".3-2").html(AImarker);
        }
      }else if (chk[0][2] == marker && chk[2][0] == marker){
        if (chk[1][1] == null){
          chk[1][1] = marker;
          $(".2-2").html(AImarker);
        }else if (chk[0][0] == null){
          chk[0][0] = marker;
          $(".1-1").html(AImarker);
        }else if (chk[2][0] == null){
          chk[2][0] = marker;
          $(".3-1").html(AImarker);
        }else if (chk[1][0] == null){
          chk[1][0] = marker;
          $(".2-1").html(AImarker);
        }else if (chk[0][1] == null){
          chk[0][1] = marker;
          $(".1-2").html(AImarker);
        }else if (chk[1][2] == null){
          chk[1][2] = marker;
          $(".2-3").html(AImarker);
        }else if (chk[2][1] == null){
          chk[2][1] = marker;
          $(".3-2").html(AImarker);
        }
      } else if (turn >= 9){
        var emptyClass = "";
        for (var u=0;u<chk.length;u++){
          for (var t=0;t<chk[u].length;t++){
            if (chk[u][t] == null){
              emptyClass = "."+(u+1)+"-"+(t+1)+"";
              chk[u][t] = marker;
              //alert(emptyClass);
              console.log(emptyClass);
              $(emptyClass).html(AImarker);
            }
          }
        }
      }
    } // if !blockRow
    } // if !finishRow
  }// if turn >=5
  else if (turn >= 9){
        var emptyClass = "";
        for (var u=0;u<chk.length;u++){
          var chkU = chk[u];
          for (var t=0;t<chkU.length;t++){
            if (chk[u][t] == null){
              emptyClass = "."+(u+1)+"-"+(t+1)+"";
              chk[u][t] = marker;
              //alert(emptyClass);
              console.log(emptyClass);
              $(emptyClass).html(AImarker);
            }
          }
        }
      }
  checkResult(AINumericalMarker);
}

// mustBlock, if userNumericalMarker is passed, indicates whether user's next move has to be blocked or not, if AINumericalMarker is passed, indicates whether AI can win by putting 3 in a row
function mustBlock(numMarker){
  // !!! added two next rows, see how script works !!!
  //blockRowI = [];
  //blockRowJ = [];
  must = false;
  // diagonals
  if (chk[0][0] == numMarker && chk[1][1] == null && chk[2][2] == numMarker ||
      chk[2][0] == numMarker && chk[1][1] == null && chk[0][2] == numMarker){
    blockRowI.push(1);
    blockRowJ.push(1);
  }
  if (chk[1][1] == numMarker && chk[2][2] == null && chk[0][0] == numMarker){
    blockRowI.push(2);
    blockRowJ.push(2);
  }
  if (chk[1][1] == numMarker && chk[2][0] == null && chk[0][2] == numMarker){
    blockRowI.push(2);
    blockRowJ.push(0);
  }
  if (chk[1][1] == numMarker && chk[0][0] == null && chk[2][2] == numMarker){
    blockRowI.push(0);
    blockRowJ.push(0);
  }
  if (chk[1][1] == numMarker && chk[0][2] == null && chk[2][0] == numMarker){
    blockRowI.push(0);
    blockRowJ.push(2);
  } 
  // horizontals
  if (chk[0][0] == numMarker && chk[0][1] == null && chk[0][2] == numMarker){
    blockRowI.push(0);
    blockRowJ.push(1);
  }
  if (chk[2][0] == numMarker && chk[2][1] == null && chk[2][2] == numMarker){
    blockRowI.push(2);
    blockRowJ.push(1);
  }
  // verticals
  if (chk[0][0] == numMarker && chk[1][0] == null && chk[2][0] == numMarker){
    blockRowI.push(1);
    blockRowJ.push(0);
  }
  if (chk[0][2] == numMarker && chk[1][2] == null && chk[2][2] == numMarker){
    blockRowI.push(1);
    blockRowJ.push(2);
  }
  // center cross
  if (chk[0][1] == numMarker && chk[1][1] == null && chk[2][1] == numMarker || chk[1][0] == numMarker && chk[1][1] == null && chk[1][2] == numMarker){
    blockRowI.push(1);
    blockRowJ.push(1);
  }
  // vertical sequential pairs
  if (chk[1][0] == numMarker && chk[2][0] == null && chk[0][0] == numMarker){
    blockRowI.push(2);
    blockRowJ.push(0);
  }
  if (chk[1][1] == numMarker && chk[2][1] == null && chk[0][1] == numMarker){
    blockRowI.push(2);
    blockRowJ.push(1);
  }
  if (chk[1][2] == numMarker && chk[2][2] == null && chk[0][2] == numMarker){
    blockRowI.push(2);
    blockRowJ.push(2);
  }
  if (chk[1][0] == numMarker && chk[0][0] == null && chk[2][0] == numMarker){
    blockRowI.push(0);
    blockRowJ.push(0);
  }
  if (chk[1][1] == numMarker && chk[0][1] == null && chk[2][1] == numMarker){
    blockRowI.push(0);
    blockRowJ.push(1);
  }
  if (chk[1][2] == numMarker && chk[0][2] == null && chk[2][2] == numMarker){
    blockRowI.push(0);
    blockRowJ.push(2);
  }
  // horizontal sequential pairs
  if (chk[0][1] == numMarker && chk[0][2] == null && chk[0][0] == numMarker){
    blockRowI.push(0);
    blockRowJ.push(2);
  }
  if (chk[1][1] == numMarker && chk[1][2] == null && chk[1][0] == numMarker){
    blockRowI.push(1);
    blockRowJ.push(2);
  }
  if (chk[2][1] == numMarker && chk[2][2] == null && chk[1][2] == numMarker){
    blockRowI.push(2);
    blockRowJ.push(2);
  }
  if (chk[0][1] == numMarker && chk[0][0] == null && chk[0][2] == numMarker){
    blockRowI.push(0);
    blockRowJ.push(0);
  }
  if (chk[1][1] == numMarker && chk[1][0] == null && chk[1][2] == numMarker){
    blockRowI.push(1);
    blockRowJ.push(0);
  }
  if (chk[2][1] == numMarker && chk[2][0] == null && chk[2][2] == numMarker){
    blockRowI.push(2);
    blockRowJ.push(0);
  }
  if (numMarker == AINumericalMarker){
    //alert("finishing move: blockRowI: "+blockRowI+" | blockRowJ: "+blockRowJ);
    console.log("finishing move: blockRowI: "+blockRowI+" | blockRowJ: "+blockRowJ);
  }else{
    //alert("blocking move: blockRowI: "+blockRowI+" | blockRowJ: "+blockRowJ);
    console.log("blocking move: blockRowI: "+blockRowI+" | blockRowJ: "+blockRowJ);
  }
  returnFalseIfOccupied(numMarker);
  return must;
}
function returnFalseIfOccupied(numMrk){
  // determine which array element to use depending on intent: finish/block
  if (numMrk == AINumericalMarker){ // finishing move
    var lngth = blockRowI.length;
    //alert("AI turn "+turn+" blockRowI.length: "+lngth);
    console.log("AI turn "+turn+" blockRowI.length: "+lngth);
    if (lngth > 0){
      if (chk[blockRowI[lngth-1]][blockRowJ[lngth-1]] != null){
        must = false;
      }else{
        must = true;
      }
    }
  }
  if (numMrk == userNumericalMarker){ // blocking move
    var lngth = blockRowI.length;
    //alert("user turn "+turn+" blockRowI.length: "+lngth);
    console.log("user turn "+turn+" blockRowI.length: "+lngth);
    if (lngth > 0){
      if (chk[blockRowI[lngth-1]][blockRowJ[lngth-1]] != null){
        must = false;
      }else{
        must = true;
      }
    }
  }
  return must;
}

function checkResult(nMark){
  //alert(chk);
  console.log("turn "+turn+", markers matrix: "+JSON.stringify(chk));
  // diagonals
  if (chk[0][0]==chk[1][1] && chk[0][0]==chk[2][2] && chk[0][0]==nMark){
    $(".1-1").find("span").addClass("font-effect-neon");
    $(".2-2").find("span").addClass("font-effect-neon");
    $(".3-3").find("span").addClass("font-effect-neon");
    whoWins(nMark);
  }
  if (chk[2][0]==chk[1][1] && chk[2][0]==chk[0][2] && chk[2][0]==nMark){
    $(".3-1").find("span").addClass("font-effect-neon");
    $(".2-2").find("span").addClass("font-effect-neon");
    $(".1-3").find("span").addClass("font-effect-neon");
    whoWins(nMark);
  }
  // horizontals
  if (chk[0][0]==chk[0][1] && chk[0][0]==chk[0][2] && chk[0][0]==nMark){
    $(".1-1").find("span").addClass("font-effect-neon");
    $(".1-2").find("span").addClass("font-effect-neon");
    $(".1-3").find("span").addClass("font-effect-neon");
    whoWins(nMark);
  }
  if (chk[1][0]==chk[1][1] && chk[1][0]==chk[1][2] && chk[1][0]==nMark){
    $(".2-1").find("span").addClass("font-effect-neon");
    $(".2-2").find("span").addClass("font-effect-neon");
    $(".2-3").find("span").addClass("font-effect-neon");
    whoWins(nMark);
  }
  if (chk[2][0]==chk[2][1] && chk[2][0]==chk[2][2] && chk[2][0]==nMark){
    $(".3-1").find("span").addClass("font-effect-neon");
    $(".3-2").find("span").addClass("font-effect-neon");
    $(".3-3").find("span").addClass("font-effect-neon");
    whoWins(nMark);
  }
  // verticals
  if (chk[0][0]==chk[1][0] && chk[0][0]==chk[2][0] && chk[0][0]==nMark){
    $(".1-1").find("span").addClass("font-effect-neon");
    $(".2-1").find("span").addClass("font-effect-neon");
    $(".3-1").find("span").addClass("font-effect-neon");
    whoWins(nMark);
  }
  if (chk[0][1]==chk[1][1] && chk[0][1]==chk[2][1] && chk[0][1]==nMark){
    $(".1-2").find("span").addClass("font-effect-neon");
    $(".2-2").find("span").addClass("font-effect-neon");
    $(".3-2").find("span").addClass("font-effect-neon");
    whoWins(nMark);
  }
  if (chk[0][2]==chk[1][2] && chk[0][2]==chk[2][2] && chk[0][2]==nMark){
    $(".1-3").find("span").addClass("font-effect-neon");
    $(".2-3").find("span").addClass("font-effect-neon");
    $(".3-3").find("span").addClass("font-effect-neon");
    whoWins(nMark);
  }
  function whoWins(nm){
    if (nm == AINumericalMarker){
      alert("AI wins");
      console.log("AI wins");
    }else{
      alert("User wins - this is most probably a bug");
      console.log("User wins - this is most probably a bug");
    }
    reSetClickListener();
  }
  var draw = true;
  for (var v=0;v<chk.length;v++){
    for (var s=0;s<chk[v].length;s++){
      if (chk[v][s] == null){
        draw = false;
      }
    }
  }
  if (draw == true){
    alert("Draw: no more moves left - this is the best possible result a user can achieve.");
    console.log("Draw: no more moves left - this is the best possible result a user can achieve.");
  }
}

function startOver(){
  resetFieldsAndVars();
  setClickListener();
  AIturn();
}

function resetFieldsAndVars(){
  reSetClickListener();
  turn = 0;
  blockRowI = [];
  blockRowJ = [];
  must = false;
  for (var h=0;h<chk.length;h++){
    var itm = chk[h];
    for (var e=0;e<itm.length;e++){
      if (chk[h][e] != null){
        var occupiedClass = "."+(h+1)+"-"+(e+1)+"";
        //alert(emptyClass);
        console.log(occupiedClass);
        $(occupiedClass).html("");
      }
    }
  }
  chk = [[null,null,null],[null,null,null],[null,null,null]];
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

.home {background: transparent url('http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/1203/full/abstract-electric-lights-tileable-textures-3.jpg') fixed center top / cover;min-height:100vh;height: auto !important;margin-top:0.95em;}
.nopadding {padding:0;}
body {font-family: 'Play',sans-serif;font-size:2.4em;}
.navbar-brand {font-size:1em;}
.img-border {border-radius:50%;height:40vh;}
.sect {padding-top:1em;}
.social-btn-blk {background-color:#000000;}
.social-btn-wht {background-color:#ffffff;}
.img-fit{width:100%;}
.output{text-shadow:2px 1px 2px grey;}
h2{text-align:center;margin-top:0.3em;}
.credits{display:block;text-align:center;font-size:0.75em;}
.credits a:hover{text-decoration:none;}
.well{margin:0;border-radius:0;padding:0;text-align:center;}
.center{text-align:center;}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />

TicTacToeGame.markdown

Tic-Tac-Toe Game

Computer always moves first, user can't win, the best result is draw.

A Pen by V on CodePen.

License.