TTT Game

In this example below you will see how to do a TTT Game with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>TTT Game</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
    <main ng-app="TTTApp" ng-controller="TTTController" class="ver_hor_center">
        <div id="choose-type" class="ver_hor_center" ng-show="!userIcon">
            <p>Would you like to be X or O?</p>
            <p>
                <span id="type-X" class="user-type" ng-click="chooseIcon('X')">X</span>&nbsp
                <span id="type-O" class="user-type" ng-click="chooseIcon('O')">O</span>
            </p>
        </div>
        
        <div class="game-result" ng-show="result">
            <p ng-bind="winner"></p>
            <button class="reset-game">RESTART</button>
        </div>
        <div id="game-panel" ng-show="userIcon">
            <div class="row">
                <div class="single-unit"></div>
                <div class="single-unit"></div>
                <div class="single-unit"></div>
            </div>
            
            <div class="row">
                <div class="single-unit"></div>
                <div class="single-unit"></div>
                <div class="single-unit"></div>
            </div>
            
            <div class="row">
                <div class="single-unit"></div>
                <div class="single-unit"></div>
                <div class="single-unit"></div>
            </div>
        </div>
    </main>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/19920612/ttt-game-xREoKN */
main{
  margin-top: 300px;
}
* {
  margin: 0px;
  padding: 0px;
  font: 100% "Architects Daughter", Helvetica, sans-serif; }

main {
  width: 300px;
  height: 300px;
  background: -webkit-radial-gradient(center, farthest-corner, red, green, blue);
  text-align: center; }

.ver_hor_center {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

main #choose-type {
  color: white; }
main .user-type {
  cursor: pointer;
  font-size: 2em;
  margin: 5%; }

#game-panel {
  height: 100%;
  width: 100%; }

#game-panel .row {
  height: 100px;
  width: 100%; }
#game-panel .single-unit {
  float: left;
  width: 100px;
  height: 100%;
  border: 1px solid white;
  box-sizing: border-box; }

.single-unit.iconX:before,
.single-unit.iconX:after {
  content: '';
  width: 70px;
  height: 5px;
  background-color: white;
  display: inline-block;
  position: relative; }

.single-unit.iconX:before {
  transform: rotate(-45deg);
  left: 1px;
  top: 41px; }

.single-unit.iconX:after {
  transform: rotate(45deg);
  right: -5px;
  top: 24px; }

.single-unit.iconO:before {
  content: '';
  width: 70px;
  height: 70px;
  border: 5px solid white;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  top: 15px; }

.game-result {
  position: fixed;
  top: -50px;
  left: 100px;
  width: 100px;
  background: yellow;
  border: 2px solid; }

.reset-game {
  display: none; }

/*# sourceMappingURL=TTT_Game.css.map */


/*Downloaded from https://www.codeseek.co/19920612/ttt-game-xREoKN */
var app = angular.module("TTTApp", []);
app.controller("TTTController", function($scope){
    var userOccurs = [];
    var AIOccurs = [];
    $scope.result = 0;
    $scope.winner = "";
    $scope.chooseIcon = function(iconChoosed){
        $scope.userIcon = iconChoosed;
    }
    $('.reset-game').click(function(){
        window.location.reload();
    });
    $('.single-unit').click(function(){
        if(legalPosition($(this))){
            $(this).addClass($scope.userIcon === 'X' ? 'iconX' : 'iconO');
            for(var i = 0 ; i < 9 ; i++){
                if($($('.single-unit')[i]).is($(this))){
                    console.log("i is:"+i);
                    break;
                }
            }
            userOccurs.push(i);
            calResult();
            //work by AI
            if($scope.result === 0){
                AISetIcon();
                calResult();
            }
        }
    });    
    function legalPosition($position){
        return ($position.attr("class") === "single-unit") && !$position.hasClass('iconX') && !$position.hasClass('iconO')
    }
    function AISetIcon(){
        var i = parseInt(9 * Math.random());
        while(!legalPosition($($('.single-unit')[i]))){
            i = parseInt(9 * Math.random());
        }
        $($('.single-unit')[i]).addClass($scope.userIcon === "X" ? "iconO" : "iconX");
        AIOccurs.push(i);
    }
    function calResult(){
        userOccurs.sort();
        AIOccurs.sort();
        if(userOccurs.length + AIOccurs.length === 9){
            console.log("TIE");
            $scope.winner = "TIE";
            $scope.result = 1;
        }
        if(winGame(userOccurs)){
            console.log("U Win, Game Over");
            $scope.winner = "YOU WIN";
            $scope.result = 2;
            console.log($scope.result);
        }else if(winGame(AIOccurs)){
            console.log("U loose");
            $scope.winner = "YOU LOOSE";
            $scope.result = 3;
        }
        
        $scope.$apply();
    }

    function winGame(arr){
        for(var i = 0 ; i < arr.length ; i++){
            for(var j = i + 1; j < arr.length ; j++){
                for(var k = j + 1; k < arr.length ; k++){
                    if((arr[i] + 3 === arr[j] && arr[j] + 3 === arr[k])||
                    ((arr[i] + 1 === arr[j] && arr[i] + 2 === arr[k] && Math.floor(arr[i] / 3) === Math.floor(arr[j] / 3) && Math.floor(arr[i] / 3) === Math.floor(arr[k] / 3))||
                    (arr[i] + 4 === arr[j] && arr[j] + 4 === arr[k])||
                    ((arr[i] + 2 === arr[j] && arr[j] + 2 === arr[k] && Math.floor(arr[k] / 3) - 1 === Math.floor(arr[j] / 3) && Math.floor(arr[j] / 3) - 1 == Math.floor(arr[i] / 3) / 3)))){
                        return true;
                    }
                }
            }
        }
        return false;
    }
});

Comments