rishiosaur/Tic-Tac-Toe-2.markdown

## index.html
<head>
  <meta charset="UTF-8">
  <title>A Pen by 684386</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="css/style.css">
  <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <div class="title">
    <h2 name="anchor_name">Tic-Tac-Toe</h2>
    <i class="material-icons" style="font-size:50px;" id="more">arrow_drop_down</i>
  </div>
  <div class="closeOn">
    <figure>
      <i class="material-icons" id="menuOpen" style="font-size:50px;">more_horiz
</i>
    </figure>
    <div class="menu1">
      <div id="HowTo" class="menu">
      <h3>How to play</h3>

      <p id="howTo">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 id="slide"><a id="showHide" class="menu">Show/Hide game</a>
      </div>
    </div>
    <div id="tictactoe" align="center"></div>
    <div id="reset">
      <i class="material-icons" style="font-size:50px;" id="restart">refresh</i>
    </div>

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

## script.js
$(function() {

  var squares = [],
    SIZE = 3,
    EMPTY = "&nbsp;",
    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() {
    $('#howTo').slideToggle();
  });
  $("#menuOpen").click(function() {
    $('.menu').slideToggle('medium');
  })
  $(document).ready(function() {
    $('.menu').hide();
    $('#howTo').hide();
    $('.closeOn').hide();
  });
  $('#more').click(function() {
    $('.closeOn').slideToggle('medium');
  });
  $('#menuOpen').dblclick(function(){
    $('#howTo').hide();
  });
  $('#menuOpen').click(function(){
    $('#howTo').hide();
  });
});

## style.css
body {
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
  text-align: center;
  font-family: 'Poiret One', cursive;
  background-size:cover;
  background: url(http://www.montres-militaire.com/resources/website/en-us/images/collection/bg-collection1.jpg);
}

#reset {
  padding-top: 0px;
}

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

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

td:hover {
  background-color: rgba(0, 0, 0, 0.2)
}

#howTo {
  margin-left: 20%;
  margin-right: 20%;
  text-align: left;
}

#more {
  padding-top: 5px;
}

.material-icons {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.6)
}

.title {
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 1)
}

#more {
  padding-top: 5px;
}

#more:active {
  color: gray;
}

.material-icons:hover {
  color: gray;
}

## Tic-Tac-Toe-2.markdown

      
    Raw
  

              Tic-Tac-Toe-2.markdown
            
          
    Tic-Tac-Toe-2

A Pen by 684386 on CodePen.
License.
	<head>
	<meta charset="UTF-8">
	<title>A Pen by 684386</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="css/style.css">
	<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
	</head>

	<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<div class="title">
	<h2 name="anchor_name">Tic-Tac-Toe</h2>
	<i class="material-icons" style="font-size:50px;" id="more">arrow_drop_down</i>
	</div>
	<div class="closeOn">
	<figure>
	<i class="material-icons" id="menuOpen" style="font-size:50px;">more_horiz
	</i>
	</figure>
	<div class="menu1">
	<div id="HowTo" class="menu">
	<h3>How to play</h3>

	<p id="howTo">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 id="slide"><a id="showHide" class="menu">Show/Hide game</a>
	</div>
	</div>
	<div id="tictactoe" align="center"></div>
	<div id="reset">
	<i class="material-icons" style="font-size:50px;" id="restart">refresh</i>
	</div>

	</div>
	<script src="js/index.js"></script>
	</body>
	$(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() {
	$('#howTo').slideToggle();
	});
	$("#menuOpen").click(function() {
	$('.menu').slideToggle('medium');
	})
	$(document).ready(function() {
	$('.menu').hide();
	$('#howTo').hide();
	$('.closeOn').hide();
	});
	$('#more').click(function() {
	$('.closeOn').slideToggle('medium');
	});
	$('#menuOpen').dblclick(function(){
	$('#howTo').hide();
	});
	$('#menuOpen').click(function(){
	$('#howTo').hide();
	});
	});
	body {
	background-color: rgba(0, 0, 0, 0.2);
	color: white;
	text-align: center;
	font-family: 'Poiret One', cursive;
	background-size:cover;
	background: url(http://www.montres-militaire.com/resources/website/en-us/images/collection/bg-collection1.jpg);
	}

	#reset {
	padding-top: 0px;
	}

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

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

	td:hover {
	background-color: rgba(0, 0, 0, 0.2)
	}

	#howTo {
	margin-left: 20%;
	margin-right: 20%;
	text-align: left;
	}

	#more {
	padding-top: 5px;
	}

	.material-icons {
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.6)
	}

	.title {
	border-radius: 10px;
	padding-left: 10px;
	padding-right: 10px;
	display: inline-block;
	background-color: rgba(0, 0, 0, 1)
	}

	#more {
	padding-top: 5px;
	}

	#more:active {
	color: gray;
	}

	.material-icons:hover {
	color: gray;
	}