A Pen by Adegbuyi Ademola Oluwamayowa on CodePen.
Created
September 11, 2015 12:15
-
-
Save ooade/67d322a39b11dd7fea7f to your computer and use it in GitHub Desktop.
pjjoVd
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="navbar navbar-default navbar-static-top" id="mynavbar"> | |
<div class="container"> | |
<div class="navbar-header"> | |
<span class="navbar-brand">TicTacToe</span> | |
</div> | |
</div> | |
</div> | |
<div class="container" style="margin-top:20px"> | |
<div class="row"> | |
<div class="col-xs-6 xoBox"> | |
<table class="table text-center"> | |
<tr> | |
<td class="play p0" data="0"></td> | |
<td class="play p1" data="1"></td> | |
<td class="play p2" data="2"></td> | |
</tr> | |
<tr> | |
<td class="play p3" data="3"></td> | |
<td class="play p4" data="4"></td> | |
<td class="play p5" data="5"></td> | |
</tr> | |
<tr> | |
<td class="play p6" data="6"></td> | |
<td class="play p7" data="7"></td> | |
<td class="play p8" data="8"></td> | |
</tr> | |
</table> | |
</div> | |
<div class="col-xs-4 dashboard" ng-controller="formController as form"> | |
<form class="form" autocomplete="off" ng-submit="form.submitForm()" ng-hide="form.submitted"> | |
<div class="form-group"> | |
<label for="username">Username</label> | |
<input type="text" class="form-control" id="username" placeholder="Type your name"/> | |
</div> | |
<div class="form-group"> | |
<a class="sides btn btn-info">x</a> | |
OR | |
<a class="sides btn btn-info">o</a> | |
</div> | |
<div class="form-group"> | |
<button class="btn btn-primary">Submit</button> | |
</div> | |
</form> | |
<div ng-show="form.submitted"> | |
<h2>Hello, {{form.user()}} [{{form.side()}}]</h2> | |
<h3 class="win" style="display:none">Computer wins</h3> | |
<h3 class="tie" style="display:none">It's a tie</h3> | |
</div> | |
</div> | |
<div class="col-xs-2"></div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
var app = angular.module('tictactoe', []), obj = {}; | |
app.controller('formController', function () { | |
this.submitted = false; | |
this.user = function(){ | |
return obj.username; | |
}; | |
this.side = function(){ | |
return obj.side; | |
}; | |
$('.sides').click(function(){ | |
obj.side = $(this).text(); | |
}); | |
this.submitForm = function(){ | |
var username = $('#username').val(), | |
newPos=String(Math.floor(Math.random()*(8-0+1)+0)), | |
compSide = obj.side === "x" ? "o" : "x"; | |
$('.p'+ newPos).text(compSide); | |
if(username!==""){ | |
obj.username = username; | |
this.submitted = true; | |
$('.xoBox').show(); | |
} | |
}; | |
}); | |
var clearBoard = function(){ | |
setTimeout(function(x){ | |
$('.play').text("").css("background-color","rgba(0,0,0,0.4)"); | |
/** Clears text and change background to normal **/ | |
console.log("Starting Over, Board Cleared"); | |
var newPos=String(Math.floor(Math.random()*(8-0+1)+0)), | |
compSide = obj.side === "x" ? "o" : "x"; | |
$('.p'+ newPos).text(compSide); | |
$('.win').hide(); | |
$('.tie').hide(); | |
},4000); | |
}; | |
var animateWins = function(num1, num2, num3){ | |
$('.p'+ num1).css("background-color", "#cc0f16").addClass("animated shake bounce"); | |
$('.p'+ num2).css("background-color", "#cc0f16").addClass("animated shake bounce"); | |
$('.p'+ num3).css("background-color", "#cc0f16").addClass("animated shake bounce"); | |
}; | |
var horizWin = [[0,1,2], [3,4,5], [6,7,8]], | |
vertWin = [[0,3,6], [1,4,7], [2,5,8]], | |
diagWin = [[0,4,8], [2,4,6]]; | |
var isBlank = function(num) { | |
if($('.p' + num).text() === "" ){ | |
return true; | |
} | |
else{ | |
return false; | |
} | |
}; | |
var isComp = function(num){ | |
var compSide = obj.side === "x" ? "o" : "x"; | |
if($('.p' + num).text() === compSide){ | |
return true; | |
} | |
else{ | |
return false; | |
} | |
}; | |
var notBlankComp = function (num){ | |
if(!isBlank(num) && isComp(num)){ | |
return true; | |
} | |
else{ | |
return false; | |
} | |
}; | |
var notBlankIsComp = function (num1, num2, num3){ | |
if(!isBlank(num1) && !isBlank(num2) && isComp(num1) && isComp(num2) && isBlank(num3)){ | |
return true; | |
} | |
else{ | |
return false; | |
} | |
}; | |
var notBlankIsUser = function (num1, num2, num3){ | |
if(!isBlank(num1) && !isBlank(num2) && !isComp(num1) && !isComp(num2) && isBlank(num3)){ | |
return true; | |
} | |
else{ | |
return false; | |
} | |
}; | |
var put = function(num) { | |
var compSide = obj.side === "x" ? "o" : "x"; | |
$('.p' + num).text(compSide); | |
}; | |
var total = function () { | |
return $('.play').text().length; | |
}; | |
var wins = function (wintype) { | |
for(var x in wintype){ | |
if(notBlankIsComp(wintype[x][1], wintype[x][2], wintype[x][0])){ | |
put(wintype[x][0]); | |
$('.win').show(); | |
animateWins(wintype[x][0],wintype[x][1],wintype[x][2]); | |
return true; | |
} | |
else if(notBlankIsComp(wintype[x][2], wintype[x][0], wintype[x][1])){ | |
put(wintype[x][1]); | |
$('.win').show(); | |
animateWins(wintype[x][0],wintype[x][1],wintype[x][2]); | |
return true; | |
} | |
else if(notBlankIsComp(wintype[x][1], wintype[x][0], wintype[x][2])){ | |
put(wintype[x][2]); | |
$('.win').show(); | |
animateWins(wintype[x][0],wintype[x][1],wintype[x][2]); | |
return true; | |
} | |
} | |
}; | |
var block = function (block) { | |
for(var x in block){ | |
if(notBlankIsUser(block[x][1], block[x][2], block[x][0])){ | |
put(block[x][0]); | |
return true; | |
} | |
else if(notBlankIsUser(block[x][2], block[x][0], block[x][1])){ | |
put(block[x][1]); | |
return true; | |
} | |
else if(notBlankIsUser(block[x][1], block[x][0], block[x][2])){ | |
put(block[x][2]); | |
return true; | |
} | |
} | |
}; | |
$('.play').click(function() { | |
if($(this).text()!==""){ | |
console.log("position taken"); | |
} | |
else{ | |
$(this).text(obj.side); | |
if(total() === 2){ | |
if(isBlank(4)) put(4); | |
else if(isBlank(0)) put(0); | |
else put(2); | |
} | |
else if(total() === 4){ | |
if(wins(diagWin) || wins(vertWin) || wins(horizWin)){ | |
console.log("5th move: Computer Wins"); | |
clearBoard(); | |
} | |
else if(block(diagWin) || block(vertWin) || block(horizWin)){ | |
console.log("5th move: Haha, User Blocked from straight win"); | |
} | |
else{ | |
if(isBlank(0)) put(0); | |
else if(isBlank(2)) put(2); | |
else if(isBlank(6)) put(6); | |
else put(8); | |
} | |
} | |
else if(total() === 6){ | |
if(wins(diagWin) || wins(vertWin) || wins(horizWin)){ | |
console.log("7th move: Computer Wins"); | |
clearBoard(); | |
} | |
else if(block(diagWin) || block(vertWin) || block(horizWin)){ | |
console.log("7th move: Haha, User Blocked from straight win"); | |
} | |
else{ | |
if(isBlank(1)) put(1); | |
else if(isBlank(2)) put(2); | |
else if(isBlank(3)) put(3); | |
else if(isBlank(5)) put(5); | |
else if(isBlank(6)) put(6); | |
else if(isBlank(7)) put(7); | |
else put(8); | |
} | |
} | |
else if(total() === 8){ | |
if(wins(diagWin) || wins(vertWin) || wins(horizWin)){ | |
console.log("9th move: Computer Wins"); | |
clearBoard(); | |
} | |
else if(block(diagWin) || block(vertWin) || block(horizWin)){ | |
console.log("9th move: Haha, User Blocked from straight win"); | |
console.log("Its a tie tho"); | |
$('.tie').show(); | |
clearBoard(); | |
} | |
else{ | |
var x = 0; | |
while(x <= 8){ | |
if(isBlank(x)) put(x); | |
x++; | |
} | |
console.log("Its a tie"); | |
$('.tie').show(); | |
clearBoard(); | |
} | |
} | |
} | |
}); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body{ | |
background-color: #333; | |
color: #fff; | |
font-family: 'ubuntu', cursive; | |
} | |
.navbar-default { | |
background-color: rgb(8, 144, 185); | |
color: white; | |
border: none; | |
font-weight: 700; | |
} | |
.navbar-header .navbar-brand,.navbar-header .navbar-brand:hover{ | |
color: white; | |
/* font-weight: bold;*/ | |
} | |
.table > tbody > tr > td{ | |
border: 2px solid rgba(8, 144, 185, 0.7); | |
background: rgba(0,0,0,0.4); | |
color: #fff; | |
cursor:copy; | |
width: 107px; | |
height: 80px; | |
padding-top: 25px; | |
} | |
.table{ | |
width: 250px; | |
max-width: 250px; | |
height: 250px; | |
max-height: 250px; | |
} | |
.dashboard{ | |
background-color: rgba(8, 144, 185, 0.7); | |
padding: 10px !important; | |
border-radius: 0px; | |
color: #fff; | |
border:1px solid #333; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment