html Tic Tac Toe

Posted 2021-05-11

Tic Tac Toe
-----------


A [Pen](https://codepen.io/massivelines/pen/dWgpYL) by [Shawn Rhodes](http://codepen.io/massivelines) on [CodePen](http://codepen.io/).

[License](https://codepen.io/massivelines/pen/dWgpYL/license).

@import url('https://fonts.googleapis.com/css?family=Cousine');

body, button {
	font-family: 'Cousine', monospace;
}
div {
	box-sizing: border-box;
}
.x, .o {
	width: 100%;
	height: 100%;
	font-size: 9em;
	position: absolute;
	text-transform: uppercase;
	display: flex;
	justify-content:center;
	align-items: center;
}
#container {
	margin-top: 5%;
	margin-left:auto;
	margin-right:auto;
	padding-right: 1%;
	padding-left: 1%;
	text-align: center;
	width: 90%;
	background:crimson;
	position: relative;
}
#board {
	margin:auto;
	width: 100%;
	height: 0;
}
.row{
	content:"";
	padding-bottom: 33%;
	
}
.cell {
	position: relative;
	float: left;
	content: "";
	width: 33.3333%;
	padding-bottom: 33%;
	background: beige;
}
.cell:nth-child(even){
	border-right: 2px solid;
	border-left: 2px solid;
}
.row:nth-child(-n+2) {
	height:33%;
	border-bottom: 2px solid;
}
#title {
	font-size: 3em;
	padding-top: 4%;
	padding-bottom: 4%;
	color: beige;
}
#scoreboard {
	font-size: 1.1em;
	padding-top: 5%;
	padding-bottom: 4%;
	width: 100%;
	overflow: hidden;
	color: beige;
}
.eachScore{
	width: 33%;
	float:left;
}
#choice {

}
#first {
	text-align: center;
}
#end{
	text-align: center;
}
#winner{
	text-transform: capitalize;
}
.modal {
	width: 80%;
	border: 2px solid black;
	color: beige;
	background: crimson;
	text-align: center;
	padding: 1%;
	position: absolute;
	top: 51%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}
.modalTitle{
	font-size: 2em;
	padding-bottom 10px;
}
.buttonContainer {
	display:flex;
	justify-content: space-around;
}
button {
	padding: 10px;
	margin-top: 10px;
	font-size: 1.5em;
	border: 2px solid black;
	background:beige;
	transition: all 0.3s;
}
button:hover,
button:active {
	color: beige;
	background: crimson;
}

/* Small only */
@media screen and (max-width: 39.9375em) {
	#container {
				width: 90%;
			}
}

/* Medium and up */
@media screen and (min-width: 40em) {
	#container{
		width: 75%;
	}
}

/* Large and up */
@media screen and (min-width: 64em) {
		#container{
		width: 30%;
	}
}

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

//player first call playerTurn function, else call computerTurn

//when clicked on or computer chosen, remove from availbe to keep from clicking again;

/*
*			1	|	2	|	3
*		-------------
*			4	|	5 |	6
*		-------------
*			7	|	8	|	9
*/

//combos that will win
var winingCombo = [
	[1, 2, 3],
	[4, 5, 6],
	[7, 8, 9],
	[1, 4, 7],
	[2, 5, 8],
	[3, 6, 9],
	[1, 5, 9],
	[3, 5, 7]
];
var remainingMoves = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //list of remaing moves available
var playerWiningCombos = []; //player combos that can be wone
var playerChoiceArr = []; //moves player has chosen
var computerChoiceArr = []; //moves computer has chosen
var player; //for X or O
var computer; //for X or O
var turn; //holds whose turn
var computerScore = 0;
var darwScore = 0;
var playerScore = 0;

//when called resets the game except scores
function resetGame() {
	winingCombo = [
		[1, 2, 3],
		[4, 5, 6],
		[7, 8, 9],
		[1, 4, 7],
		[2, 5, 8],
		[3, 6, 9],
		[1, 5, 9],
		[3, 5, 7]
	];
	remainingMoves = [1, 2, 3, 4, 5, 6, 7, 8, 9];
	playerWiningCombos = [];
	playerChoiceArr = [];
	computerChoiceArr = [];
	player;
	computer;
	turn;
	//removes the x and o from board
	$(".x").remove();
	$(".o").remove();
	$("#choice").fadeIn( 500, "swing" );
}

function computerTurn() {
	if (remainingMoves.length > 0) {
		turn = "computer";
		//determin best move order
		//	win
		//	block
		//	best move if winningCombo contains more than one of same number
		//	no multiple move in winningCombo
		//	no winningCombo move in remainingMoves
		var block = 0; //to block or not, reset each turn
		var move = 0; //what move to make
		var spot; //hold for indexOf at time of test

		//move = check for last move of winning combo
		if (remainingMoves.indexOf(5)>-1){
			move = 5;
		} else {
		for (var i = 0; i < winingCombo.length; i++) {
			var total = 0;
			var hold = winingCombo[i].slice();
			for (var j = 0; j < 3; j++) {
				if (computerChoiceArr.indexOf(winingCombo[i][j]) > -1) {
					total++;
					spot = hold.indexOf(winingCombo[i][j]);
					hold.splice(spot, 1);
				}
				if (total > 1) {
					move = hold[0];
				}
			}
		}
		}

		// block = check if block is needed
		for (var i = 0; i < playerWiningCombos.length; i++) {
			var total = 0;
			var hold = playerWiningCombos[i].slice();
			for (var j = 0; j < 3; j++) {
				if (playerChoiceArr.indexOf(playerWiningCombos[i][j]) > -1) {
					total++;
					spot = hold.indexOf(playerWiningCombos[i][j]);
					hold.splice(spot, 1);
				}
				if (total > 1 && remainingMoves.indexOf(hold[0]) > -1) {
					block = hold[0];
				}
			}
		}

		//if move will win game
		if (move > 0) {
			console.log("Move: " + move);
			square = move;
			//if block is needed
		} else if (block > 0) {
			console.log("Block: " + block);
			square = block;
			//if win and block = 0, determin best move
		} else {
			//best move if same number mutiple times in winingCombo
			//reduce and sort winningCombo
			var arr = winingCombo
				.reduce(function(a, b) {
					return a.concat(b);
				}, [])
				.sort(function(a, b) {
					return a - b;
				});
			var move;
			var moveNum = 1;
			var test;
			var testNum = 0;
			//	what single number occurs most in remaining winning combos
			for (var x = 0; x < arr.length; x++) {
				for (var y = 0; y < arr.length; y++) {
					if (arr[x] == arr[y] && remainingMoves.indexOf(arr[x]) > -1) {
						testNum++;
					}
					if (moveNum < testNum) {
						moveNum = testNum;
						move = arr[x];
					}
				}
				testNum = 0;
			}
			console.log("best: " + move);
			square = move;

			//	no top move in winningCombo (move==0)
			if (move < 1) {
				var corner = [1,3,7,9]
				var cornerHold=[];
				
				for(var r=0; r<corner.length; r++) {
					if (remainingMoves.indexOf(corner[r])>-1) {
						cornerHold.push(corner[r])
					}
				}
				console.log("cornerHold " +cornerHold);
				if (cornerHold.length>0) {
					var ran1 = Math.floor(Math.random() * cornerHold.length);
					square = cornerHold[ran1]
					console.log("random corner: " + remainingMoves[ran1]);
				} else {
					var ran1 = Math.floor(Math.random() * remainingMoves.length);
					square = remainingMoves[ran1];
					console.log("random: " + remainingMoves[ran1]);
				}
				
			}
		}

		computerChoiceArr.push(square);
		setTimeout('output(turn, square)', 250);
	}
}

//check for winning combo compleated
function winning(turn) {
	var combos = [];
	var choiceArr = [];
	var win = false;
	//check for player or computers turn
	if (turn === "player") {
		combos = playerWiningCombos;
		choiceArr = playerChoiceArr;
	} else {
		combos = winingCombo;
		choiceArr = computerChoiceArr;
	}
	//check if choiceArr has all three wining combo numbers
	for (var i = 0; i < combos.length; i++) {
		if (
			choiceArr.indexOf(combos[i][0]) > -1 &&
			choiceArr.indexOf(combos[i][1]) > -1 &&
			choiceArr.indexOf(combos[i][2]) > -1
		) {
			win = true;
		}
	}

	if (win == true) {
		$("#end").fadeIn( 500, "swing" );
		remainingMoves=[];
		console.log(turn + " win's");
		$("#winner").text(turn +" win's");
		if (turn === "computer") {
			computerScore++;
			$("#computerScore").text(computerScore);
		} else {
			playerScore++;
			$("#playerScore").text(playerScore);
		}
	} else if (win == false && remainingMoves == 0) {
		$("#end").fadeIn( 500, "swing" );
		console.log("draw");
		darwScore++;
		$("#winner").text("Draw Game");
		$("#drawScore").text(darwScore);
	}
}

//output for turn and chosen square
function output(turn, square) {
	console.log(turn + " " + square);
	var spot = remainingMoves.indexOf(square);
	remainingMoves.splice(spot, 1);
	if (turn == "player") {
		$('[data-square="' + square + '"]').html(
			'<div class="' + player + '">' + player + "</div>"
		);
	} else {
		$('[data-square="' + square + '"]').html(
			'<div class="' + computer + '">' + computer + "</div>"
		);
	}
	winning(turn);
}

//player choses X or O
$("#choice button").click(function() {
	player = $(this).val();
	if (player == "x") {
		computer = "o";
	} else {
		computer = "x";
	}
	// $("#choice").fadeToggle( "fast", "linear" );
	$("#first").fadeIn( 500, "swing" );
	$("#choice").fadeOut( 500, "swing" );
	// $("#first").show();
});

//player choses AI or Player Moves First
$("#first button").click(function() {
	switch ($(this).val()) {
		//call function for player to move first
		case "1":
			break;
		//call function for computer to move first
		case "2":
			var ran1 = Math.floor(Math.random() * remainingMoves.length);
			turn = "computer";
			square = remainingMoves[ran1];
			computerChoiceArr.push(square);
			setTimeout('output(turn, square)', 250);
			// computerTurn();
			break;
	}
	$("#first").fadeOut( 500, "swing" );
});

//player clicking box places X or O in box
$(".cell").click(function() {
	turn = "player";
	var value = $(this).data("square");
	//check to see if move is valid
	if (remainingMoves.indexOf(value) > -1) {
		playerChoiceArr.push(value);
		//move wining combo arr to player pArr
		winingCombo = $.map(winingCombo, function(combo) {
			if (combo.indexOf(value) > -1) {
				playerWiningCombos.push(combo);
				return [];
				//remove combo from posiable computer winning combo
			} else {
				return [combo];
			}
		});

		output(turn, value);
		computerTurn();
	}
});

$("#restart").click(function() {
	$("#end").hide();
	resetGame();
});

$("#end").hide();
$("#first").hide();

// move 5 - 9 , 3or7 will sometimes win

<div id="container">
	<div id="end" class="modal">
 <div id="winner" class="modalTitle"></div>
 <button id="restart">Play Again?</button>
</div>
<div id="choice" class="modal">
 <div class="modalTitle">Players Choice</div>
 <div class="buttonContainer">
  <button value="x">X</button>
  <button value="o">O</button>
 </div>
</div>
<div id="first" class="modal">
 <div class="modalTitle">Who goes first</div>
 <div class="buttonContainer">
  <button value="1">Player</button>
  <button value="2">Computer</button>
 </div>
</div>
 <div id="title">Tic Tac Toe</div>
 <div id="board">
  <div class="row" id="row1">
   <div class="cell" data-square="1"></div>
   <div class="cell" data-square="2"></div>
   <div class="cell" data-square="3"></div>
  </div>
  <div class="row" id="row2">
   <div class="cell" data-square="4"></div>
   <div class="cell" data-square="5"></div>
   <div class="cell" data-square="6"></div>
  </div>
  <div class="row" id="row3">
   <div class="cell" data-square="7"></div>
   <div class="cell" data-square="8"></div>
   <div class="cell" data-square="9"></div>
  </div>
 </div>
 <div id="scoreboard">
  <div id="computer" class="eachScore">
   <div class="name">Computer</div>
   <div id="computerScore" class="score">0</div>
  </div>
  <div id="draw" class="eachScore">
   <div class="name">Draw</div>
   <div id="drawScore" class="score">0</div>
  </div>
  <div id="player" class="eachScore">
   <div class="name">Player</div>
   <div id="playerScore" class="score">0</div>
  </div>
 </div>
</div>