rOodgW

app.js

$(function() {

  var squares = [],
    SIZE = 3,
    EMPTY = " ",
    score,
    moves,
    turn = "X",

    /*
     * To determine a win condition, each square is "tagged" from left
     * to right, top to bottom, with successive powers of 2.  Each cell
     * thus represents an individual bit in a 9-bit string, and a
     * player's squares at any given time can be represented as a
     * unique 9-bit value. A winner can thus be easily determined by
     * checking whether the player's current 9 bits have covered any
     * of the eight "three-in-a-row" combinations.
     *
     *     273                 84
     *        \               /
     *          1 |   2 |   4  = 7
     *       -----+-----+-----
     *          8 |  16 |  32  = 56
     *       -----+-----+-----
     *         64 | 128 | 256  = 448
     *       =================
     *         73   146   292
     *
     */
    wins = [7, 56, 448, 73, 146, 292, 273, 84],

    /*
     * Clears the score and move count, erases the board, and makes it
     * X's turn.
     */
    startNewGame = function() {
      turn = "X";
      score = {
        "X": 0,
        "O": 0
      };
      moves = 0;
      squares.forEach(function(square) {
        square.html(EMPTY);
      });
    },

    /*
     * Returns whether the given score is a winning score.
     */
    win = function(score) {
      for (var i = 0; i < wins.length; i += 1) {
        if ((wins[i] & score) === wins[i]) {
          return true;
        }
      }
      return false;
    },

    /*
     * Sets the clicked-on square to the current player's mark,
     * then checks for a win or cats game.  Also changes the
     * current player.
     */
    set = function() {

      if ($(this).html() !== EMPTY) {
        return;
      }
      $(this).html(turn);
      console.log($(this));
      moves += 1;
      score[turn] += $(this)[0].indicator;
      console.log(score[turn]);
      if (win(score[turn])) {
        alert("Player " + turn + " wins!");
        startNewGame();
      } else if (moves === SIZE * SIZE) {
        alert("Tie!");
        startNewGame();
      } else {
        turn = turn === "X" ? "O" : "X";
      }
    },

    /*
     * Creates and attaches the DOM elements for the board as an
     * HTML table, assigns the indicators for each cell, and starts
     * a new game.
     */
    play = function() {
      var board = $("<table border=1 cellspacing=0>"),
        indicator = 1;
      for (var i = 0; i < SIZE; i += 1) {
        var row = $("<tr>");
        board.append(row);
        for (var j = 0; j < SIZE; j += 1) {
          var cell = $("<td height=50 width=50 align=center valign=center></td>");
          cell[0].indicator = indicator;
          cell.click(set);
          row.append(cell);
          squares.push(cell);
          indicator += indicator;
        }
      }

      // Attach under tictactoe if present, otherwise to body.
      $(document.getElementById("tictactoe") || document.body).append(board);
      startNewGame();
    };

  play();
  $('#reset').click(function() {
    if (confirm("Are you sure that you want to restart?")) {
      startNewGame();
    }
  });
  $('#showHide').click(function() {
    $('#tictactoe').slideToggle();
  });
  $('h3').click(function() {
    $('p').slideToggle();
  });
  $("#menuOpen").click(function() {
    $('.menu').slideToggle();
  })
  $(document).ready(function() {
    $('.menu').hide();
    $('p').hide();
    $('.closeOn').hide();
  });
  $('.title').click(function() {
    $('.closeOn').slideToggle();
  });
});

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h2 class="title" name="anchor_name">Tic-Tac-Toe</h2>
<div class="closeOn">
  <figure>
    <img src="http://michaelpitt.me/application/theme/images/menu-icon.png" id="menuOpen" align="center"></img>
    <figcaption>More...</figcaption>
  </figure>
  <div class="menu">
    <div id="slide"><a id="showHide">Show/hide game</a>
    </div>
  </div>
  <div id="tictactoe" align="center"></div>
  <div id="HowTo" class="menu">
    <h3>How to play</h3>

    <p>Tic-tac-toe (also known as 'Noughts and crosses' or 'Xs and Os') is a game for two players, X and O, who take turns marking the spaces in a 3x3 grid. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row
      wins the game.</p>
  </div>
  <div class="menu">
    <div id="reset">
      <figure>
        <img src="https://image.freepik.com/free-icon/restart_318-1763.jpg" id="restart">
        <figcaption>Restart</figcaption>
      </figure>
    </div>
  </div>
</div>

rOodgW.markdown

rOodgW

A Pen by 684386 on CodePen.

License.

style.css

body {
  border: 1px solid black;
  text-align: center;
  font-family: Trebuchet MS;
}

#reset {
  padding-top: 0px;
  padding-bottom: 15px;
}

#slide {
  padding-top: 5px;
}

#tictactoe {
  padding-left: 0px;
  padding-top: 15px;
  font-family: Trebuchet MS;
}

p {
  margin-left: 15%;
  margin-right: 15%;
  text-align: left;
}

td:hover {
  background-color: #E4E4E4;
}

#menuOpen {
  height: 50px;
  width: 50px;
}

#restart {
  border: 1px solid black;
  background-color: transparent;
  padding-top: 0px;
  width: 50px;
  height: 50px;
}