Created
November 12, 2015 23:52
-
-
Save rishiosaur/7fa3fc390c7a39c62aa6 to your computer and use it in GitHub Desktop.
ZbVyEd
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> | |
<p>Click the title to access the page!</p> | |
<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 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 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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(); | |
}) | |
$(document).ready(function() { | |
$('.menu').hide(); | |
$('#howTo').hide(); | |
$('.closeOn').hide(); | |
}); | |
$('.title').click(function() { | |
$('.closeOn').slideToggle(); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
#howTo { | |
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment