mritunjayupadhyay/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="main.css" media="screen" title="no title">
  </head>
  <body>
    <div class="container">
      <!-- <div class="">
        Computer Point: <span class="computer-point"></span>
      </div>
      <div class="">
        Your Point: <span class="your-point"></span>
      </div> -->
      <div class="tic-tac-toe">
        <div class="game">
          <span class="your-turn">Your Turn</span>
          <span class="computer-turn">Computer Turn</span>
          <span class="you-win-lose"></span>
        </div>

          <div class="game-board">
            <div class="no-of-player">
              <button type="button" name="button" class="start">start</button>
            </div>
            <div class="new-game-notification no-show">
              <button type="button" name="button" class="new-game">new game</button>
            </div>
            <div class="choose-x-o no-show">
              <p>
                Choose X or O
              </p>
              <div class="">
                <button type="button" name="button" class="myX"> X </button>
                <button type="button" name="button" class="myO"> O </button>
              </div>
            </div>
            <span class="vertical-line vertical-line1"></span>
            <span class="horizontal-line horizontal-line1"></span>
            <span class="vertical-line vertical-line2"></span>
            <span class="horizontal-line horizontal-line2"></span>
            <div class="box" id="1" data-key="1">

            </div>
            <div class="box" id="2" data-key="2">

            </div>
            <div class="box" id="3" data-key="3">

            </div>
            <div class="box" id="4" data-key="4">

            </div>
            <div class="box" id="5" data-key="5">

            </div>
            <div class="box" id="6" data-key="6">

            </div>
            <div class="box" id="7" data-key="7">

            </div>
            <div class="box" id="8" data-key="8">

            </div>
            <div class="box" id="9" data-key="9">

            </div>

          </div>

      </div>
    </div>


    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

## main.css
*{
  padding: 0;
  margin: 0;
}
.container{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /*background-image: url("http://i.imgur.com/1MycyuK.png");*/
  background-size: cover;
  font-family: 'Architects Daughter', Helvetica, sans-serif;
}
.game-board{
width: 300px;
height: 300px;
position: relative;
  background-color: purple;
  color: #fff;
  margin-top: -100px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  box-shadow: inset -1px 1px 7px rgba(0,0,0,.2), inset 1px -1px 7px rgba(0,0,0,.2), 1px 12px 5px rgba(0,0,0,.4), 4px 3px 8px rgba(0,0,0,.4), 5px 10px 10px rgba(0,0,0,.2), -5px 10px 10px rgba(0,0,0,.4);
}
.box{
  width: 30%;
  height: 30%;
  min-width: 80px;
  min-height: 80px;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vertical-line{
  position: absolute;
  width: 3px;
  top: 20px;
  bottom: 20px;
  background-color: #fff;
  display: inline-block;
  z-index: 100px;
}
.vertical-line1{
  left: 33%;
}
.vertical-line2{
  left: 66%;
}
.vertical-line3{
  left: 99%;
}
.horizontal-line1{
  top: 33%;
}
.horizontal-line2{
  top: 66%;
}
.horizontal-line3{
  top: 99%;
}
.horizontal-line{
  position: absolute;
  height: 3px;
  display: inline-block;
  background-color: #fff;
  left: 20px;
  right: 20px;
}
.choose-x-o{
  display: none;
}
.no-of-player, .new-game-notification, .choose-x-o{
  position: absolute;
  z-index: 500;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.choose-x-o{
  flex-direction: column;
}
.start, .new-game, .myX, .myO{
  background-color: transparent;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 1.5;
  color: #fff;
  border: 0;
  padding:5px 15px;
  border-radius: 30px;
  margin: 0 10px;
}
.start:hover, .new-game{
  border: 2px dashed #ddd;
  color: #ddd;
}
.active{
  display: inline-block;
}
.your-turn, .computer-turn{
  display: none;
}
.no-show{
  display: none;
}

## main.js
var allbox = document.querySelectorAll('.box');
var count = 0;
var game = {
  moves: [],
  scores: [],
  activeTurn: true,
  xPoint: 0,
  oPoint: 0,
  xSequence: [],
  oSequence: [],
  winningSequence: ['147', '123', '159', '456', '789', '258', '369', '357'],
  availableMoves: [],
  choice: null,
  winner: null,
  inState: null,
  computer: null,
  user: null
}

function newGame() {
  game.xPoint = 0;
  game.oPoint = 0;
  game.activeTurn = false;
  setTimeout(function(){ chooseYourCharacter(); }, 500);
  setTimeout(function() { clearGame(); }, 1000);
}
function chooseYourCharacter(){
  document.querySelector('.choose-x-o').classList.remove('no-show');
  document.querySelector('.myX').addEventListener('click',function(){
    game.computer = 'O';
    game.user = 'X';
    document.querySelector('.choose-x-o').classList.add('no-show');
  });
  document.querySelector('.myO').addEventListener('click',function(){
    game.computer = 'X';
    game.user = 'O';
    document.querySelector('.choose-x-o').classList.add('no-show');
  });
}
function clearGame() {
  game.xSequence = [];
  game.oSequence = [];
  game.availableMoves = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  game.moves = [];
  game.scores = [];
  game.choice = null;
  game.winner = null;
  document.getElementById("1").innerHTML = '';
  document.getElementById("2").innerHTML = '';
  document.getElementById("3").innerHTML = '';
  document.getElementById("4").innerHTML = '';
  document.getElementById("5").innerHTML = '';
  document.getElementById("6").innerHTML = '';
  document.getElementById("7").innerHTML = '';
  document.getElementById("8").innerHTML = '';
  document.getElementById("9").innerHTML = '';
  document.querySelector('.new-game').classList.remove('no-show');
  setTimeout(function() {
    document.querySelector('.new-game').classList.add('no-show');
  }, 1000);
  setTimeout(function() {
    startGame();
  }, 2000);
}

function startGame() {
  if (game.activeTurn) {
    computerTurn();
  }
}

function computerTurn() {
  var arr = game.availableMoves;
  var mychoice;
  var cloneOfA = JSON.parse(JSON.stringify(game));
  console.log(cloneOfA);
  if(game.availableMoves.length === 9){
    mychoice = Math.floor(Math.random() * 9) + 1;
  }
  else{
    miniMax(cloneOfA);
   mychoice = game.choice;
  }
  console.log(mychoice);
  document.getElementById(`${mychoice}`).innerHTML = game.computer;
  updateAvailableMoves(mychoice, game);
  updateXSequence(mychoice, game);
  console.log("Compuer Sequence" + game.xSequence);
  checkWin(game.computer, game);
  if (game.winner === game.computer) {
    game.xPoint = game.xPoint + 1;
    setTimeout(function() {
      alert('You lost');
    }, 1000);
    setTimeout(function() {
      clearGame();
    }, 2000);
  }
  if (game.availableMoves.length === 0) {
    setTimeout(function() {
      alert('The draw');
    }, 1000);
    setTimeout(function() {
      clearGame();
    }, 2000);
  }
  game.activeTurn = false;
}

function score(p) {
  if (p.winner === game.computer) {
    return 10;
  } else if (p.winner === game.user) {
    return -10;
  } else {
    return 0;
  }
}

function getNewState(pGame, move) {
  var nPgame = JSON.parse(JSON.stringify(pGame));
  var aMoves = nPgame.availableMoves.filter(d => {
    if (d === move) {
      return false;
    }
    return true;
  });
  nPgame.availableMoves = aMoves;
  if (nPgame.inState % 2 === 0) {
    updateXSequence(move, nPgame);
    nPgame.activeTurn = true;
  } else {
    updateOSequence(move, nPgame);
    nPgame.activeTurn = false;
  }
  return nPgame;
}

function giveIndexOfMax(arr) {
  var max = 0;
  for (var i = 1; i < arr.length; i++) {
    if (arr[max] < arr[i]) {
      max = i;
    }
  }
  return max;
}

function giveIndexOfMin(arr) {
  var min = 0;
  for (var i = 1; i < arr.length; i++) {
    if (arr[min] > arr[i]) {
      min = i;
    }
  }
  return min;
}

function miniMax(possiblegame) {
  count++;
  var newPossibleGame;
  var arr = [];
  var cloneOfGame = JSON.parse(JSON.stringify(possiblegame));
  if(cloneOfGame.inState === null){
    cloneOfGame.inState = 0;
  }
  else{
    cloneOfGame.inState = cloneOfGame.inState + 1;
  }
  checkForX(cloneOfGame);
  checkForO(cloneOfGame);
  if(cloneOfGame.winner === game.computer || cloneOfGame.winner === game.user || cloneOfGame.availableMoves.length === 0) {
    return score(cloneOfGame);
  }
  var moves = [];
  var scores = [];
  var allState = [];
  var indexOfMax;
  var indexOfMin;
  cloneOfGame.availableMoves.forEach(move => {
    arr.push(move);
  });
  arr.forEach(key => {
    newPossibleGame = getNewState(cloneOfGame, key);
    allState.push(newPossibleGame);
    scores.push(miniMax(newPossibleGame));
    moves.push(key);
  });
  console.log("this is score:",cloneOfGame.xSequence,cloneOfGame.oSequence,allState,arr,moves,scores);

  if (allState[0].activeTurn === true) {
    indexOfMax = giveIndexOfMax(scores);
    console.log(indexOfMax);
    console.log(moves[indexOfMax]);
    game.choice = moves[indexOfMax];
    return scores[indexOfMax];
  } else {
    indexOfMin = giveIndexOfMin(scores);
    game.choice = moves[indexOfMin];
    return scores[indexOfMin];
  }
}

function updateAvailableMoves(mychoice, obj) {
  var arr = obj.availableMoves.filter(function(d) {
    if (d === mychoice) {
      return false;
    }
    return true;
  });
  obj.availableMoves = arr;
}

function updateOSequence(mychoice, obj) {
  var m = [];
  if (obj.oSequence.length === 0) {
    m.push(mychoice.toString());
  }
  for (var i = 0; i < obj.oSequence.length; i++) {
    var str = obj.oSequence[i];
    for (var j = 0; j <= str.length; j++) {
      var a = str.substr(0, j);
      var b = mychoice.toString();
      var c = str.substr(j);
      var d = a.concat(b, c);
      m.push(d);
    }
  }
  obj.oSequence = m;
}

function updateXSequence(mychoice, obj) {
  var m = [];
  if (obj.xSequence.length === 0) {
    m.push(mychoice.toString());
  }

  for (var i = 0; i < obj.xSequence.length; i++) {
    var str = obj.xSequence[i];
    for (var j = 0; j <= str.length; j++) {
      var a = str.substr(0, j);
      var b = mychoice.toString();
      var c = str.substr(j);
      var d = a.concat(b, c);
      m.push(d);
    }
  }
  obj.xSequence = m;
}

function checkWin(d, obj) {
  var win = false;
  if (d === game.computer) {
    win = checkForX(obj);
  } else {
    win = checkForO(obj);
  }
  return win;
}

function checkForO(obj) {
  obj.oSequence.forEach(key => {
    obj.winningSequence.forEach(d => {
      if (key.includes(d)) {
        obj.winner = game.user;
        return true;
      }
    });
  });
  return false;
}

function checkForX(obj) {
  obj.xSequence.forEach(key => {
    obj.winningSequence.forEach(d => {
      if (key.includes(d)) {
        obj.winner = game.computer;
        return true;
      }
    });
  });
  return false;
}

function yourTurn(mychoice) {
  updateAvailableMoves(mychoice, game);
  updateOSequence(mychoice, game);
  checkWin(game.user, game);
  game.activeTurn = true;
  if (game.winner === game.user) {
    game.oPoint++;
    setTimeout(function() {
      alert('You win');
    }, 1000);
    setTimeout(function() {
      clearGame();
    }, 2000);
  } else {
    if (game.availableMoves.length === 0) {
      setTimeout(function() {
        alert('The draw');
      }, 1000);
      setTimeout(function() {
        clearGame();
      }, 2000);
    } else {
      startGame();
    }
  }
}

document.querySelector('.start').addEventListener('click', function() {
  document.querySelector('.no-of-player').style.display = 'none';
  newGame();
});

document.getElementById("1").addEventListener('click', function(e) {
  e.preventDefault();
  console.log('clicked');
  console.log(this.innerHTML);
  if (game.activeTurn === false) {
    if (this.innerHTML !== game.computer || this.innerHTML !== game.user) {
      this.innerHTML = game.user;
      setTimeout(function() {
        yourTurn(1);
      }, 1000);
    }
  }

});

document.getElementById('2').addEventListener('click', function(e) {
  e.preventDefault();
  if (game.activeTurn === false) {
    if (this.innerHTML !== game.computer || this.innerHTML !== game.user) {
      this.innerHTML = game.user;
      setTimeout(function() {
        yourTurn(2);
      }, 1000);
    }
  }
});

document.getElementById('3').addEventListener('click', function(e) {
  e.preventDefault();
  if (game.activeTurn === false) {
    if (this.innerHTML !== game.computer || this.innerHTML !== game.user) {
      this.innerHTML = game.user;
      setTimeout(function() {
        yourTurn(3);
      }, 1000);
    }
  }
});

document.getElementById('4').addEventListener('click', function(e) {
  e.preventDefault();
  if (game.activeTurn === false) {
    if (this.innerHTML !== game.computer || this.innerHTML !== game.user) {
      this.innerHTML = game.user;
      setTimeout(function() {
        yourTurn(4);
      }, 1000);
    }
  }
});

document.getElementById('5').addEventListener('click', function(e) {
  e.preventDefault();
  if (game.activeTurn === false) {
    if (this.innerHTML !== game.computer || this.innerHTML !== game.user) {
      this.innerHTML = game.user;
      setTimeout(function() {
        yourTurn(5);
      }, 1000);
    }
  }
});

document.getElementById('6').addEventListener('click', function(e) {
  e.preventDefault();
  if (game.activeTurn === false) {
    if (this.innerHTML !== game.computer || this.innerHTML !== game.user) {
      this.innerHTML = game.user;
      setTimeout(function() {
        yourTurn(6);
      }, 1000);
    }
  }
});

document.getElementById('7').addEventListener('click', function(e) {
  e.preventDefault();
  if (game.activeTurn === false) {
    if (this.innerHTML !== game.computer || this.innerHTML !== game.user) {
      this.innerHTML = game.user;
      setTimeout(function() {
        yourTurn(7);
      }, 1000);
    }
  }
});

document.getElementById('8').addEventListener('click', function(e) {
  e.preventDefault();
  if (game.activeTurn === false) {
    if (this.innerHTML !== game.computer || this.innerHTML !== game.user) {
      this.innerHTML = game.user;
      setTimeout(function() {
        yourTurn(8);
      }, 1000);
    }
  }
});

document.getElementById('9').addEventListener('click', function(e) {
  e.preventDefault();
  if (game.activeTurn === false) {
    if (this.innerHTML !== game.computer || this.innerHTML !== game.user) {
      this.innerHTML = game.user;
      setTimeout(function() {
        yourTurn(9);
      }, 1000);
    }
  }
});


//
// document.querySelector('.computer-point').innerHTML = game.xPoint;
// document.querySelector('.your-point').innerHTML = game.oPoint;
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Tic Tac Toe</title>
	<link rel="stylesheet" href="main.css" media="screen" title="no title">
	</head>
	<body>
	<div class="container">
	<!-- <div class="">
	Computer Point: <span class="computer-point"></span>
	</div>
	<div class="">
	Your Point: <span class="your-point"></span>
	</div> -->
	<div class="tic-tac-toe">
	<div class="game">
	<span class="your-turn">Your Turn</span>
	<span class="computer-turn">Computer Turn</span>
	<span class="you-win-lose"></span>
	</div>

	<div class="game-board">
	<div class="no-of-player">
	<button type="button" name="button" class="start">start</button>
	</div>
	<div class="new-game-notification no-show">
	<button type="button" name="button" class="new-game">new game</button>
	</div>
	<div class="choose-x-o no-show">
	<p>
	Choose X or O
	</p>
	<div class="">
	<button type="button" name="button" class="myX"> X </button>
	<button type="button" name="button" class="myO"> O </button>
	</div>
	</div>
	<span class="vertical-line vertical-line1"></span>
	<span class="horizontal-line horizontal-line1"></span>
	<span class="vertical-line vertical-line2"></span>
	<span class="horizontal-line horizontal-line2"></span>
	<div class="box" id="1" data-key="1">

	</div>
	<div class="box" id="2" data-key="2">

	</div>
	<div class="box" id="3" data-key="3">

	</div>
	<div class="box" id="4" data-key="4">

	</div>
	<div class="box" id="5" data-key="5">

	</div>
	<div class="box" id="6" data-key="6">

	</div>
	<div class="box" id="7" data-key="7">

	</div>
	<div class="box" id="8" data-key="8">

	</div>
	<div class="box" id="9" data-key="9">

	</div>

	</div>

	</div>
	</div>



	<script type="text/javascript" src="main.js"></script>
	</body>
	</html>
	*{
	padding: 0;
	margin: 0;
	}
	.container{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	/background-image: url("http://i.imgur.com/1MycyuK.png");/
	background-size: cover;
	font-family: 'Architects Daughter', Helvetica, sans-serif;
	}
	.game-board{
	width: 300px;
	height: 300px;
	position: relative;
	background-color: purple;
	color: #fff;
	margin-top: -100px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	box-shadow: inset -1px 1px 7px rgba(0,0,0,.2), inset 1px -1px 7px rgba(0,0,0,.2), 1px 12px 5px rgba(0,0,0,.4), 4px 3px 8px rgba(0,0,0,.4), 5px 10px 10px rgba(0,0,0,.2), -5px 10px 10px rgba(0,0,0,.4);
	}
	.box{
	width: 30%;
	height: 30%;
	min-width: 80px;
	min-height: 80px;
	font-size: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.vertical-line{
	position: absolute;
	width: 3px;
	top: 20px;
	bottom: 20px;
	background-color: #fff;
	display: inline-block;
	z-index: 100px;
	}
	.vertical-line1{
	left: 33%;
	}
	.vertical-line2{
	left: 66%;
	}
	.vertical-line3{
	left: 99%;
	}
	.horizontal-line1{
	top: 33%;
	}
	.horizontal-line2{
	top: 66%;
	}
	.horizontal-line3{
	top: 99%;
	}
	.horizontal-line{
	position: absolute;
	height: 3px;
	display: inline-block;
	background-color: #fff;
	left: 20px;
	right: 20px;
	}
	.choose-x-o{
	display: none;
	}
	.no-of-player, .new-game-notification, .choose-x-o{
	position: absolute;
	z-index: 500;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.choose-x-o{
	flex-direction: column;
	}
	.start, .new-game, .myX, .myO{
	background-color: transparent;
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 1.5;
	color: #fff;
	border: 0;
	padding:5px 15px;
	border-radius: 30px;
	margin: 0 10px;
	}
	.start:hover, .new-game{
	border: 2px dashed #ddd;
	color: #ddd;
	}
	.active{
	display: inline-block;
	}
	.your-turn, .computer-turn{
	display: none;
	}
	.no-show{
	display: none;
	}
	var allbox = document.querySelectorAll('.box');
	var count = 0;
	var game = {
	moves: [],
	scores: [],
	activeTurn: true,
	xPoint: 0,
	oPoint: 0,
	xSequence: [],
	oSequence: [],
	winningSequence: ['147', '123', '159', '456', '789', '258', '369', '357'],
	availableMoves: [],
	choice: null,
	winner: null,
	inState: null,
	computer: null,
	user: null
	}

	function newGame() {
	game.xPoint = 0;
	game.oPoint = 0;
	game.activeTurn = false;
	setTimeout(function(){ chooseYourCharacter(); }, 500);
	setTimeout(function() { clearGame(); }, 1000);
	}
	function chooseYourCharacter(){
	document.querySelector('.choose-x-o').classList.remove('no-show');
	document.querySelector('.myX').addEventListener('click',function(){
	game.computer = 'O';
	game.user = 'X';
	document.querySelector('.choose-x-o').classList.add('no-show');
	});
	document.querySelector('.myO').addEventListener('click',function(){
	game.computer = 'X';
	game.user = 'O';
	document.querySelector('.choose-x-o').classList.add('no-show');
	});
	}
	function clearGame() {
	game.xSequence = [];
	game.oSequence = [];
	game.availableMoves = [1, 2, 3, 4, 5, 6, 7, 8, 9];
	game.moves = [];
	game.scores = [];
	game.choice = null;
	game.winner = null;
	document.getElementById("1").innerHTML = '';
	document.getElementById("2").innerHTML = '';
	document.getElementById("3").innerHTML = '';
	document.getElementById("4").innerHTML = '';
	document.getElementById("5").innerHTML = '';
	document.getElementById("6").innerHTML = '';
	document.getElementById("7").innerHTML = '';
	document.getElementById("8").innerHTML = '';
	document.getElementById("9").innerHTML = '';
	document.querySelector('.new-game').classList.remove('no-show');
	setTimeout(function() {
	document.querySelector('.new-game').classList.add('no-show');
	}, 1000);
	setTimeout(function() {
	startGame();
	}, 2000);
	}

	function startGame() {
	if (game.activeTurn) {
	computerTurn();
	}
	}

	function computerTurn() {
	var arr = game.availableMoves;
	var mychoice;
	var cloneOfA = JSON.parse(JSON.stringify(game));
	console.log(cloneOfA);
	if(game.availableMoves.length === 9){
	mychoice = Math.floor(Math.random() * 9) + 1;
	}
	else{
	miniMax(cloneOfA);
	mychoice = game.choice;
	}
	console.log(mychoice);
	document.getElementById(`${mychoice}`).innerHTML = game.computer;
	updateAvailableMoves(mychoice, game);
	updateXSequence(mychoice, game);
	console.log("Compuer Sequence" + game.xSequence);
	checkWin(game.computer, game);
	if (game.winner === game.computer) {
	game.xPoint = game.xPoint + 1;
	setTimeout(function() {
	alert('You lost');
	}, 1000);
	setTimeout(function() {
	clearGame();
	}, 2000);
	}
	if (game.availableMoves.length === 0) {
	setTimeout(function() {
	alert('The draw');
	}, 1000);
	setTimeout(function() {
	clearGame();
	}, 2000);
	}
	game.activeTurn = false;
	}

	function score(p) {
	if (p.winner === game.computer) {
	return 10;
	} else if (p.winner === game.user) {
	return -10;
	} else {
	return 0;
	}
	}

	function getNewState(pGame, move) {
	var nPgame = JSON.parse(JSON.stringify(pGame));
	var aMoves = nPgame.availableMoves.filter(d => {
	if (d === move) {
	return false;
	}
	return true;
	});
	nPgame.availableMoves = aMoves;
	if (nPgame.inState % 2 === 0) {
	updateXSequence(move, nPgame);
	nPgame.activeTurn = true;
	} else {
	updateOSequence(move, nPgame);
	nPgame.activeTurn = false;
	}
	return nPgame;
	}

	function giveIndexOfMax(arr) {
	var max = 0;
	for (var i = 1; i < arr.length; i++) {
	if (arr[max] < arr[i]) {
	max = i;
	}
	}
	return max;
	}

	function giveIndexOfMin(arr) {
	var min = 0;
	for (var i = 1; i < arr.length; i++) {
	if (arr[min] > arr[i]) {
	min = i;
	}
	}
	return min;
	}

	function miniMax(possiblegame) {
	count++;
	var newPossibleGame;
	var arr = [];
	var cloneOfGame = JSON.parse(JSON.stringify(possiblegame));
	if(cloneOfGame.inState === null){
	cloneOfGame.inState = 0;
	}
	else{
	cloneOfGame.inState = cloneOfGame.inState + 1;
	}
	checkForX(cloneOfGame);
	checkForO(cloneOfGame);
	if(cloneOfGame.winner === game.computer \|\| cloneOfGame.winner === game.user \|\| cloneOfGame.availableMoves.length === 0) {
	return score(cloneOfGame);
	}
	var moves = [];
	var scores = [];
	var allState = [];
	var indexOfMax;
	var indexOfMin;
	cloneOfGame.availableMoves.forEach(move => {
	arr.push(move);
	});
	arr.forEach(key => {
	newPossibleGame = getNewState(cloneOfGame, key);
	allState.push(newPossibleGame);
	scores.push(miniMax(newPossibleGame));
	moves.push(key);
	});
	console.log("this is score:",cloneOfGame.xSequence,cloneOfGame.oSequence,allState,arr,moves,scores);

	if (allState[0].activeTurn === true) {
	indexOfMax = giveIndexOfMax(scores);
	console.log(indexOfMax);
	console.log(moves[indexOfMax]);
	game.choice = moves[indexOfMax];
	return scores[indexOfMax];
	} else {
	indexOfMin = giveIndexOfMin(scores);
	game.choice = moves[indexOfMin];
	return scores[indexOfMin];
	}
	}

	function updateAvailableMoves(mychoice, obj) {
	var arr = obj.availableMoves.filter(function(d) {
	if (d === mychoice) {
	return false;
	}
	return true;
	});
	obj.availableMoves = arr;
	}

	function updateOSequence(mychoice, obj) {
	var m = [];
	if (obj.oSequence.length === 0) {
	m.push(mychoice.toString());
	}
	for (var i = 0; i < obj.oSequence.length; i++) {
	var str = obj.oSequence[i];
	for (var j = 0; j <= str.length; j++) {
	var a = str.substr(0, j);
	var b = mychoice.toString();
	var c = str.substr(j);
	var d = a.concat(b, c);
	m.push(d);
	}
	}
	obj.oSequence = m;
	}

	function updateXSequence(mychoice, obj) {
	var m = [];
	if (obj.xSequence.length === 0) {
	m.push(mychoice.toString());
	}

	for (var i = 0; i < obj.xSequence.length; i++) {
	var str = obj.xSequence[i];
	for (var j = 0; j <= str.length; j++) {
	var a = str.substr(0, j);
	var b = mychoice.toString();
	var c = str.substr(j);
	var d = a.concat(b, c);
	m.push(d);
	}
	}
	obj.xSequence = m;
	}

	function checkWin(d, obj) {
	var win = false;
	if (d === game.computer) {
	win = checkForX(obj);
	} else {
	win = checkForO(obj);
	}
	return win;
	}

	function checkForO(obj) {
	obj.oSequence.forEach(key => {
	obj.winningSequence.forEach(d => {
	if (key.includes(d)) {
	obj.winner = game.user;
	return true;
	}
	});
	});
	return false;
	}

	function checkForX(obj) {
	obj.xSequence.forEach(key => {
	obj.winningSequence.forEach(d => {
	if (key.includes(d)) {
	obj.winner = game.computer;
	return true;
	}
	});
	});
	return false;
	}

	function yourTurn(mychoice) {
	updateAvailableMoves(mychoice, game);
	updateOSequence(mychoice, game);
	checkWin(game.user, game);
	game.activeTurn = true;
	if (game.winner === game.user) {
	game.oPoint++;
	setTimeout(function() {
	alert('You win');
	}, 1000);
	setTimeout(function() {
	clearGame();
	}, 2000);
	} else {
	if (game.availableMoves.length === 0) {
	setTimeout(function() {
	alert('The draw');
	}, 1000);
	setTimeout(function() {
	clearGame();
	}, 2000);
	} else {
	startGame();
	}
	}
	}

	document.querySelector('.start').addEventListener('click', function() {
	document.querySelector('.no-of-player').style.display = 'none';
	newGame();
	});

	document.getElementById("1").addEventListener('click', function(e) {
	e.preventDefault();
	console.log('clicked');
	console.log(this.innerHTML);
	if (game.activeTurn === false) {
	if (this.innerHTML !== game.computer \|\| this.innerHTML !== game.user) {
	this.innerHTML = game.user;
	setTimeout(function() {
	yourTurn(1);
	}, 1000);
	}
	}

	});

	document.getElementById('2').addEventListener('click', function(e) {
	e.preventDefault();
	if (game.activeTurn === false) {
	if (this.innerHTML !== game.computer \|\| this.innerHTML !== game.user) {
	this.innerHTML = game.user;
	setTimeout(function() {
	yourTurn(2);
	}, 1000);
	}
	}
	});

	document.getElementById('3').addEventListener('click', function(e) {
	e.preventDefault();
	if (game.activeTurn === false) {
	if (this.innerHTML !== game.computer \|\| this.innerHTML !== game.user) {
	this.innerHTML = game.user;
	setTimeout(function() {
	yourTurn(3);
	}, 1000);
	}
	}
	});

	document.getElementById('4').addEventListener('click', function(e) {
	e.preventDefault();
	if (game.activeTurn === false) {
	if (this.innerHTML !== game.computer \|\| this.innerHTML !== game.user) {
	this.innerHTML = game.user;
	setTimeout(function() {
	yourTurn(4);
	}, 1000);
	}
	}
	});

	document.getElementById('5').addEventListener('click', function(e) {
	e.preventDefault();
	if (game.activeTurn === false) {
	if (this.innerHTML !== game.computer \|\| this.innerHTML !== game.user) {
	this.innerHTML = game.user;
	setTimeout(function() {
	yourTurn(5);
	}, 1000);
	}
	}
	});

	document.getElementById('6').addEventListener('click', function(e) {
	e.preventDefault();
	if (game.activeTurn === false) {
	if (this.innerHTML !== game.computer \|\| this.innerHTML !== game.user) {
	this.innerHTML = game.user;
	setTimeout(function() {
	yourTurn(6);
	}, 1000);
	}
	}
	});

	document.getElementById('7').addEventListener('click', function(e) {
	e.preventDefault();
	if (game.activeTurn === false) {
	if (this.innerHTML !== game.computer \|\| this.innerHTML !== game.user) {
	this.innerHTML = game.user;
	setTimeout(function() {
	yourTurn(7);
	}, 1000);
	}
	}
	});

	document.getElementById('8').addEventListener('click', function(e) {
	e.preventDefault();
	if (game.activeTurn === false) {
	if (this.innerHTML !== game.computer \|\| this.innerHTML !== game.user) {
	this.innerHTML = game.user;
	setTimeout(function() {
	yourTurn(8);
	}, 1000);
	}
	}
	});

	document.getElementById('9').addEventListener('click', function(e) {
	e.preventDefault();
	if (game.activeTurn === false) {
	if (this.innerHTML !== game.computer \|\| this.innerHTML !== game.user) {
	this.innerHTML = game.user;
	setTimeout(function() {
	yourTurn(9);
	}, 1000);
	}
	}
	});


	//
	// document.querySelector('.computer-point').innerHTML = game.xPoint;
	// document.querySelector('.your-point').innerHTML = game.oPoint;