<h1>Tic Tac Toe</h1>
<container>
		<div class="square" id="_1"></div>
		<div class="square" id="_2"></div>
		<div class="square" id="_3"></div>
		<div class="square" id="_4"></div>
		<div class="square" id="_5"></div>
		<div class="square" id="_6"></div>
		<div class="square" id="_7"></div>
		<div class="square" id="_8"></div>
		<div class="square" id="_9"></div>
</container>
<div id="winner"></div>
@import url('https://fonts.googleapis.com/css?family=Roboto:500,300,400');
body {
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding: 0;
	user-select: none;
}
h1 {
	background: #2196F3;
	box-shadow: 0px 0px 10px #000;
	color: #fff;
	font-size: 3em;
	font-weight: 300;
	margin: 0;
	padding:0.5em 0;
	margin-bottom: 0.5em;
	text-align: center;
}
.win {
	color: #f00!important;
}
container {
	box-shadow: 0px 0px 15px #333;
	display: block;
	height: 40vw;
	margin: 0 auto;
	max-height: 500px;
	max-width: 500px;
	padding: 2em;
	width: 40vw;
}
.square {
	background: none;
	border: 0px solid #f00;
	color: rgba(0,0,0,0.2);
	cursor: pointer;
	display: inline-block;
	float: left;
	font-size: calc(35vw / 3);
	font-weight: 300;
	height: calc(40vw/3);
	line-height: calc(40vw/3);
	margin: -1px;
	max-height: calc(500px/3);
	max-width: calc(500px/3);
	text-align: center;
	transition: color 0.3s;
	width: calc(40vw/3);
}
@media (min-width:1400px){.square{line-height:1em; font-size:calc(500px/3);}}
.played {
	color: #000;
	opacity: 1;
}
#_1, #_2, #_4, #_5 {
	border-bottom: 2px solid #aaa;
	border-right: 2px solid #aaa;
}
#_3, #_6 {
	border-bottom: 2px solid #aaa;
}
#_7, #_8 {
	border-right: 2px solid #aaa;
}
#winner {
	font-size: 4em;
	font-weight: 500;
	margin: 0.1em;
	margin-bottom: 0!important;
	text-align: center;
}
footer{position:absolute; bottom:0; right:0; color:#333; font-size:14pt; padding:2px; font-family:"Helvetica", sans-serif; line-height:15pt;}
footer a {color:#333; text-decoration:none; display:inline; transition: all 300ms; &:hover{font-size:15pt; color: lighten(#333, 15%);}}
//I know my Js isn't super pretty or effecient, but it works.

var player = 0,
		turns = 0,
		space = [$("#_1"),
				$("#_2"),
				$("#_3"),
				$("#_4"),
				$("#_5"),
				$("#_6"),
				$("#_7"),
				$("#_8"),
				$("#_9")
		];
//Hover a Square
$(".square").mouseenter(function() {
		if ($(this).hasClass("played")) {
				return
		} else {
				if (player == 1) {
						$(this).html("O");
				} else if (player == 0) {
						$(this).html("X");
				}
		}
}).mouseleave(function() {
		if ($(this).hasClass("played")) {
				return
		} else {
				$(this).html("");
		}
})

//Take a turn
$(".square").click(
				function() {
						$("#winner").html("");
						if ($(this).hasClass("played")) {
								return
						} else {
								if (player == 1) {
										$(this).html("O");
								} else if (player == 0) {
										$(this).html("X")
								}
								$(this).addClass("played")
								checkWin()
								if (player == 1) {
										player = player - 1
								} else if (player == 0) {
										player++
								};
								turns++
						}
						if (player == 1) {
								aiTurn()
						} else {
								return
						}
				})
		//Detect a winner//
		//This part is definitely the least optimized.//
		/*	Horizontal*/
function checkWin() {
				if ((space[0].text() == "X" && space[1].text() == "X" && space[2].text() == "X")) {
						win("X");
						space[0].addClass("win");
						space[1].addClass("win");
						space[2].addClass("win");
				} else if ((space[3].text() == "X" && space[4].text() == "X" && space[5].text() == "X")) {
						win("X");
						space[3].addClass("win");
						space[4].addClass("win");
						space[5].addClass("win");
				} else if ((space[6].text() == "X" && space[7].text() == "X" && space[8].text() == "X")) {
						win("X");
						space[6].addClass("win");
						space[7].addClass("win");
						space[8].addClass("win");
				}
				/*	Vertical*/
				else if ((space[0].text() == "X" && space[3].text() == "X" && space[6].text() == "X")) {
						win("X");
						space[0].addClass("win");
						space[3].addClass("win");
						space[6].addClass("win");
				} else if ((space[1].text() == "X" && space[4].text() == "X" && space[7].text() == "X")) {
						win("X");
						space[1].addClass("win");
						space[4].addClass("win");
						space[7].addClass("win");
				} else if ((space[2].text() == "X" && space[5].text() == "X" && space[8].text() == "X")) {
						win("X");
						space[2].addClass("win");
						space[5].addClass("win");
						space[8].addClass("win");
				}
				/*	Diagonal*/
				else if ((space[0].text() == "X" && space[4].text() == "X" && space[8].text() == "X")) {
						win("X");
						space[0].addClass("win");
						space[4].addClass("win");
						space[8].addClass("win");
				} else if ((space[2].text() == "X" && space[4].text() == "X" && space[6].text() == "X")) {
						win("X");
						space[2].addClass("win");
						space[4].addClass("win");
						space[6].addClass("win");
				}
				/*	Horizontal*/
				else if ((space[0].text() == "O" && space[1].text() == "O" && space[2].text() == "O")) {
						win("O");
						space[0].addClass("win");
						space[1].addClass("win");
						space[2].addClass("win");
				} else if ((space[3].text() == "O" && space[4].text() == "O" && space[5].text() == "O")) {
						win("O");
						space[3].addClass("win");
						space[4].addClass("win");
						space[5].addClass("win");
				} else if ((space[6].text() == "O" && space[7].text() == "O" && space[8].text() == "O")) {
						win("O");
						space[6].addClass("win");
						space[7].addClass("win");
						space[8].addClass("win");
				}
				/*	Vertical*/
				else if ((space[0].text() == "O" && space[3].text() == "O" && space[6].text() == "O")) {
						win("O");
						space[0].addClass("win");
						space[3].addClass("win");
						space[6].addClass("win");
				} else if ((space[1].text() == "O" && space[4].text() == "O" && space[7].text() == "O")) {
						win("O");
						space[1].addClass("win");
						space[4].addClass("win");
						space[7].addClass("win");
				} else if ((space[2].text() == "O" && space[5].text() == "O" && space[8].text() == "O")) {
						win("O");
						space[2].addClass("win");
						space[5].addClass("win");
						space[8].addClass("win")
				}
				/*	Diagonal*/
				else if ((space[0].text() == "O" && space[4].text() == "O" && space[8].text() == "O")) {
						win("O");
						space[0].addClass("win");
						space[4].addClass("win");
						space[8].addClass("win");
				} else if ((space[2].text() == "O" && space[4].text() == "O" && space[6].text() == "O")) {
						win("O");
						space[2].addClass("win");
						space[4].addClass("win");
						space[6].addClass("win");
				} else if (turns == 9) {
						win("Nobody")
				}
		}
		//Display Winner and Reset Game
function win(x) {
		$("#winner").html(x + " Wins!");
		$.each(space, function() {
				$(this).addClass("played");
		});
		setTimeout(
				function() {
						for (i = 0; i < space.length; ++i) {
								space[i].text("").removeClass("played").removeClass("win")
						};
						turns = 0;
					player = 0;
				}, 2000); 
}

function aiTurn() {
		var random = Math.floor(Math.random() * 8);
		if (space[random].hasClass("played")) {
				aiTurn();
		} else {
				space[random].trigger("click");
		};
}

jackHarnerSig("");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://codepen.io/jackharner/pen/e947f15a449125c42930da18ac048383.js