Tic Tac Toe

In this example below you will see how to do a Tic Tac Toe with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by gabriele-gentile, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gabriele-gentile ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Tic Tac Toe</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div id="title" class="text-center">Tic Tac Toe</div>
  </div>
</nav>

<div class="container" ng-app="tictactoe" ng-controller="tictactoeCtrl">
  <div class="gameBoard text-center">
    <div class="playerSelectScreen">
      <p>Choose between PvP or PvAI</p>
      <button ng-click="pvp()">Player vs Player</button>
      <button ng-click="pvai()">Player vs AI</button>
    </div>
    <div class="selectScreen" hidden>
      <p>Player One please choose between x or o</p>
      <button ng-click="chose('x')">x</button>
      <button ng-click="chose('o')">o</button>
    </div>
    <div class="gameScreen" hidden>
      <span ng-model="playerTurn">{{playerTurn}}</span><br>
      <!--<span class="playerTwo" hidden>Player 2 Turn</span><br>-->
      <span ng-model="playerOneWins" style="float:left">Player 1 :{{playerOneWins}}</span>
      <span ng-model="draw">Draw: {{draw}}</span>
      <span ng-model="playerTwoWins" style="float:right">Player 2 :{{playerTwoWins}}</span>
      <div id="winner" ng-model="winner" hidden>{{winner}}</div>


      <table class="gameTopTable">
        <tr>
          <td>
            <div ng-click="zero(0)" ng-model="positionsArray[0]">{{positionsArray[0]}}</div>
          </td>
          <td>
            <div ng-click="zero(1)" ng-model="positionsArray[1]">{{positionsArray[1]}}</div>
          </td>
          <td>
            <div ng-click="zero(2)" ng-model="positionsArray[2]">{{positionsArray[2]}}</div>
          </td>
        </tr>
        <tr>
          <td>
            <div ng-click="zero(3)" ng-model="positionsArray[3]">{{positionsArray[3]}}</div>
          </td>
          <td>
            <div ng-click="zero(4)" ng-model="positionsArray[4]">{{positionsArray[4]}}</div>
          </td>
          <td>
            <div ng-click="zero(5)" ng-model="positionsArray[5]">{{positionsArray[5]}}</div>
          </td>
        </tr>
        <tr>
          <td>
            <div ng-click="zero(6)" ng-model="positionsArray[6]">{{positionsArray[6]}}</div>
          </td>
          <td>
            <div ng-click="zero(7)" ng-model="positionsArray[7]">{{positionsArray[7]}}</div>
          </td>
          <td>
            <div ng-click="zero(8)" ng-model="positionsArray[8]">{{positionsArray[8]}}</div>
          </td>
        </tr>
      </table>
    </div>
    <!-- gameScreen -->
    <div class="controls" hidden>
      <button ng-click="reset()">Reset</button>
    </div>
    <!-- controls -->
  </div>
  <!-- gameBoard -->
</div>
<!-- container -->
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/gabriele-gentile/tic-tac-toe-YNzzRL */
@import url(https://fonts.googleapis.com/css?family=Italianno);
body {
  background-color: black;
}

.nav-brand {
  padding: 10px;
  opacity: 0.5;
}

.navbar {
  background: black;
  color: white;
  border: none;
  border-radius: 0px;
}

#title {
  font-size: 40px;
  font-family: 'Italianno', cursive;
}

button {
  background-color: green;
  color: white;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: darkGreen;
}

.gameBoard {
  color: white;
  margin: auto;
  width: 400px;
  height: auto;
}


/* Gaming Screen */

.gameScreen {
  border: 1px solid green;
}

td > div {
  font-size: 76px;
  background-color: green;
  overflow: hidden;
  border: 2px solid black;
  height: 100px;
  width: 132px;
}


/* End Gaming Screen */


/* Controls */

.controls {
  background-color: darkgreen;
  width: auto;
  height: auto;
  border: 1px solid green;
}


/* EndControls */

/*Downloaded from https://www.codeseek.co/gabriele-gentile/tic-tac-toe-YNzzRL */
//$("$document").ready(function() {

var app = angular.module("tictactoe", []);
app.controller("tictactoeCtrl", function($scope, $interval) {

  $scope.playerOne = "";
  $scope.playerTwo = "";
  $scope.playerTurn = "";
  $scope.playerOneWins = 0;
  $scope.playerTwoWins = 0;
  $scope.draw = 0;
  $scope.turn = "";
  $scope.turnCompare = "";
  $scope.aiBool = false;
  $scope.winner = "";

  $scope.positionsArray = []; // 0-8
  $scope.positionsArray[0] = "";
  $scope.positionsArray[1] = "";
  $scope.positionsArray[2] = "";
  $scope.positionsArray[3] = "";
  $scope.positionsArray[4] = "";
  $scope.positionsArray[5] = "";
  $scope.positionsArray[6] = "";
  $scope.positionsArray[7] = "";
  $scope.positionsArray[8] = "";

  $scope.winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [6, 4, 2]
  ];

  $scope.pvp = function() {
    $(".playerSelectScreen").hide();
    $(".selectScreen").show();
    $scope.aiBool = false;
  }

  $scope.pvai = function() {
    $(".playerSelectScreen").hide();
    $(".selectScreen").show();
    $scope.aiBool = true;
  }

  $scope.chose = function(turnElem) {
    $(".selectScreen").hide();
    $(".gameScreen").show();
    $(".controls").show();
    switch (turnElem) {
      case "x":
        $scope.playerOne = "x";
        $scope.playerTwo = "o";
        break;
      case "o":
        $scope.playerOne = "o";
        $scope.playerTwo = "x";
        break;
    }
    $scope.turnDue();
  }

  $scope.turnDue = function() {
    var randomise = (Math.floor(Math.random() * 2));
    if (randomise && !$scope.aiBool) {
      $scope.turn = $scope.playerOne;
      $scope.playerTurn = "Player One Turn";
    } else {
      $scope.turn = $scope.playerTwo;
      if ($scope.aiBool) {
        $scope.aiTurn();
      }
      $scope.playerTurn = "Player Two Turn";
    }
  }

  $scope.reset = function(boolElem) {
    for (var a = 0; a < 9; a++) {
      $scope.positionsArray[a] = "";
    }
    if (boolElem) {
      $scope.turnDue();
    } else {
      $scope.playerOneWins = 0;
      $scope.playerTwoWins = 0;
      $scope.draw = 0;
      $(".gameScreen").hide();
      $(".controls").hide();
      $(".playerSelectScreen").show();
    }
  }

  // better set to automatically trigger when the grid is full!
  $scope.checkWinner = function() {
    var b = 1;
    var c = 1;
      for (var a=0 ; a < 9; a++) {
        if ($scope.positionsArray[a] != "") {
          b ++;
        }
        c++;
        var comparatorZero = $scope.winningCombinations[a][0];
        var comparatorOne = $scope.winningCombinations[a][1];
        var comparatorTwo = $scope.winningCombinations[a][2];

        if ($scope.positionsArray[comparatorZero] === $scope.turnCompare && $scope.positionsArray[comparatorOne] === $scope.turnCompare && $scope.positionsArray[comparatorTwo] === $scope.turnCompare) {
          $scope.declareWinner($scope.turnCompare);
           $scope.reset(true);
        } else if (b >= 9){
           $scope.declareWinner();
           $scope.reset(true);
        } else if (c >= 9 && $scope.aiBool && $scope.turn === $scope.playerTwo){
          $scope.aiTurn();
        }
      } // Loop End. No Code Executes after this!
    } // Function End

  $scope.declareWinner = function(winnerElem) {
    var winner;
    if ($scope.playerOne === winnerElem) {
      winner = "Player One Wins!";
      $scope.playerOneWins += 1;
    } else if (($scope.playerTwo === winnerElem)) {
      winner = "Player Two Wins!";
      $scope.playerTwoWins += 1;
    } else {
      winner = "It's a Draw";
      $scope.draw += 1;
    }
    $scope.winner = winner;
    $("#winner").show("slow", function() {
      $("#winner").slideUp(1500, function() {
      });
    });
  }

  $scope.changePlayer = function(turnElem) {
    $scope.turnCompare = turnElem;

    switch ($scope.turn) {
      case $scope.playerOne:
        $scope.playerTurn = "Player Two Turn";
        $scope.turn = $scope.playerTwo;
        break;
      case $scope.playerTwo:
        $scope.playerTurn = "Player One Turn";
        $scope.turn = $scope.playerOne;
        break;
    }
    $scope.checkWinner();
  }

  $scope.zero = function(posElem) {
    if ($scope.aiBool && $scope.turn === $scope.playerTwo) {
      $scope.aiTurn();
    } else if ($scope.positionsArray[posElem] != "") {
      return;
    }
    $scope.positionsArray[posElem] = $scope.turn;
    $scope.changePlayer($scope.turn);
  }

  $scope.aiTurn = function() {
    var random = (Math.floor(Math.random() * 10));
    if ($scope.positionsArray[random] === "") {
      $scope.positionsArray[random] = $scope.turn;
      $scope.changePlayer($scope.turn);
    } else {
      $scope.aiTurn();
    }
  }

});

//});

Comments