LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Tic-Tac-Toe!

-ConstanceCru

CSS
body {
  background: url("https://scontent-atl3-1.xx.fbcdn.net/v/t1.0-9/23795471_10156837173337519_3750486180375650412_n.jpg?oh=51989d5c2853c083dc475dd567833cb1&oe=5A8B3167");
  background-style: cover;
  background-width: 100%;
  background-attachment: fixed;
  color: white;
  font-family: 'Rock Salt', cursive;
}
#userChoose{
  margin-bottom: 50px;
}
.hash {
  position: relative;
  width: 60vh;
  height: 60vh;
}
.box {
  float:left;
  position: relative;
  width: 33%;
  padding-bottom: 33%; /* = width for a 1:1 aspect ratio */
  margin:0;
  overflow:hidden;
}
.content{
  position:absolute;
  height:100%; 
  width:100%; 
}
.c{
  border:5px solid white;
  border-top: 0;
  border-bottom: 0;
}
.e{
  border:5px solid white;
  border-left: 0;
  border-right: 0;
 
}
.f{
  border:5px solid white;
}
.g{
  border:5px solid white;
  border-right: 0;
  border-left: 0;
}
.i{
  border:5px solid white;
  border-bottom: 0;
  border-top: 0;
}
.tic{
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: transparent;
  border-color: transparent;
  font-size: 10vh;
  color: transparent;
}
.tic:hover {
  background-color: transparent;
  color: transparent;
  border: 0;
}
.tic:active{/*this should keep hash from showing during click, but doesnt work?*/
  background-color: transparent;
  color: transparent;
  border: 0;
}
.tic.active:hover{
  background-color: transparent;
  color: white;
  border: 0;
}
.tic.active{
  background-color: transparent;
  color: white;
  border: 0;
}
JS
$(document).ready(function(){
  //make code so user never wins
  //add div for game messages, instead of alerts
  //add div animation for div hide/show
  //div userChoose function
  //keep score?
  
  var user = "X";
  var computer = "O";
  var squares = ["#", "#", "#", "#", "#", "#", "#", "#"];
  var cPlay = true;
  var count = 0;
  
  $("#pO").click(function(){
    user = "O";
    computer = "X";
    $("#pO, #pX").hide();
  });
   $("#pX").click(function(){
    user = "X";
    computer = "O";
    $("#pO, #pX").hide();
  });
  
  function win(squares, player){//alert AFTER marking board
    if(squares[0] === player && squares[1] === player && squares[2] === player){
      cPlay = false; 
      reset();
      alert("Player " + player + " WINS!!! **across top row**");
    }
    else if(squares[3] === player && squares[4] === player && squares[5] === player){
      cPlay = false; 
      reset();
      alert("Player " + player + " WINS!!! **across middle row**");
    }
    else if(squares[6] === player && squares[7] === player && squares[8] === player){
      cPlay = false; 
      reset();
      alert("Player " + player + " WINS!!! **across bottom row**");
    }
    else if(squares[0] === player && squares[3] === player && squares[6] === player){
      cPlay = false; 
      reset();
      alert("Player " + player + " WINS!!! **down left row**");
    }
    else if(squares[1] === player && squares[4] === player && squares[7] === player){
      cPlay = false; 
      reset();
      alert("Player " + player + " WINS!!! **down middle row**");
    }
    else if(squares[2] === player && squares[5] === player && squares[8] === player){
      cPlay = false; 
      reset();
      alert("Player " + player + " WINS!!! **down right row**");
    }
    else if(squares[0] === player && squares[4] === player && squares[8] === player){
      cPlay = false; 
      reset();
      alert("Player " + player + " WINS!!! **diagonal row**");
    }
    else if(squares[2] === player && squares[4] === player && squares[6] === player){
      cPlay = false; 
      reset();
      alert("Player " + player + " WINS!!! **diagonal row**");
    }
    else if(squares.indexOf("#") === -1){//this case crashes page
       alert("It's a TIE!!");
        reset();
    }
    else {
      cPlay = true;
    }
  };
   
  function userTurn(user, id){
    var spotTaken = $("#" + id).text(); 
    if(spotTaken === "#"){
      count++;
      squares[id] = user;
      $("#" + id).text(user);
      $("#" + id).addClass("active");
      win(squares, user);
      if(cPlay === true){
        computerTurn();
      }
    }
  };
  
  function computerTurn(){
    var taken = false;
    while(taken === false && count > 0){
      var cMove = (Math.random()*10).toFixed();
      var move = $("#" + cMove).text();
      if(move === "#"){
        $("#" + cMove).text(computer);
        $("#" + cMove).addClass("active");
        taken = true;
        squares[cMove] = computer;
        win(squares, computer);//why doesn't this line run??
      console.log("win computer check");
      }
    }
  };
  
  $(".tic").click(function(){
    var square = $(this).attr("id");
    userTurn(user, square);
  });
  
  function reset(){
    count = 0;
    squares = ["#", "#", "#", "#", "#", "#", "#", "#"];
    $(".tic").text("#");
    $(".tic").removeClass("active");
    $("#pO, #pX").show();
  }
  
  
});
Term
Wed, 12/27/2017 - 07:06

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv