cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="header">
  <h1>Try your luck</h1></div>
<div id="board">
  <div class="row">
    <div class="boardSquare" id="1"><p><i class="fa fa-times-circle"></i></p></div>
    <div class="boardSquare" id="2"><p><i class="fa fa-times-circle"></i></p></div>
    <div class="boardSquare" id="3"><p><i class="fa fa-times-circle"></i></p></div>
  </div>
  <div class="row">
    <div class="boardSquare" id="4"><p><i class="fa fa-times-circle"></i></p></div>
    <div class="boardSquare" id="5"><p><i class="fa fa-times-circle"></i></p></div>
    <div class="boardSquare" id="6"><p><i class="fa fa-times-circle"></i></p></div>
  </div>
  <div class="row">
    <div class="boardSquare" id="7"><p><i class="fa fa-times-circle"></i></p></div>
    <div class="boardSquare" id="8"><p><i class="fa fa-times-circle"></i></p></div>
    <div class="boardSquare" id="9"><p><i class="fa fa-times-circle"></i></p></div>
  </div>
</div>

<div id="popup">

</div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Glegoo);
body {
  background-color: #ddd;
  font-family: 'Glegoo', sans-serif;
  text-align: center;
  min-width: 260px;
}

h1 {
  margin: 0px 40px 0px 40px;
  color: black;
  font-size: 1.8em;
}

h3 {
  margin: 10px;
}

#board {
  margin: auto;
  background-color: #ddd;
}

.row {
  display: block;
  margin: auto;
}

.boardSquare {
  display: inline-block;
  margin: 3px;
  background-color: black;
  height: 200px;
  cursor: pointer;
}

.token {
  display: block;
}

.boardSquare .fa {
  font-size: 3em;
}

#popup {
  position: absolute;
  margin: auto;
  display: none;
  background-color: white;
  opacity: 0.9;
}

#popup p {
  margin: 10px;
}

.fa-times-circle {
  color: black;
  font-weight: 700;
}

.fa-circle-o,
.fa-close {
  color: white;
}

#popup .fa {
  font-size: 1.8em;
  margin: 10px;
  color: black;
  cursor: pointer;
}

button.refresh {
  background: none;
  border: 1px solid #ddd;
  box-shadow: 3px 3px 1px #ddd;
  margin-bottom: 20px;
}

button.refresh:hover {
  background: #ddd;
}
            
          
!
            
              // Variable definition
var freeSquare = '<p><i class="fa fa-times-circle"></i></p>';
var X = '<p><i class="fa fa-close"></i></p>';
var O = '<p><i class="fa fa-circle-o"></i></p>';
var userToken = O;
var appToken = X;
var totalWidth = 0.8 * Math.min($(window).width(), $(window).height());
if (totalWidth < 260) {
  totalWidth = 260;
}
var taken = {
  '1': [0],
  '2': [0],
  '3': [0],
  '4': [0],
  '5': [0],
  '6': [0],
  '7': [0],
  '8': [0],
  '9': [0],
};
var available = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var winScenario = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
  [1, 4, 7],
  [2, 5, 8],
  [3, 6, 9],
  [1, 5, 9],
  [3, 5, 7]
];
var appsTurn = true;
var appChoice = null;
var numTurns = 0;
var cont = true;

function gameOn() { // Game on little popup, not really necessary.
  $('#popup').stop().slideUp(function() {
    $('#popup').html('<h3>Game on!</h3>').slideDown().delay(1500).slideUp();
  });
  appsTurn = false; // Prevents user clicking prior to game starting
}

function refresh() { // Clear board and reset variables for new game
  $('#popup').stop().effect('puff');
  $('.boardSquare').each(function() {
    $(this).html(freeSquare);
    taken = {
      '1': [0],
      '2': [0],
      '3': [0],
      '4': [0],
      '5': [0],
      '6': [0],
      '7': [0],
      '8': [0],
      '9': [0],
    };
    available = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    lastTurn = null;
    appChoice = null;
    numTurns = 0;
    cont = true;
    appsTurn = false;
  });
}

$(document).ready(function() {

  // Setup board size to 80% of viewport
  function boardSetup() {
    $('#board').width(totalWidth);
    var squareWidth = Math.floor((totalWidth - 30) / 3);
    $('.boardSquare').width(squareWidth).height(squareWidth);
    var tokenMargin = (squareWidth - $('.boardSquare .fa').height()) / 2;
    $('.boardSquare p').each(function() {
      $(this).css('margin', tokenMargin);
    });
    freeSquare = $('.boardSquare').html();
    X = '<p style="margin: ' + tokenMargin + 'px;"><i class="fa fa-close"></i></p>';
    O = '<p style="margin: ' + tokenMargin + 'px;"><i class="fa fa-circle-o"></i></p>';
  }

  // User can select which token to play with
  function chooseOX() {
    $('#popup').width((totalWidth / 1.3)).html('<h3>Which arbitrary shape best defines you as a person?<br><i class="fa fa-circle-o"></i> or <i class="fa fa-close"></i></h3>').css({
      'top': (($('#board').height() + $('#header').height() - $('#popup').height()) / 2),
      'left': (($(window).width() - (totalWidth / 1.3)) / 2)
    }).delay(1000).effect('slide', '20');
    $('.fa-close').click(function() {
      userToken = X;
      appToken = O;
      gameOn();
    });
    $('.fa-circle-o').click(function() {
      userToken = O;
      appToken = X;
      gameOn();
    });
  }

  function checkWin(player, lastTurn) { // Checks for win based on the last turn, split into cases to speed up processing of winPoss.map
    switch (parseInt(lastTurn)) {
      case 1:
        var winPoss = [
          [1, 2, 3],
          [1, 4, 7],
          [1, 5, 9]
        ];
        break;
      case 2:
        var winPoss = [
          [1, 2, 3],
          [2, 5, 8]
        ];
        break;
      case 3:
        var winPoss = [
          [1, 2, 3],
          [3, 6, 9],
          [3, 5, 7]
        ];
        break;
      case 4:
        var winPoss = [
          [4, 5, 6],
          [1, 4, 7]
        ];
        break;
      case 5:
        var winPoss = [
          [1, 5, 9],
          [3, 5, 7],
          [2, 5, 8],
          [4, 5, 6]
        ];
        break;
      case 6:
        var winPoss = [
          [4, 5, 6],
          [3, 6, 9]
        ];
        break;
      case 7:
        var winPoss = [
          [1, 4, 7],
          [7, 8, 9],
          [3, 5, 7]
        ];
        break;
      case 8:
        var winPoss = [
          [2, 5, 8],
          [7, 8, 9]
        ];
        break;
      case 9:
        var winPoss = [
          [7, 8, 9],
          [3, 6, 9],
          [1, 5, 9]
        ];
        break;
    }

    var wins = winPoss.map(function(i) {
      var score = taken[i[0]][0] + taken[i[1]][0] + taken[i[2]][0];
      if (score === 3 && taken[i[0]][1] === player && taken[i[1]][1] === player && taken[i[2]][1] === player) {
        cont = false;
        if (player === 'user') {
          for (k = 0; k < 3; k++) {
            $('#' + i[k] + ' .fa').css('color', '#00b300');
          }
          $('#popup').html('<h3>You win!</h3><p>This also means my app has failed :(</p><button class="refresh" onclick="refresh()"><i class="fa fa-refresh"></i></button>').effect('pulsate');
        } else {
          for (k = 0; k < 3; k++) {
            $('#' + i[k] + ' .fa').css('color', '#cc0000');
          }
          $('#popup').html('<h3>You lose!</h3><p>but don\'t feel too bad, you can\'t actually win...</p><button class="refresh" onclick="refresh()"><i class="fa fa-refresh"></i></button>').delay(500).effect('pulsate');
        }
      }
    });
  }

  function chooseRandom(nums) { // General function to select a random square from a given set of numbers
    if (nums) {
      // Remove any squares from nums array that have already been played
      for (i = 0; i < nums.length; i++) {
        if (taken[nums[i]][0] === 1) {
          var remove = nums.splice(nums.indexOf(nums[i]), 1);
          i--;
        }
      }
    } else if (!nums) {
      // If no arguments are provided pick randomly from all available squares
      nums = available;
    }
    var choice = nums[Math.floor((Math.random() * nums.length))];
    if (taken[choice][0] === 1) {} else {
      return choice;
    }
  }

  function makeMove(player, square) {
    if (player === 'app') {
      $('#' + square).html(appToken);
    }
    taken[square] = [1, player];
    var remove = available.splice(available.indexOf(parseInt(square)), 1);
    if (player === 'app') {
      appChoice = null;
    }
    numTurns++;
    checkWin(player, square);
  }

  function appTurn() {
    // If first turn try for centre else pick a random corner
    if (numTurns === 1) {
      if (taken['5'][0] === 0) {
        appChoice = 5;
      } else {
        appChoice = chooseRandom([1, 3, 7, 9]);
      }
    } else {
      // Check for two in a row to either block user win or claim app win
      var winChoice = null;
      var blockOrWin = null;
      var wins = winScenario.map(function(i) {
        var score = taken[i[0]][0] + taken[i[1]][0] + taken[i[2]][0];
        if (score === 2 && ((taken[i[0]][1] === taken[i[1]][1]) || (taken[i[0]][1] === taken[i[2]][1]) || (taken[i[2]][1] === taken[i[1]][1]))) {
          for (j = 0; j < i.length; j++) {
            if (taken[i[j]][0] === 0) {
              appChoice = i[j];
              if (taken[i[0]][1] === 'app' || taken[i[1]][1] === 'app') {
                winChoice = appChoice;
              }
            }
          }
        }
      });
      if (winChoice) {
        appChoice = winChoice;
      } else if (!appChoice) {
        if (numTurns === 3 && taken['5'][1] === 'app') { // could have gone in corner or on edge
          if (taken['1'][0] + taken['3'][0] + taken['7'][0] + taken['9'][0] === 0) { // user took two side squares
            if (taken['2'][1] === 'user') {
              if (taken['4'][1] === 'user') {
                appChoice = 1;
              } else if (taken['6'][1] === 'user') {
                appChoice = 3;
              }
            } else if (taken['8'][1] === 'user') {
              if (taken['4'][1] === 'user') {
                appChoice = 7;
              } else if (taken['6'][1] === 'user') {
                appChoice = 9;
              }
            }
          } else if (taken['1'][0] + taken['3'][0] + taken['7'][0] + taken['9'][0] === 1) { // user took one corner and one side
            if (taken['2'][1] === 'user' || taken['8'][1] === 'user') {
              appChoice = chooseRandom([4,6]);
            } else {
              appChoice = chooseRandom([2,8]);
            }
          } else { // user took two opposing corners
            appChoice = chooseRandom([2, 4, 6, 8]);
          }
        } else if (taken['1'][0] === 0 && taken['3'][0] === 0 && taken['7'][0] === 0 && taken['9'][0] === 0) {
          appChoice = chooseRandom([1, 3, 7, 9]);
        } else if (taken['1'][0] + taken['3'][0] + taken['7'][0] + taken['9'][0] === 1) {
          if (taken['1'][0] === 1) {
            appChoice = 9;
          } else if (taken['3'][0] === 1) {
            appChoice = 7;
          } else if (taken['7'][0] === 1) {
            appChoice = 3;
          } else if (taken['9'][0] === 1) {
            appChoice = 1;
          }
        } else if (taken['1'][0] === 0 || taken['3'][0] === 0 || taken['7'][0] === 0 || taken['9'][0] === 0) {
          appChoice = chooseRandom([1, 3, 7, 9]);
        } else {
          appChoice = chooseRandom([2, 4, 6, 8]);
        }
      }
    }
    var appsLastTurn = appChoice;
    makeMove('app', appChoice);
    appsTurn = false;
  }

  $('.boardSquare').click(function() {
    if ($(this).html() === freeSquare && appsTurn === false && cont === true) {
      $(this).html(userToken);
      var square = $(this).attr('id');
      makeMove('user', square);

      if (cont) {
        if (numTurns < 9) {
          appsTurn = true;
          appTurn();
        } else if (numTurns === 9) {
          $('#popup').html('<h3>A draw?</h3><p>Typical... one more time?</p><button class="refresh" onclick="refresh()"><i class="fa fa-refresh"></i></button>').effect('slide').css('opacity', 0.9);
        }
      }
    }

  });

  // Function calls
  boardSetup();
  chooseOX();

})
            
          
!
999px
Loading ..................

Console