Tic Tac Toe

A simple game for thehomeworklife.co.nf

by Jonathan Lam

HTML

<div id="title">Tic Tac Toe</div>
<div id="gameboard"></div>
<div id="cite">A memory game by Jonathan Lam for <a href="http://www.thehomeworklife.co.nf">The Homework Life.</a><br />See the code at <a href="https://jsfiddle.net/jlam55555/1n4tfs3o/92/embedded/result">JSFiddle.net</a>.</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Quicksand:700);
@import url(https://fonts.googleapis.com/css?family=Merriweather);
* {
	box-sizing: border-box;
}
body, html {
	margin: 0;
	padding: 0;
	min-width: 500px;
	min-height: 500px;
	width: 100%;
	height: 100%;
	font-family: merriweather;
}
div#title, div#cite {
	padding: 20px;
	text-align: center;
}
div#cite > a {
	text-decoration: none;
	color: black;
	border-bottom: 1px dotted black;
}
div#gameboard {
	width: 500px;
	height: 500px;
	margin: 0 auto;
	background-color: #2c5986;
	border-radius: 5px;
}
div.square {
	height: calc(100% / 3);
	width: calc(100% / 3);
	float: left;
	cursor: pointer;
	display: flex;
	align-items: center;
}
div.square.touched {
	cursor: auto;
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
div.square > span {
	flex-grow: 1;
	font-family: quicksand;
	font-weight: bold;
	font-size: 100px;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
	animation: fadeIn .2s 1 forwards;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
    user-select: none;
}

JavaScript

// for restarting the game as necessary
var end = function(winner) {
	var winString = winner == 0 ? "Tie!" : winner == 1 ? "You have won!" : "You have lost. =(";
	if(confirm(winString + "\nPlay again?"))
		play();
};
// to store the grid
var getAll = function() {
	var all = [];
	$("div.square > span:contains(X)").each(function(index, element) {
		all[$(element).parent().index()] = "x";
	});
	$("div.square > span:contains(O)").each(function(index, element) {
		all[$(element).parent().index()] = "o";
	});
	return all;
};
// convert values into a grid
var getAllGrid = function(all) {
	var allGrid = [[],[],[]];
	for(var i = 0; i < 9; i++) {
		if(all[i] == undefined)
			all[i] = "";
		allGrid[Math.floor(i/3)][i%3] = all[i];
	}
	return allGrid;
};
// to check for a winner
var check = function(allGrid) {
	var toCheck = [
		allGrid[0], allGrid[1], allGrid[2],
		[allGrid[0][0], allGrid[1][0], allGrid[2][0]],
		[allGrid[0][1], allGrid[1][1], allGrid[2][1]],
		[allGrid[0][2], allGrid[1][2], allGrid[2][2]],
		[allGrid[0][0], allGrid[1][1], allGrid[2][2]],
		[allGrid[0][2], allGrid[1][1], allGrid[2][0]]
	];
	for(var i = 0; i < toCheck.length; i++) {
		var line = toCheck[i];
		if(count(line,"x") == 3) {
			end(1);
			return true;
		} else if(count(line,"o") == 3) {
			end(2);
			return true;
		}
	}
	return false;
};
// for counting occurences of "X"s and "O"s later on
var count = function(array, value) {
	var count = 0;
	for(var i = 0; i < array.length; i++)
		if(array[i] == value)
			count++;
	return count;
};
// for filling in randomly later on (same as indexOf() but returns array)
var indeces = function(array, value) {
	var indeces = [];
	for(var i = 0; i < array.length; i++)
		if(array[i] == value)
			indeces.push(i);
	return indeces;
};
var gameboard = $("div#gameboard");
var play = function() {
	// empty gameboard
	gameboard.empty();
	// create squares
	for(var i = 0; i < 9; i++) {
		var style = "";
		if(i < 6)
			style += "border-bottom: 10px solid rgba(255, 255, 255,...