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>