Skip to content

Instantly share code, notes, and snippets.

@ooade
Created September 11, 2015 12:15
Show Gist options
  • Save ooade/67d322a39b11dd7fea7f to your computer and use it in GitHub Desktop.
Save ooade/67d322a39b11dd7fea7f to your computer and use it in GitHub Desktop.
pjjoVd
<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>
(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();
}
}
}
});
})();
<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>
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;
}
<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