html Tic Tac Toe

Posted 2021-05-10

Tic Tac Toe
-----------
Exercise "Zipline " I4 for http://www.freecodecamp.com/ . It implements the minimax algorithm for the computer AI.

A [Pen](https://codepen.io/harunpehlivan/pen/paMRRW) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/paMRRW/license).

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

@import url(https://fonts.googleapis.com/css?family=Pacifico|Lato);

html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
 	font-size: 100%;
 	font: inherit;
 	vertical-align: middle;
   
   -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */

  /* Rules below not implemented in browsers yet */
  -o-user-select: none;
  user-select: none;
 }

body{
  font-family : lato,sans;
}


div.head h1{
  color:#444;
  font-size : 4em;
  margin : 30px auto;
  text-align : center;
}

.curs{
  font-family: 'Pacifico',serif;
}

.wrap{
  position:relative;
  margin:auto;
  margin-top: 40px;
  width : 400px;
  
}

.row{
  text-align:center;
  margin : 10px auto;
}

div.pop-up h3{
  text-align:center;
  padding-top: 5px;
  color: #444;
}

.inline{
  display:inline-block;
  margin:10px 5px;
  text-align:center;  
}

.big{
  font-size:2em;
  margin : 30px auto;
}

#sub{
  color: #888;
}

.el,.el-s,.el-o{
  vertical-align:middle;
  display: inline-block;
  height:110px;
  width:110px;
  font-size : 4.5em;
  background-color : #61b2a3;
  border-radius:20px;
  margin: auto 5px;
  color: #f8f8f8;
}

.el-o{
  margin-right: 20px;
}
.screen{
  display:none;
  background-color:rgba(10,10,10,0.6);
  position:fixed;
  width: 100%;
  height : 100%;
  top : 0;
}

.pop-up{
  position:absolute;
  width : 400px;
  height : 175px;
  border-radius: 20px;
  background-color:#fff;
  margin: 0 auto;
  top  : 250px;
  left : 50%;
  margin-left: -200px;
  box-shadow: 0px 5px 5px rgba(20,20,20, 0.7);
  display:none;
}

.win{
  background-color: #E6382B;
}

.tie{
  background-color: #a5bcae;
}

.free{
  cursor : pointer;
  background-color: #71A299;
}

.free:hover{
  background-color : #61b2a3;
}

/* Scaling for Mobile */
@media screen and (max-width: 450px){

  .head {
    display:none;
  }
  .wrap {
    top: 30px;
    
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    
    left: 50%;
    margin-left: -140px;
  }
  
  .pop-up {
    
    top: 100px;
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    
    left: 50%;
    margin-left: -140px;
  }
}

.txt {
  position: relative;
  top: 5px;
}

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

$(document).ready(function(){
  var active;
  var enabled;
  var symbols ={'x' : '<i class="fa fa-times txt"></i>',
                'o' : '<i class="fa fa-circle-o txt"></i>',
                '?' : '<i class="fa fa-question txt"></i>' };
  var human;
  var board;
  var moves;
  
  function toggleState(act){
    if (act === 'o')
      act = 'x';
    else
      act = 'o'
    return act;
  }
  
  function checkPatterns(pos){
    var row = Math.floor(pos/3);
    var col = pos%3;
    var diag = (col === row) ? 1 : ((col === 0 || col === 2) && (row === 2 || row === 0)) ? 2 : 0;
    var base = board[pos];
     if(board[row*3] === board[row*3 +1 ] && board[row*3] === board[row*3 + 2])
       return {pattern : 'r', number : row , symbol : base};
     if(board[col] === board[col + 3] && board[col] === board[col+6])
       return {pattern : 'c', number : col , symbol : base};
    if(diag === 1){
      if(board[0] === board[4] && board[0] === board[8])
        return {pattern : 'd', number : 1 , symbol : base};
      if(row == 1 && col == 1){
        if(board[2] === board[4] && board[4] === board[6])
          return {pattern : 'd', number : 2 , symbol : base};
      }
    }else if(diag ===2){
      if(board[2] === board[4] && board[4] === board[6])
        return {pattern : 'd', number : 2 , symbol : base};
    } 
    return false;
  }

  
function minimax(symbol,pos,level){
    var i, res;     
    var w = checkPatterns(pos);
    if(w){
      if(w.symbol === active)
        return 100 + level;
      else
        return -100 - level;
    } else if (level === 0 || moves === 9) {
      return 0;
    }
    if(symbol !== active){
      res = 1000;
      for(i=0;i<9;i++){
      if(board[i]==undefined)
        {
          board[i]=symbol; 
          moves++;
          res = Math.min(res, minimax(toggleState(symbol),i,level-1));
          moves--;
          board[i]=undefined;
        }
      }
    }else{
      res = -1000;
      for(i=0;i<9;i++){
      if(board[i]==undefined)
        {
          board[i]=symbol;     
          moves++;
          res = Math.max(res, minimax(toggleState(symbol),i,level-1));
          board[i]=undefined;
          moves--;
        }
      }
    }
    return res;
  }
  
  function computerMove(){
    var i;
    var max=-1000; 
    var mi=4;
    var t;
        
    for(i=0;i<9;i++)
      if(board[i]==undefined)
      {
        board[i]=active;
        moves++
        t=minimax(toggleState(active),i,7);
        if(t>max)
        {
          max=t;
          mi=i;
        }
        board[i]=undefined;
        moves--;
      }
    return mi;
  }
   
  
  function displayTie(){
    // TODO
    $('.out').text("TIE!");
    $('.el-o').append($(symbols['?'])).addClass('tie');
  }
  
  function boardClick(){
    if(enabled && moves < 9){
      $(this).append($(symbols[active])).off('click').removeClass('free');
      var pos = parseInt($(this).attr('id').slice(1));
      board[pos] = active;
      active = toggleState(active);
      moves++;
      var w = checkPatterns(pos);
      // game ends
      if (w){
        displayWin(w);
        enabled = false;
        setTimeout(function(){
          $('.screen').fadeIn();
          $('.console').fadeIn();
        },500);
        return;
      } else if (moves === 9){
        enabled = false;
        displayTie();
        setTimeout(function(){
          $('.screen').fadeIn();
          $('.console').fadeIn();
        },500);
        return;
      } else {
        human = !human;
        if(!human){
          enabled=false;
           setTimeout(function(){
             enabled=true;
             $('#n'+computerMove()).click();
           },500);
        }
        return;
      }
    }   
  }
  
  function displayWin(obj){
    $('.el').removeClass('free').off('click');
    switch (obj.pattern) {
      case 'r' :
        $('div.r'+obj.number+' div').addClass('win');
        break;
      case 'c' :
        $('.c'+obj.number).addClass('win');
        break;
      case 'd' :
        $('.d'+obj.number).addClass('win');
        break;       
    }
    $('.out').text('WINS!')
    $('.el-o').append($(symbols[obj.symbol])).addClass('win');
  }
  
  $('.el-s').click(function(){
    $('.screen').fadeOut();
    $('.select').fadeOut();
    if($(this).attr('id') === 'o'){
      human = false;
      enabled = false;
      setTimeout(function(){
        enabled = true;
        $('#n'+computerMove()).click();
      },500);
    }
  });
  
  function init(){
    $('.el').empty().off('click').click(boardClick).removeClass('win').addClass('free');
    $('.el-o').empty().removeClass('win tie');
    active = 'x';
    board = new Array(9);
    enabled = true;
    human = true;
    moves = 0;
    $('.screen').fadeIn();
    $('.select').fadeIn();
    $('.console').fadeOut();
  }

  $('.console').click(init).click();
});

<div class="head"><h1 class="curs">Tic Tac Toe</h1></div>
<div class="wrap">
  <div class="row r0">
    <div id='n0' class="el c0 d1"></div>
    <div id='n1' class="el c1"></div>
    <div id='n2' class="el c2 d2"></div>
  </div>
  <div class="row r1">
    <div id='n3' class="el c0"></div>
    <div id='n4' class="el c1 d1 d2"></div>
    <div id='n5' class="el c2"></div>
  </div>
  <div class="row r2">
    <div id='n6' class="el c0 d2"></div>
    <div id='n7' class="el c1"></div>
    <div id='n8' class="el c2 d1"></div>
  </div>
</div>

<div class="screen"></div>
  
<div class="console pop-up">
  <div class="row">
    <div class="el-o"></i></div>
    <h3 class="big inline out">WINS!</h3>
  </div>
  <h3 id="sub">click inside to play again</h3>
</div>

<div class="select pop-up">
  <h3>PLEASE SELECT:</h3>
  <div class="row">
    <div id='x' class="el-s free"><i class="fa fa-times txt"></i></div>
    <h3 class='inline'>OR</h3>
    <div id ='o' class="el-s free"><i class="fa fa-circle-o txt"></i></div>
  </div>
</div>