Tic Tac Toe Game

#100DayOfCode

codepen.io

HTML

<div class="sign-select">
 <h3>Choose your weapon:</h3>
 <button type="button" class="btn btn-default cell-X" onclick="signSelect('X', 'O')">X</button>
 <button type="button" class="btn btn-default cell-O" onclick="signSelect('O', 'X')">O</button>
</div>

<div id="game" class="game-wrapper">
 <div class="row row-top">
  <div id="cell0" class="cell" data-position=0></div>
  <div id="cell1" class="cell" data-position=1></div>
  <div id="cell2" class="cell" data-position=2></div>
 </div>
 <div class="row row-mid">
  <div id="cell3" class="cell" data-position=3></div>
  <div id="cell4" class="cell" data-position=4></div>
  <div id="cell5" class="cell" data-position=5></div>
 </div>
 <div class="row row-bot">
  <div id="cell6" class="cell" data-position=6></div>
  <div id="cell7" class="cell" data-position=7></div>
  <div id="cell8" class="cell" data-position=8></div>
 </div>
</div>

CSS

body {
 background: #F2F2F2;
}

.cell {
 float: left;
 background: #F2F2F2;
 width: 100px;
 height: 100px;
 border: 2px solid #0496ff;
 font-size: 52px;
 font-weight: bold;
 color: #fbfcff;
 justify-content: center; 
  text-align: center;
 padding-top: 15px;
}

.row-top .cell {
 border-top: none;
}

.row-cell {
 
}

.row-bot .cell {
 border-bottom: none;
}

#cell0, #cell3, #cell6 {
 border-left: none;
}

#cell2, #cell5, #cell8 {
 border-right: none;
}

.game-wrapper {
 margin: 15px auto;
 justify-content: space-around;
  text-align: center;
 width: 350px;
}

.sign-select {
 margin: auto;
 display: none;
 justify-content: center;
 padding-left: 45px;
  text-align: ;
 height: 200px;
 width: 325px;
  background: #F2F2F2;
}

.sign-select h3 {
 padding-top: 10%;
}

.sign-select .btn {
 height: 80px;
 width: 80px;
 font-size: 42px;
 font-weight: bold;
}

.cell-X {
 color: #00E700;
}

.cell-O {
 color: #fe4a49;
}

JS

var playField = ["", "", "",
    "", "", "",
    "", "", ""];

var gamer = {
 sign: '',
 wins: 0,
};

var comp = {
 sign: '',
 wins: 0,
};


var control = {
 roll: '',
 stop: false,
};


function Think() {
 if (control.roll === 'comp' && Win(gamer.sign) === false) {
  var emptSp = Empty();
  var movSp = Math.floor(Math.random() * (emptSp.length-1 - 0 + 1)) + 0;
  if (addSymb(comp.sign, emptSp[movSp]) === 'moved') {
   control.roll = 'gamer';
  }
   Win(comp.sign);
 }
}

function Empty() {
 var emptSp = [];
 for (var i=0; i< playField.length; i++) {
  if (playField[i] === "") {
   emptSp.push(i);
  }
 }
 return emptSp;
}



function Win(sign) {
 Horz(sign);
 Vert(sign);
 Diag(sign);
 Draw();
 
 if (control.stop === true) {
  init();
  return true;
 } else {
  return false;
 }
 
}

function Horz(sign) {
 if (playField[0] === sign &&
   playField[1] === sign &&
    playField[2] === sign) {
  control.stop = true;
 } else if(playField[3] === sign &&
      playField[4] === sign &&
      playField[5] === sign) {
  control.stop = true;
 } else if(playField[6] === sign &&
      playField[7] === sign &&
         playField[8] === sign) {
  control.stop = true;
 }
}

function Vert(sign) {
 if (playField[0] === sign &&
   playField[3] === sign &&
    playField[6] === sign) {
  control.stop = true;
 } else if(playField[1] === sign &&
      playField[4] === sign &&
      playField[7] === sign) {
  control.stop = true;
 } else if(playField[2] === sign &&
      playField[5] === sign &&
      playField[8] === sign) {
  control.stop = true;
 }
}

function Diag(sign) {
 if (playField[0] === sign &&
   playField[4] === sign &&
    playField[8] === sign) {
  control.stop = true;
 } else if(playField[2] === sign &&
      playField[4] === sign &&
      playField[6] === sign) {
  control.stop = true;
 }
}

function Draw() {
 if (Empty().length === 0) {
  control.stop = true;
 }
}


function clearField() {
 for (var i=0; i < playField.length; i++) {
   playField[i] = "";
   $('#cell' + i).text("");
   $('#cell' + i).removeClass('cell-X');
   $('#cell' + i).removeClass('cell-O');
 }
}


function init() {
 clearField()
 gamer.sign = '';
 comp.sign = '';
 control.roll = '';
 control.stop = false;
 $('.sign-select').show();
}

function signSelect(pSymbol, cSymbol) {
 gamer.sign = pSymbol;
 comp.sign = cSymbol;
 $('.sign-select').hide();
 
 if (gamer.sign === 'O') {
  control.roll = 'comp';
  setTimeout(function(){Think()}, 500);
 } else {
  control.roll = 'gamer';
 }
 
}


function addSymb(sign, pos) {
 if (playField[pos] === '') {
  playField[pos] = sign;
  $('#cell' + pos).addClass('cell-' + sign);
  $('#cell' + pos).text(sign);
  Win(sign);
  return 'moved';
 }
}

$('.cell').click(function(){
 if (control.roll === 'gamer') {
  var pos = this.getAttribute("data-position");
  if (addSymb(gamer.sign, pos) === 'moved') {
   control.roll = 'comp';
   setTimeout(function(){Think()}, 500);
  }
 }
 
 Win(gamer.sign);
 Win(comp.sign);
 
});

init();

See the Pen Tic Tac Toe Game by YaroslavW (@YaroslavW) on CodePen.