Skip to content

Instantly share code, notes, and snippets.

@linzjax

linzjax/TicTacToe.markdown

Last active August 29, 2015 14:20
Show Gist options
  • Save linzjax/4b019f696daf6dc95fc7 to your computer and use it in GitHub Desktop.
Save linzjax/4b019f696daf6dc95fc7 to your computer and use it in GitHub Desktop.
Download ZIP
TicTacToe
Raw
index.html
<!DOCType HTML>
<html>
<head>
<link href="tictactoe.css" rel="stylesheet">
</head>
<body>
<div class='keepingScore'>
<p><span class='player1'>PLAYER ONE: <span class='xScore'>0</span></span><span class='player2'> PLAYER TWO: <span class='oScore'>0</span></span>
</p>
</div>
<div class='wrap'>
<div class='game'>
<a href='#' class='trigger square1'></a>
<a href='#' class='trigger square2'></a>
<a href='#' class='trigger square3'></a>
<a href='#' class='trigger square4'></a>
<a href='#' class='trigger square5'></a>
<a href='#' class='trigger square6'></a>
<a href='#' class='trigger square7'></a>
<a href='#' class='trigger square8'></a>
<a href='#' class='trigger square9'></a>
</div>
<div class='score'>
<button class='resetGame'>NEW GAME</button>
<button class='resetScore'>RESET SCORE</button>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="tictactoe.js" type="text/javascript"></script>
</html>
Raw
script.js
/* so the way I want this to work
possible winning combinations:
123
456
789
147
258
369
159
357
*/
//player1's score:
var xCount = 0;
//player2's score:
var oCount = 0;
//to track whose turn it is
var countClick = 2;
//if the game has ended
var win = false;
function hasWon(whichClass){
if ($('.square1').hasClass(whichClass) && $('.square2').hasClass(whichClass) && $('.square3').hasClass(whichClass)) {
win = true;
//disable clicking on all squares
$('.trigger').css('pointer-events', 'none');
} else if ($('.square4').hasClass(whichClass) && $('.square5').hasClass(whichClass) && $('.square6').hasClass(whichClass)) {
win = true;
$('.trigger').css('pointer-events', 'none');
} else if ($('.square7').hasClass(whichClass) && $('.square8').hasClass(whichClass) && $('.square9').hasClass(whichClass)) {
win = true;
$('.trigger').css('pointer-events', 'none');
} else if ($('.square1').hasClass(whichClass) && $('.square5').hasClass(whichClass) && $('.square9').hasClass(whichClass)) {
win = true;
$('.trigger').css('pointer-events', 'none');
} else if ($('.square3').hasClass(whichClass) && $('.square5').hasClass(whichClass) && $('.square7').hasClass(whichClass)) {
win = true;
$('.trigger').css('pointer-events', 'none');
} else if ($('.square1').hasClass(whichClass) && $('.square4').hasClass(whichClass) && $('.square7').hasClass(whichClass)) {
win = true;
$('.trigger').css('pointer-events', 'none');
} else if ($('.square2').hasClass(whichClass) && $('.square5').hasClass(whichClass) && $('.square8').hasClass(whichClass)) {
win = true;
$('.trigger').css('pointer-events', 'none');
} else if ($('.square3').hasClass(whichClass) && $('.square6').hasClass(whichClass) && $('.square9').hasClass(whichClass)) {
win = true;
$('.trigger').css('pointer-events', 'none');
}
}
//what happens when a player clicks
function playerPicks(squareClicked, whichClass) {
//changes who's turn it is
//adds the appropriate class to whichever square was clicked
$(squareClicked).addClass(whichClass);
//makes sure that square cannot be clicked again
$(squareClicked).css('pointer-events', 'none');
//if there are three connecting squares, that player wins
hasWon(whichClass);
countClick += 1;
};
//The actual game
function playGame() {
$('.trigger').click(function(e) {
e.preventDefault();
//determines whose turn it is
if (countClick % 2 == 0) {
//player1's turn
playerPicks(this, 'itsAnX');
//if they have three squares in a row
if (win == true){
//increase their score by 1
xCount++;
//reflect their new score on the page
$('.xScore').html(xCount);
//restart the game
win = false;
}
} else if (countClick % 2 !== 0){
//player2's turn
playerPicks(this, 'itsAnO');
if (win == true){
oCount++;
$('.oScore').html(oCount);
win = false;
}
}
});
};
//clicking on this button will start a new game
function resetButton() {
$(".resetGame").click(function() {
//by removing all classes
$('.trigger').removeClass('itsAnX');
$('.trigger').removeClass('itsAnO');
//and enable clicks again
$('.trigger').css('pointer-events', 'auto')
})
}
//this button resets the game and any accumulated scores
function resetAllButton() {
$(".resetScore").click(function() {
$('.trigger').removeClass('itsAnX');
$('.trigger').removeClass('itsAnO')
$('.trigger').css('pointer-events', 'auto')
//returns scores to 0
$('.xScore').html(0);
$('.oScore').html(0);
xCount = 0;
oCount = 0;
})
}
$(document).ready(playGame());
$(document).ready(resetButton());
$(document).ready(resetAllButton());
Raw
style.css
body {
width: 100%;
background: -webkit-radial-gradient(gray 1%, black);
background: -o-radial-gradient(gray 1%, black);
background: -moz-radial-gradient(gray 1%, black);
background: radial-gradient(gray 1%, black);
background-size: cover;
}
.wrap {
width: 700px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.game {
width: 515px;
height: 515px;
padding: 0;
margin: 0 auto;
margin-top: 40px;
margin-bottom: 20px;
background-color: black;
}
.trigger {
width: 167px;
height: 168px;
background-color: #FFF8E0;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
}
.itsAnX {
background-color: #5CF64A;
pointer-events: none;
}
.itsAnO {
background-color: #F59CA9;
pointer-events: none;
}
.score {
width: 509px;
margin: 0 auto;
padding: 0 auto;
text-align: center;
padding-bottom: 20px;
}
button {
width: 200px;
height: 30px;
border: 4px solid black;
background-color: #FFF8E0;
font-family: 'Verdana';
font-size: 1em;
font-style: bold;
margin: 0 20px;
}
.resetGame:hover {
background-color: #5CF64A;
}
.resetScore:hover {
background-color: #F59CA9
}
.keepingScore {
width: 80%;
margin: 0 auto;
padding: 0 auto;
text-align: center;
}
.player1 {
font-family: 'Verdana';
font-size: 1em;
font-style: bold;
color: white;
padding-right: 30%;
}
.xScore {
font-size: 2em;
color: white;
text-shadow: 0px 0px 10px #5CF64A;
}
.player2 {
font-family: 'Verdana';
font-size: 1em;
font-style: bold;
color: white;
}
.oScore {
font-size: 2em;
color: white;
text-shadow: 0px 0px 10px #F59CA9;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment