pjjoVd

index.html

 <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>

pjjoVd.markdown

pjjoVd

A Pen by Adegbuyi Ademola Oluwamayowa on CodePen.

License.

script.js

(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();
				}
			}
			
        }
    });
  
      
})();

scripts

<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>

style.css

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;
}

styles

<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" />