davidpetrey
1/14/2016 - 8:53 PM

Zipline: Build a Tic Tac Toe Game

Zipline: Build a Tic Tac Toe Game

<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet" />
body {
	padding: 30px;
	background: #111;
	color: #B0D2FF;
	font-size: 30px;

}
.title {
	font-family: 'VT323';
	color: #B0D2FF;
	text-shadow: 0px 0px 20px rgba(199, 219, 255, .9),
		0px 0px 70px rgba(199, 219, 255, .9), 
		0px 0px 150px rgba(199, 219, 255, 1),
		0px 0px 150px rgba(199, 219, 255, 1);

}
.table {
	display: table;
	width: 250px;
	height: 250px;
	margin: 0 35%;
	//font-family: 'Comic Sans MS', cursive;
	font-size: 60px;
	cursor: pointer;
		text-shadow: 0px 0px 20px rgba(199, 219, 255, .4),
		0px 0px 70px rgba(199, 219, 255, .5), 
		0px 0px 120px rgba(199, 219, 255, .5);


}
.row {
	display: table-row;

}
.cell {
	display: table-cell;
	width: 33.33%;
	height: 33.33%;
	text-align: center;
	vertical-align: middle;
	
}
[id='2'], [id='8'] {
	border-left: 2px solid #B0D2FF;
	border-right: 2px solid #B0D2FF;	
}

[id='4'], [id='6']  {
	border-top: 2px solid #B0D2FF;
	border-bottom: 2px solid #B0D2FF;
}

[id='5'] {
	border: 2px solid #B0D2FF;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
var myarr = [], arrX = [], arrO = [], user = 'user', ai = 'ai', alertOnce = 0;
var winNum = [	[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 reset = function() {
	myarr = [], arrX = [], arrO = [];
	$(".cell").each(function() {
		$(this).html('');	
	});
	bindButton();
}

var win = function(w) {
	setTimeout(function(){
		reset();
		alert(w+' winner!!!        play again?');
		if(alertOnce === 0){
			alert('LETS PLAY GLOBAL THERMONUCLEAR WAR, OK?');
			alertOnce = 1;
		}
	}, 800);
}

var checkWin = function(someArr, w) {
	var c = [];
	if(myarr.length < 9) {
		for(k=0; k<8; k++){
			for(i=0; i<3; i++) {
				for(j=0; j<someArr.length; j++) {
					if(winNum[k][i] === someArr[j]) {
						c.push(winNum[k][i]);
						if(c.length === 3) {
							return win(w);
						} 	
					}	
				}	
			}	
			var c = [];
		}
		if(w === 'user') {
			setTimeout(function(){
				aiTurn();
			}, 500);
		}
	} else {
		reset();
		alert('tie');
	}
}

var aiTurn = function() {
	var num = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
	var last = myarr[(myarr.length-1)];
	if(myarr.indexOf(num) > -1){
		if(myarr.length < 9){
			aiTurn();
		}
	} else {
		var aiMove = '#'+num
		myarr.push(num);
		arrO.push(num);
		$(aiMove).append('O');
		checkWin(arrO, ai);
	}
}

// onclick stuff
function bindButton() {
	$(".cell").unbind('click').one("click", function() {
		$(this).append('X');
		myarr.push(Number(this.id));
		arrX.push(Number(this.id));
		checkWin(arrX, user);

	});
}
bindButton();
<div class="title">GREETINGS PROFESSOR FALKEN <br><br>SHALL WE PLAY A GAME?</div>
<section class="table">
	<div class="row">
		<div id="1" class="cell"></div>
		<div id="2" class="cell"></div>
		<div id="3" class="cell"></div>
	</div>
	<div class="row">
		<div id="4" class="cell"></div>
		<div id="5" class="cell"></div>
		<div id="6" class="cell"></div>
	</div>
	<div class="row">
		<div id="7" class="cell"></div>
		<div id="8" class="cell"></div>
		<div id="9" class="cell"></div>
	</div>
</section>