A Pen by Timothy Zeb Girouard on CodePen.
Created
September 23, 2015 02:36
-
-
Save ZebGirouard/16e744e745c6a783aa1a to your computer and use it in GitHub Desktop.
GppKaa
This file contains hidden or 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
<html> | |
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lobster" /> | |
<body class='text-center'> | |
<h1>Tic-Tac-Toe</h1> | |
<div class='container text-center'> | |
<div class='row'> | |
<button class='well col-xs-4 top left' id='1'> | |
</button> | |
<button class='well col-xs-4 top inner' id='2'> | |
</button> | |
<button class='well col-xs-4 top right' id='3'> | |
</button> | |
<button class='well col-xs-4 middle left' id='4'> | |
</button> | |
<button class='well col-xs-4 middle inner' id='5'> | |
</button> | |
<button class='well col-xs-4 middle right' id='6'> | |
</button> | |
<button class='well col-xs-4 bottom left' id='7'> | |
</button> | |
<button class='well col-xs-4 bottom inner' id='8'> | |
</button> | |
<button class='well col-xs-4 bottom right' id='9'> | |
</button> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains hidden or 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
var squares = [1,2,3,4,5,6,7,8,9]; | |
var computerSquares = []; | |
var humanSquares = []; | |
var winConditions = [[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 computerMark = 'X'; | |
var humanMark = 'O'; | |
var gameEnded; | |
var startGame = function() { | |
$('button').each(function() { | |
$(this).text(''); | |
}); | |
}; | |
$(document).ready(function() { | |
startGame(); | |
$('button').each(function() { | |
$(this).click(function() { | |
endGame = function() { | |
humanSquares = []; | |
computerSquares = []; | |
squares = [1,2,3,4,5,6,7,8,9]; | |
$('button').text(''); | |
gameEnded = true; | |
} | |
gameEnded = false; | |
//mark human move | |
humanSquare = $(this) | |
humanSquare.text(humanMark); | |
console.log(humanSquare); | |
humanSquare = parseInt(humanSquare[0].id); | |
humanSquares.push(humanSquare); | |
//remove selection from remaining squares | |
console.log("The human played in square "+humanSquare); | |
humanIndex = squares.indexOf(humanSquare); | |
console.log("Human index is..."+humanIndex); | |
squares.splice(humanIndex,1); | |
//Check if human won | |
winConditions.forEach(function(winCondition, index, array) { | |
if (winCondition.every(function(val) { | |
return humanSquares.indexOf(val) >= 0; })) { | |
alert("Human's a winner!"); | |
endGame(); | |
} | |
}); | |
if (squares.length === 0) { | |
alert("It's a tie!"); | |
endGame(); | |
} | |
if (!gameEnded) { | |
computerIndex = Math.floor(Math.random()*squares.length); | |
computerSquare = squares[computerIndex]; | |
computerSquares.push(computerSquare); | |
console.log("The computer played in "+computerSquare); | |
$('#'+squares[computerIndex]).text(computerMark); | |
squares.splice(computerIndex,1); | |
console.log(squares); | |
//Check if computer won | |
winConditions.forEach(function(winCondition, index, array) { | |
if (winCondition.every(function(val) { return computerSquares.indexOf(val) >= 0; })) { | |
alert("Computer's a winner!"); | |
endGame(); | |
} | |
}); | |
} | |
else { | |
console.log(gameEnded); | |
} | |
}); | |
}); | |
}); |
This file contains hidden or 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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or 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
.well { | |
background-color: black; | |
height: 200px; | |
margin: 0 auto; | |
color: white; | |
font-size: 48px; | |
} | |
h1 { | |
font-family: Lobster; | |
font-size: 48px; | |
} |
This file contains hidden or 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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment