jmcelroy5/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tic Tac Toe</title>

	<style>
		#container{
			width:330px;
			height:330px;
			overflow:hidden;
			margin: 50px auto 0 auto;
		}
		#container .square{
			width:100px;
			height:100px;
			line-height: 100px;
			vertical-align: middle;
			text-align: center;
			float:left;
			font-weight:bold;
			font-size:50px;
			color: black;
			border-right:10px solid black;
		}
		#container .square:nth-child(-n+6){
			border-bottom:10px solid black;
		}
		#container .square:nth-child(3n+3){
			border-right: none;
		}
		#game-message, #play-again{
			margin: 40px auto 0 auto;
			text-align: center;
			color: red;
			font-weight: bold;
		}
		button{
			width:150px;
			font-size: 20px;
			padding: 10px;
		}
		#play-again{
			display: None;
		}
		.win{
			background-color: red;
		}

	</style>

</head>
<body>

	<h1 id="game-message">X makes the first move.</h1>
	<div id="container">
		<div class="square" id="0"></div>
		<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>
	<div id="play-again">
		<button>Play again</button>
	</div>

	<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

	<script>

	var Game = {
		playerTurn: true, // true: X's turn, false: O's turn
		gameOver: false,
		winner: null,
	}

	var playerName = {
		"true": "X",
		"false": "O"
	}

	var gameMessages =  {
		"turn": {"X": "It's X's turn", "O": " It's O's turn"},
		"win": "Tic-Tac-Toe!",
		"tie": "Cat's game.",
		"start": "X makes the first move."
	}

	var Board = ["n","n","n","n","n","n","n","n","n"];

	var winningCombos = [
		[0,1,2],
		[3,4,5],
		[6,7,8],
		[0,3,6],
		[1,4,7],
		[2,5,8],
		[0,4,8],
		[2,4,6]
	]

	$("#container div").on("click", function(){
		gameTurn(this);
	});

	var gameTurn = function(square){
		// whose turn is it
		var turn = Game.playerTurn;
		var nextTurn = !Game.playerTurn;

		// get player name (X/O)
		var player = playerName[turn.toString()];
		var otherPlayer = playerName[nextTurn.toString()];

		// fill the square with X or O
		$(square).text(player);

		// disable further clicks
		$(square).off();

		// square they clicked on
		var move = $(square).attr("id");

		// record their move
		Board[move] = player;

		// check game logic
		gameLogic(player);

		// switch to other player
		if (!Game.gameOver){
			Game.playerTurn = !Game.playerTurn;
			$("#game-message").text(gameMessages.turn[otherPlayer]);
		}
		// game over. play again?
		else{
			$("#play-again").show();
		}
	}

	var gameLogic = function(player){
		var playerMoves = [];
		// create array of player's moves
		Board.map(function(val, index) {
			if (val == player){
				playerMoves.push(index);
			}
		});

		// see if player's moves contains any winning combos
		var matches = winningCombos.map(function(combo){
			for (var i = 0; i < combo.length; i++){
				if (playerMoves.indexOf(combo[i]) == -1){
					var winner = false;
					break;
				}
				var winner = true;
			}
			return winner;
		});

		// if player just won
		if (matches.indexOf(true) > -1) {
			Game.winner = player;
			Game.gameOver = true;
			$("#game-message").text(gameMessages.win);
			$("#container div").off();

			// highlight the win
			var combo = winningCombos[matches.indexOf(true)];
			combo.forEach(function(idx){
				var square = $(".square").get(idx);
				$(square).addClass("win");
			});
		}

		// check for cat's game
		else if (Board.indexOf("n") == -1){
			Game.gameOver = true;
			$("#game-message").text(gameMessages.tie);
			$("#container div").off();
		}
	}

	$("#play-again").on("click", function(){
		reset();
	});

	var reset = function(){
		$("#play-again").hide();
		$("#container div").text("");
		$("#game-message").text(gameMessages.start);
		Game.winner = null;
		Game.gameOver = false;
		Game.playerTurn = true;
		Board = ["n","n","n","n","n","n","n","n","n"];
		$("#container div").on("click", function(){
			gameTurn(this);
		});
		$(".square").removeClass("win");
	}

	</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Tic Tac Toe</title>

	<style>
	#container{
	width:330px;
	height:330px;
	overflow:hidden;
	margin: 50px auto 0 auto;
	}
	#container .square{
	width:100px;
	height:100px;
	line-height: 100px;
	vertical-align: middle;
	text-align: center;
	float:left;
	font-weight:bold;
	font-size:50px;
	color: black;
	border-right:10px solid black;
	}
	#container .square:nth-child(-n+6){
	border-bottom:10px solid black;
	}
	#container .square:nth-child(3n+3){
	border-right: none;
	}
	#game-message, #play-again{
	margin: 40px auto 0 auto;
	text-align: center;
	color: red;
	font-weight: bold;
	}
	button{
	width:150px;
	font-size: 20px;
	padding: 10px;
	}
	#play-again{
	display: None;
	}
	.win{
	background-color: red;
	}

	</style>

	</head>
	<body>

	<h1 id="game-message">X makes the first move.</h1>
	<div id="container">
	<div class="square" id="0"></div>
	<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>
	<div id="play-again">
	<button>Play again</button>
	</div>

	<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

	<script>

	var Game = {
	playerTurn: true, // true: X's turn, false: O's turn
	gameOver: false,
	winner: null,
	}

	var playerName = {
	"true": "X",
	"false": "O"
	}

	var gameMessages = {
	"turn": {"X": "It's X's turn", "O": " It's O's turn"},
	"win": "Tic-Tac-Toe!",
	"tie": "Cat's game.",
	"start": "X makes the first move."
	}

	var Board = ["n","n","n","n","n","n","n","n","n"];

	var winningCombos = [
	[0,1,2],
	[3,4,5],
	[6,7,8],
	[0,3,6],
	[1,4,7],
	[2,5,8],
	[0,4,8],
	[2,4,6]
	]

	$("#container div").on("click", function(){
	gameTurn(this);
	});

	var gameTurn = function(square){
	// whose turn is it
	var turn = Game.playerTurn;
	var nextTurn = !Game.playerTurn;

	// get player name (X/O)
	var player = playerName[turn.toString()];
	var otherPlayer = playerName[nextTurn.toString()];

	// fill the square with X or O
	$(square).text(player);

	// disable further clicks
	$(square).off();

	// square they clicked on
	var move = $(square).attr("id");

	// record their move
	Board[move] = player;

	// check game logic
	gameLogic(player);

	// switch to other player
	if (!Game.gameOver){
	Game.playerTurn = !Game.playerTurn;
	$("#game-message").text(gameMessages.turn[otherPlayer]);
	}
	// game over. play again?
	else{
	$("#play-again").show();
	}
	}

	var gameLogic = function(player){
	var playerMoves = [];
	// create array of player's moves
	Board.map(function(val, index) {
	if (val == player){
	playerMoves.push(index);
	}
	});

	// see if player's moves contains any winning combos
	var matches = winningCombos.map(function(combo){
	for (var i = 0; i < combo.length; i++){
	if (playerMoves.indexOf(combo[i]) == -1){
	var winner = false;
	break;
	}
	var winner = true;
	}
	return winner;
	});

	// if player just won
	if (matches.indexOf(true) > -1) {
	Game.winner = player;
	Game.gameOver = true;
	$("#game-message").text(gameMessages.win);
	$("#container div").off();

	// highlight the win
	var combo = winningCombos[matches.indexOf(true)];
	combo.forEach(function(idx){
	var square = $(".square").get(idx);
	$(square).addClass("win");
	});
	}

	// check for cat's game
	else if (Board.indexOf("n") == -1){
	Game.gameOver = true;
	$("#game-message").text(gameMessages.tie);
	$("#container div").off();
	}
	}

	$("#play-again").on("click", function(){
	reset();
	});

	var reset = function(){
	$("#play-again").hide();
	$("#container div").text("");
	$("#game-message").text(gameMessages.start);
	Game.winner = null;
	Game.gameOver = false;
	Game.playerTurn = true;
	Board = ["n","n","n","n","n","n","n","n","n"];
	$("#container div").on("click", function(){
	gameTurn(this);
	});
	$(".square").removeClass("win");
	}

	</script>

	</body>
	</html>