PLAY TIC TAC TOE WITH AI

In this example below you will see how to do a PLAY TIC TAC TOE WITH AI with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by roblegaspi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright roblegaspi ©
  • HTML
  • CSS
  • JavaScript
    <div class="main-wrapper">
	<div id="wrapper">
		<div id="option">

			<h1 id="status"></h1> <!-- status -->
			<legend id="title"><h1>
			<span class="b2">Play</span>
			<span class="b1">Tic</span>
			<span class="b2">Tac</span>
			<span class="b1">Toe</span>
			<span class="b2">with:</span>
			</h1></legend>
      <legend id="title2"><h1>
        Pick your character:</h1></legend>
			<div id="player--selector">
				<div id="button-group1">
					<button class="select-enemy" id="ai" value="1">AI</button>
					<button class="select-enemy" id="play-with-players" value="2">Other Player</button>
				</div>

				<div id="button-group2">
					<button class="select-enemy" id="o">O</button>
					<button class="select-enemy" id="x">X</button>
					<button id="back">back</button>

				</div>
			</div>
		</div>
		<div class="tic-box">
		<h3> <em><span id="current_player"></span></em></h3>
			<div id="tic">
  <input type="button" class="tictac" value=" " id="btn1">
  <input type="button" class="tictac" value=" " id="btn2">
  <input type="button" class="tictac" value=" " id="btn3"><br />
  <input type="button" class="tictac" value=" " id="btn4">
  <input type="button" class="tictac" value=" " id="btn5">
  <input type="button" class="tictac" value=" " id="btn6"><br />
  <input type="button" class="tictac" value=" " id="btn7">
  <input type="button" class="tictac" value=" " id="btn8">
  <input type="button" class="tictac" value=" " id="btn9">
			</div>

			<button class="select-enemy" id="reset">Reset</button>
		</div>

	</div>
</div>


/*Downloaded from https://www.codeseek.co/roblegaspi/play-tic-tac-toe-with-ai-pNjPBv */
    #title2 {
  display: none;  
}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			width: 100vw;
			flex-direction: column;
			background: #ff7473;
			color: #34314c;
			font-family: 'Abril Fatface', cursive;
			overflow: hidden;
		}

		h1 {
			font-size: 82px;
			margin-bottom: -20px;
		}
		.tictac {
			width: 100px;
			height: 100px;
			margin: 5px;
			background: #ffc952;
			border: 1px solid #fff;
			box-shadow: 0 0 2px 0 #47b8e0;
			color: #34314c;
			font-weight: bolder;
			font-size: 30px;
		}

		.select-enemy {
			font-family: 'Pacifico', cursive;
			margin:30px;
			width: 135px;
			height: 50px;
			color: #222;
			font-weight: bold;
			background: #ffc952;
			border: 1px solid #fff;
			box-shadow: 0 0 2px 0 #47b8e0;
			color: #34314c;
			border-radius: 5px;
			margin-bottom: 20px;
		}

		button, input {
			cursor: pointer;
      transition: all .1s ease-in-out;
		}

		button:hover, input:hover {
			background: #e69d00;
		}

		.main-wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			height: 90vh;
			width: 100%;
			overflow: hidden;
		}

		#wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			height: 90vh;
			width: 100%;
			position: relative;
			transition: .5s ease-in-out;
		}

		#option {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 1;
			transition: .5s ease-in-out;
		}

		.tic-box {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: relative;
			top: 100%;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
			transition: .5s ease-in-out;
		}

		.wrapper-active {
			transform: translateY(-100%);
		}

		.wrapper-active #option {
			opacity: 0;
		}

		.wrapper-active .tic-box {
			opacity: 1;
		}
		#title,
		#status {
			text-align: center;
			white-space : nowrap;
		}
		#status {
			animation: pulse .5s ease-in-out infinite;
			animation-direction: both;
		  text-shadow: 3px 3px 0 #fff,
			-1px -1px 0 #fff,
			 1px -1px 0 #fff,
			 -1px 1px 0 #fff,
			  1px 1px 0 #fff;
		}

		@keyframes pulse {
			from {
				transform: scale(1);
			}
			to {

				transform: scale(1.03);
			}
		}
		.b1 {
			color:#fff;
			  text-shadow: 1px 1px 0 #34314c,
				-1px -1px 0 #34314c,
				 1px -1px 0 #34314c,
				 -1px 1px 0 #34314c,
				  1px 1px 0 #34314c;
		}
		.b2 {
			color:#34314c;
			  text-shadow: 1px 1px 0 #fff,
				-1px -1px 0 #fff,
				 1px -1px 0 #fff,
				 -1px 1px 0 #fff,
				  1px 1px 0 #fff;
		}
		#x,#o {
			font-family: 'Abril Fatface', cursive;
		}

		#player--selector {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			height: 90vh;
			width: 300px;
			position: relative;
			transition: .5s ease-in-out;
		}

		#button-group1 {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 1;
			transition: .5s ease-in-out;
		}

		#button-group2 {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			top: 0;
			left: 100%;
			right: 0;
			bottom: 0;
			opacity: 0;
			transition: .5s ease-in-out;
		}

		.player--selector--active {
			transform: translateX(-100%);
		}

		.player--selector--active #button-group1 {
			opacity: 0;
		}

		.player--selector--active #button-group2 {
			opacity: 1;
		}

		#back {
			background: transparent;
			font-weight: bold;
			color: #fff;
			margin-top: -50%;
			border: 1px solid #fff;
			border-radius: 5px;
			padding: 5px 10px;
		}



/*Downloaded from https://www.codeseek.co/roblegaspi/play-tic-tac-toe-with-ai-pNjPBv */
    var wrapper = document.getElementById("wrapper");
var button_group = document.getElementById("player--selector");



var sqr1;
var sqr2;
var sqr3;
var sqr4;
var sqr5;
var sqr6;
var sqr7;
var sqr8;
var sqr9;
var sqr1T = 0;
var sqr2T = 0;
var sqr3T = 0;
var sqr4T = 0;
var sqr5T = 0;
var sqr6T = 0;
var sqr7T = 0;
var sqr8T = 0;
var sqr9T = 0;
var moveCount = 0;
var turn = 0;
var mode = 2;
var player1 = 'X';
var player2 = 'O';
var status = '';

function setStatus(curr_status) {
	status = curr_status;
	var color = status === "You Lose!" || status === "Draw" ? "#AF4034" : '#3ac569';
	document.getElementById("status").innerHTML = curr_status ? "<span style='color:"+color+"'>" + "-->" + status + "<--" + "</span>" :'';
}
function vari() {
	for(var i=1;i<=9;i++)
		window['sqr'+i] = document.getElementById("btn"+i).value;
}

function check() {
  if(sqr1 === player1 && sqr2 === player1 && sqr3 === player1) {
    setStatus("You Win!");
    reset();
  }
  else if(sqr4 === player1 && sqr5 === player1 && sqr6 === player1)
  {
    setStatus("You Win!");
    reset();
  }
  else if(sqr7 === player1 && sqr8 === player1 && sqr9 === player1)
  {
    setStatus("You Win!");
    reset();
  }
  else if(sqr1 === player1 && sqr5 === player1 && sqr9 === player1)
  {
    setStatus("You Win!");
    reset();
  }
  else if(sqr1 === player1 && sqr4 === player1 && sqr7 === player1)
  {
    setStatus("You Win!");
    reset();
  }
  else if(sqr2 === player1 && sqr5 === player1 && sqr8 === player1)
  {
    setStatus("You Win!");
    reset();
  }
  else if(sqr3 === player1 && sqr6 === player1 && sqr9 === player1)
  {
    setStatus("You Win!");
    reset();
  }
  else if(sqr1 === player1 && sqr5 === player1 && sqr9 === player1)
  {
    setStatus("You Win!");
    reset();
  }
  else if(sqr3 === player1 && sqr5 === player1 && sqr7 === player1)
  {
    setStatus("You Win!");
    reset();
  }
  else
  {
    winCheck();
    check2();
    drawCheck();
  }
}

function check2()
{
  vari();
  drawCheck();
  if(sqr1 === player2 && sqr2 === player2 && sqr3 === player2)
  {
    setStatus("You Lose!");
    reset();
  }
  else if(sqr4 === player2 && sqr5 === player2 && sqr6 === player2)
  {
    setStatus("You Lose!");
    reset();
  }
  else if(sqr7 === player2 && sqr8 === player2 && sqr9 === player2)
  {
    setStatus("You Lose!");
    reset();
  }
  else if(sqr1 === player2 && sqr5 === player2 && sqr9 === player2)
  {
    setStatus("You Lose!");
    reset();
  }
  else if(sqr1 === player2 && sqr4 === player2 && sqr7 === player2)
  {
    setStatus("You Lose!");
    reset();
  }
  else if(sqr2 === player2 && sqr5 === player2 && sqr8 === player2)
  {
    setStatus("You Lose!");
    reset();
  }
  else if(sqr3 === player2 && sqr6 === player2 && sqr9 === player2)
  {
    setStatus("You Lose!");
    reset();
  }
  else if(sqr1 === player2 && sqr5 === player2 && sqr9 === player2)
  {
    setStatus("You Lose!");
    reset();
  }
  else if(sqr3 === player2 && sqr5 === player2 && sqr7 === player2)
  {
    setStatus("You Lose!");
    reset();
  }
}

function player1Check()
{
  if(sqr1 === player1 && sqr2 === player1 && sqr3 === player1)
  {
    setStatus("Player 1 wins!");
    reset();
  }
  else if(sqr4 === player1 && sqr5 === player1 && sqr6 === player1)
  {
    setStatus("Player 1 wins!");
    reset();
  }
  else if(sqr7 === player1 && sqr8 === player1 && sqr9 === player1)
  {
    setStatus("Player 1 wins!");
    reset();
  }
  else if(sqr1 === player1 && sqr5 === player1 && sqr9 === player1)
  {
    setStatus("Player 1 wins!");
    reset();
  }
  else if(sqr1 === player1 && sqr4 === player1 && sqr7 === player1)
  {
    setStatus("Player 1 wins!");
    reset();
  }
  else if(sqr2 === player1 && sqr5 === player1 && sqr8 === player1)
  {
    setStatus("Player 1 wins!");
    reset();
  }
  else if(sqr3 === player1 && sqr6 === player1 && sqr9 === player1)
  {
    setStatus("Player 1 wins!");
    reset();
  }
  else if(sqr1 === player1 && sqr5 === player1 && sqr9 === player1)
  {
    setStatus("Player 1 wins!");
    reset();
  }
  else if(sqr3 === player1 && sqr5 === player1 && sqr7 === player1)
  {
    setStatus("Player 1 wins!");
    reset();
  }
  else
  {
    player2Check();
    drawCheck();
  }
}

function player2Check()
{
  vari();
  drawCheck();
  if(sqr1 === player2 && sqr2 === player2 && sqr3 === player2)
  {
    setStatus("Player 2 wins!");
    reset();
  }
  else if(sqr4 === player2 && sqr5 === player2 && sqr6 === player2)
  {
    setStatus("Player 2 wins!");
    reset();
  }
  else if(sqr7 === player2 && sqr8 === player2 && sqr9 === player2)
  {
    setStatus("Player 2 wins!");
    reset();
  }
  else if(sqr1 === player2 && sqr5 === player2 && sqr9 === player2)
  {
    setStatus("Player 2 wins!");
    reset();
  }
  else if(sqr1 === player2 && sqr4 === player2 && sqr7 === player2)
  {
    setStatus("Player 2 wins!");
    reset();
  }
  else if(sqr2 === player2 && sqr5 === player2 && sqr8 === player2)
  {
    setStatus("Player 2 wins!");
    reset();
  }
  else if(sqr3 === player2 && sqr6 === player2 && sqr9 === player2)
  {
    setStatus("Player 2 wins!");
    reset();
  }
  else if(sqr1 === player2 && sqr5 === player2 && sqr9 === player2)
  {
    setStatus("Player 2 wins!");
    reset();
  }
  else if(sqr3 === player2 && sqr5 === player2 && sqr7 === player2)
  {
    setStatus("Player 2 wins!");
    reset();
  }
}

function drawCheck()
{
  vari();
  moveCount = sqr1T + sqr2T + sqr3T + sqr4T + sqr5T + sqr6T + sqr7T + sqr8T + sqr9T;
  if(moveCount === 9)
  {
    reset();
    setStatus("Draw");
  }
}

function winCheck()
{
  check2();
  if(sqr1 === player2 && sqr2 === player2 && sqr3T === 0 && turn === 1)
  {
    document.getElementById("btn3").value = player2;
    sqr3T = 1;
    turn = 0;
  }
  else if(sqr2 === player2 && sqr3 === player2 && sqr1T === 0 && turn === 1)
  {
    document.getElementById("btn1").value = player2;
    sqr1T = 1;
    turn = 0;
  }
  else if(sqr4 === player2 && sqr5 === player2 && sqr6T === 0 && turn === 1)
  {
    document.getElementById("btn6").value = player2;
    sqr6T = 1;
    turn = 0;
  }
  else if(sqr5 === player2 && sqr6 === player2 && sqr4T === 0 && turn === 1)
  {
    document.getElementById("btn4").value = player2;
    sqr4T = 1;
    turn = 0;
  }
  else if(sqr7 === player2 && sqr8 === player2 && sqr9T === 0 && turn === 1)
  {
    document.getElementById("btn9").value = player2;
    sqr9T = 1;
    turn = 0;
  }
  else if(sqr8 === player2 && sqr9 === player2 && sqr7T === 0 && turn === 1)
  {
    document.getElementById("btn7").value = player2;
    sqr7T = 1;
    turn = 0;
  }
  else if(sqr1 === player2 && sqr5 === player2 && sqr9T === 0 && turn === 1)
  {
    document.getElementById("btn9").value = player2;
    sqr9T = 1;
    turn = 0;
  }
  else if(sqr5 === player2 && sqr9 === player2 && sqr1T === 0 && turn === 1)
  {
    document.getElementById("btn1").value = player2;
    sqr1T = 1;
    turn = 0;
  }
  else if(sqr3 === player2 && sqr5 === player2 && sqr7T === 0 && turn === 1)
  {
    document.getElementById("btn7").value = player2;
    sqr7T = 1;
    turn = 0;
  }
  else if(sqr7 === player2 && sqr5 === player2 && sqr3T === 0 && turn === 1)
  {
    document.getElementById("btn3").value = player2;
    sqr3T = 1;
    turn = 0;
  }
  else if(sqr1 === player2 && sqr3 === player2 && sqr2T === 0 && turn === 1)
  {
    document.getElementById("btn2").value = player2;
    sqr2T = 1;
    turn = 0;
  }
  else if(sqr4 === player2 && sqr6 === player2 && sqr5T === 0 && turn === 1)
  {
    document.getElementById("btn5").value = player2;
    sqr5T = 1;
    turn = 0;
  }
  else if(sqr7 === player2 && sqr9 === player2 && sqr8T === 0 && turn === 1)
  {
    document.getElementById("btn8").value = player2;
    sqr8T = 1;
    turn = 0;
  }
  else if(sqr1 === player2 && sqr7 === player2 && sqr4T === 0 && turn === 1)
  {
    document.getElementById("btn4").value = player2;
    sqr4T = 1;
    turn = 0;
  }
  else if(sqr2 === player2 && sqr8 === player2 && sqr5T === 0 && turn === 1)
  {
    document.getElementById("btn5").value = player2;
    sqr5T = 1;
    turn = 0;
  }
  else if(sqr3 === player2 && sqr9 === player2 && sqr6T === 0 && turn === 1)
  {
    document.getElementById("btn6").value = player2;
    sqr6T = 1;
    turn = 0;
  }
  else if(sqr1 === player2 && sqr5 === player2 && sqr9T === 0 && turn === 1)
  {
    document.getElementById("btn9").value = player2;
    sqr9T = 1;
    turn = 0;
  }
  else if(sqr4 === player2 && sqr7 === player2 && sqr1T === 0 && turn === 1)
  {
    document.getElementById("btn1").value = player2;
    sqr1T = 1;
    turn = 0;
  }
  else if(sqr5 === player2 && sqr8 === player2 && sqr2T === 0 && turn === 1)
  {
    document.getElementById("btn2").value = player2;
    sqr2T = 1;
    turn = 0;
  }
  else if(sqr6 === player2 && sqr9 === player2 && sqr3T === 0 && turn === 1)
  {
    document.getElementById("btn3").value = player2;
    sqr3T = 1;
    turn = 0;
  }
  else if(sqr1 === player2 && sqr4 === player2 && sqr7T === 0 && turn === 1)
  {
    document.getElementById("btn7").value = player2;
    sqr7T = 1;
    turn = 0;
  }
  else if(sqr2 === player2 && sqr5 === player2 && sqr8T === 0 && turn === 1)
  {
    document.getElementById("btn8").value = player2;
    sqr8T = 1;
    turn = 0;
  }
  else if(sqr3 === player2 && sqr6 === player2 && sqr9T === 0 && turn === 1)
  {
    document.getElementById("btn9").value = player2;
    sqr9T = 1;
    turn = 0;
  }
  else if(sqr1 === player2 && sqr9 === player2 && sqr5T === 0 && turn === 1)
  {
    document.getElementById("btn5").value = player2;
    sqr5T = 1;
    turn = 0;
  }
  else if(sqr3 === player2 && sqr7 === player2 && sqr5T === 0 && turn === 1)
  {
    document.getElementById("btn5").value = player2;
    sqr5T = 1;
    turn = 0;
  }
  else
  {
    computer();
  }
  check2();
}

function computer()
{
  check2();
  if(sqr1 === player1 && sqr2 === player1 && sqr3T === 0 && turn === 1)
  {
    document.getElementById("btn3").value = player2;
    sqr3T = 1;
    turn = 0;
  }
  else if(sqr2 === player1 && sqr3 === player1 && sqr1T === 0 && turn === 1)
  {
    document.getElementById("btn1").value = player2;
    sqr1T = 1;
    turn = 0;
  }
  else if(sqr4 === player1 && sqr5 === player1 && sqr6T === 0 && turn === 1)
  {
    document.getElementById("btn6").value = player2;
    sqr6T = 1;
    turn = 0;
  }
  else if(sqr5 === player1 && sqr6 === player1 && sqr4T === 0 && turn === 1)
  {
    document.getElementById("btn4").value = player2;
    sqr4T = 1;
    turn = 0;
  }
  else if(sqr7 === player1 && sqr8 === player1 && sqr9T === 0 && turn === 1)
  {
    document.getElementById("btn9").value = player2;
    sqr9T = 1;
    turn = 0;
  }
  else if(sqr8 === player1 && sqr9 === player1 && sqr7T === 0 && turn === 1)
  {
    document.getElementById("btn7").value = player2;
    sqr7T = 1;
    turn = 0;
  }
  else if(sqr1 === player1 && sqr5 === player1 && sqr9T === 0 && turn === 1)
  {
    document.getElementById("btn9").value = player2;
    sqr9T = 1;
    turn = 0;
  }
  else if(sqr5 === player1 && sqr9 === player1 && sqr1T === 0 && turn === 1)
  {
    document.getElementById("btn1").value = player2;
    sqr1T = 1;
    turn = 0;
  }
  else if(sqr3 === player1 && sqr5 === player1 && sqr7T === 0 && turn === 1)
  {
    document.getElementById("btn7").value = player2;
    sqr7T = 1;
    turn = 0;
  }
  else if(sqr7 === player1 && sqr5 === player1 && sqr3T === 0 && turn === 1)
  {
    document.getElementById("btn3").value = player2;
    sqr3T = 1;
    turn = 0;
  }
  else if(sqr1 === player1 && sqr3 === player1 && sqr2T === 0 && turn === 1)
  {
    document.getElementById("btn2").value = player2;
    sqr2T = 1;
    turn = 0;
  }
  else if(sqr4 === player1 && sqr6 === player1 && sqr5T === 0 && turn === 1)
  {
    document.getElementById("btn5").value = player2;
    sqr5T = 1;
    turn = 0;
  }
  else if(sqr7 === player1 && sqr9 === player1 && sqr8T === 0 && turn === 1)
  {
    document.getElementById("btn8").value = player2;
    sqr8T = 1;
    turn = 0;
  }
  else if(sqr1 === player1 && sqr7 === player1 && sqr4T === 0 && turn === 1)
  {
    document.getElementById("btn4").value = player2;
    sqr4T = 1;
    turn = 0;
  }
  else if(sqr2 === player1 && sqr8 === player1 && sqr5T === 0 && turn === 1)
  {
    document.getElementById("btn5").value = player2;
    sqr5T = 1;
    turn = 0;
  }
  else if(sqr3 === player1 && sqr9 === player1 && sqr6T === 0 && turn === 1)
  {
    document.getElementById("btn6").value = player2;
    sqr6T = 1;
    turn = 0;
  }
  else if(sqr1 === player1 && sqr5 === player1 && sqr9T === 0 && turn === 1)
  {
    document.getElementById("btn9").value = player2;
    sqr9T = 1;
    turn = 0;
  }
  else if(sqr4 === player1 && sqr7 === player1 && sqr1T === 0 && turn === 1)
  {
    document.getElementById("btn1").value = player2;
    sqr1T = 1;
    turn = 0;
  }
  else if(sqr5 === player1 && sqr8 === player1 && sqr2T === 0 && turn === 1)
  {
    document.getElementById("btn2").value = player2;
    sqr2T = 1;
    turn = 0;
  }
  else if(sqr6 === player1 && sqr9 === player1 && sqr3T === 0 && turn === 1)
  {
    document.getElementById("btn3").value = player2;
    sqr3T = 1;
    turn = 0;
  }
  else if(sqr1 === player1 && sqr4 === player1 && sqr7T === 0 && turn === 1)
  {
    document.getElementById("btn7").value = player2;
    sqr7T = 1;
    turn = 0;
  }
  else if(sqr2 === player1 && sqr5 === player1 && sqr8T === 0 && turn === 1)
  {
    document.getElementById("btn8").value = player2;
    sqr8T = 1;
    turn = 0;
  }
  else if(sqr3 === player1 && sqr6 === player1 && sqr9T === 0 && turn === 1)
  {
    document.getElementById("btn9").value = player2;
    sqr9T = 1;
    turn = 0;
  }
  else if(sqr1 === player1 && sqr9 === player1 && sqr5T === 0 && turn === 1)
  {
    document.getElementById("btn5").value = player2;
    sqr5T = 1;
    turn = 0;
  }
  else if(sqr3 === player1 && sqr7 === player1 && sqr5T === 0 && turn === 1)
  {
    document.getElementById("btn5").value = player2;
    sqr5T = 1;
    turn = 0;
  }
  else
  {
    AI();
  }
  check2();
}

function AI()
{
  vari();
  if(document.getElementById("btn5").value === " " && turn === 1)
  {
    document.getElementById("btn5").value = player2;
    turn = 0;
    sqr5T = 1;
  }
  else if(document.getElementById("btn1").value === " " && turn === 1)
  {
    document.getElementById("btn1").value = player2;
    turn = 0;
    sqr1T = 1;
  }
  else if(document.getElementById("btn9").value === " " && turn === 1)
  {
    document.getElementById("btn9").value = player2;
    turn = 0;
    sqr9T = 1;
  }
  else if(document.getElementById("btn6").value === " " && turn === 1)
  {
    document.getElementById("btn6").value = player2;
    turn = 0;
    sqr6T = 1;
  }
  else if(document.getElementById("btn2").value === " " && turn === 1)
  {
    document.getElementById("btn2").value = player2;
    turn = 0;
    sqr2T = 1;
  }
  else if(document.getElementById("btn8").value === " " && turn === 1)
  {
    document.getElementById("btn8").value = player2;
    turn = 0;
    sqr8T = 1;
  }
  else if(document.getElementById("btn3").value === " " && turn === 1)
  {
    document.getElementById("btn3").value = player2;
    turn = 0;
    sqr3T = 1;
  }
  else if(document.getElementById("btn7").value === " " && turn === 1)
  {
    document.getElementById("btn7").value = player2;
    turn = 0;
    sqr7T = 1;
  }
  else if(document.getElementById("btn4").value === " " && turn === 1)
  {
    document.getElementById("btn4").value = player2;
    turn = 0;
    sqr4T = 1;
  }
  check2();
}

function reset()
{
	for(var i=1;i<=9;i++){
		document.getElementById("btn"+i).value = " ";
		window['sqr'+i+'T'] = 0;
	}
	vari();
	turn = 0;
	moveCount = 0;

	wrapper.classList.remove('wrapper-active');
	button_group.classList.remove('player--selector--active');
}

var canFireAgain = 1;
var turner = document.getElementById('current_player');

function resetter()
{
  reset();
  setStatus("");  document.getElementById("title").style.display = "block";  document.getElementById("title2").style.display = "none";
}

function fireMove(i) {
	if (canFireAgain) {
		if(document.getElementById("btn"+i).value === ' ' && turn === 0 && mode === 1) {
			document.getElementById("btn"+i).value = player1;
			window['sqr'+i+'T'] = 1;
			canFireAgain = 0;
			turner.innerHTML = "Computer turn!";
			setTimeout(function() {
				turn = 1;
				vari();
				check();
				canFireAgain = 1;
				turner.innerHTML = "Your turn!";
			}, 1000);
		} else if(document.getElementById("btn"+i).value === ' ' && turn === 0 && mode === 2) {
			document.getElementById("btn"+i).value = player1;
			window['sqr'+i+'T'] = 1;
			turn = 1;
			vari();
			player1Check();
			turner.innerHTML = "Player2 turn!";
		} else if(document.getElementById("btn"+i).value === ' ' && turn === 1 && mode === 2) {
			document.getElementById("btn"+i).value = player2;
			window['sqr'+i+'T'] = 1;
			turn = 0;
			vari();
			player1Check();
			turner.innerHTML = "Player1 turn!";
		}
		drawCheck();
	}
}

	document.getElementById("btn1").onclick = function() { fireMove(1); };
	document.getElementById("btn2").onclick = function() { fireMove(2); };
	document.getElementById("btn3").onclick = function() { fireMove(3); };
	document.getElementById("btn4").onclick = function() { fireMove(4); };
	document.getElementById("btn5").onclick = function() { fireMove(5); };
	document.getElementById("btn6").onclick = function() { fireMove(6); };
	document.getElementById("btn7").onclick = function() { fireMove(7); };
	document.getElementById("btn8").onclick = function() { fireMove(8); };
	document.getElementById("btn9").onclick = function() { fireMove(9); };

	function setMode(game_type) {
		reset();
		mode = game_type;
    
    turner.innerHTML = game_type === 1 ? 'Your turn!' : 'Player1 turn!';
		button_group.classList.add('player--selector--active');
	}

	document.getElementById("ai").onclick = function() {   document.getElementById("title").style.display = "none";
      document.getElementById("title2").style.display = "block";
    setMode(1); };
	document.getElementById("play-with-players").onclick = function() {
    document.getElementById("title").style.display = "none";
      document.getElementById("title2").style.display = "block";
    setMode(2); };
	document.getElementById("reset").onclick = function() {
		setMode(0);
		resetter();
	};

	function pickChar(one, two) {
		player1 = one;
		player2 = two;

		wrapper.classList.add('wrapper-active');
	}

	document.getElementById("x").onclick = function(){ pickChar('x','o'); };

	document.getElementById("o").onclick =  function(){ pickChar('o','x'); };

	document.getElementById("back").onclick = function() { 
    resetter();
  };

Comments