Skip to content

Instantly share code, notes, and snippets.

@ZebGirouard

ZebGirouard/GppKaa.markdown

Created September 23, 2015 02:36
Show Gist options
  • Save ZebGirouard/16e744e745c6a783aa1a to your computer and use it in GitHub Desktop.
Save ZebGirouard/16e744e745c6a783aa1a to your computer and use it in GitHub Desktop.
Download ZIP
GppKaa
Raw
index.html
<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>
Raw
script.js
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);
}
});
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
.well {
background-color: black;
height: 200px;
margin: 0 auto;
color: white;
font-size: 48px;
}
h1 {
font-family: Lobster;
font-size: 48px;
}
Raw
styles
<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