Skip to content

Instantly share code, notes, and snippets.

@jasil1414

jasil1414/index.html

Created October 18, 2016 09:18
Show Gist options
  • Save jasil1414/e802873fe81e2f908ffc4c1b8e5877e1 to your computer and use it in GitHub Desktop.
Save jasil1414/e802873fe81e2f908ffc4c1b8e5877e1 to your computer and use it in GitHub Desktop.
Download ZIP
Tic-Tac-Toe
Raw
index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Bad+Script|Just+Another+Hand|Pacifico|Rock+Salt|Vibur" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-xl-6 col-xl-offset-4 col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-12 col-xs-12 wrapper_box'>
<div class='result'> ABC </div>
<div class='initiate'><div class='greet'>Hello :) </div><div>Choose &nbsp &nbsp <button id='Xchoose' class='btn'>X</button>&nbsp or &nbsp<button id='Ochoose' class='btn'>O</button></div></div>
<div class='col-md-6 col-sm-6 col-xs-12 wrapper_tic_tac'>
<table>
<tr>
<td id='xox0'>&nbsp &nbsp</td>
<td id='xox1'>&nbsp &nbsp</td>
<td id='xox2'>&nbsp &nbsp</td>
</tr>
<tr>
<td id='xox3'>&nbsp &nbsp</td>
<td id='xox4'>&nbsp &nbsp</td>
<td id='xox5'>&nbsp &nbsp</td>
</tr>
<tr>
<td id='xox6'>&nbsp &nbsp</td>
<td id='xox7'>&nbsp &nbsp</td>
<td id='xox8'>&nbsp &nbsp</td>
</tr>
</table>
</div>
<div class='col-md-6 col-sm-6 col-xs-12 score'><div cass='col-xs-12'>You:<span id='userScore'> 0</span></div>
<div cass='col-xs-12'>Computer:<span id='compScore'> 0</span></div>
<button class='btn resetBtn'>Reset</button>
</div>
</div>
<div class="col-xs-12 made_by"> Designed by <a target=_blank href='http://jasil1414.github.io/me'> Jasil</a></div>
</div>
</div>
</body>
</html>
Raw
script.js
$(function() {
/*Initialize an empty Array for all possible the entry*/
var arr = ['e', 'e', 'e', 'e', 'e', 'e', 'e', 'e', 'e'];
/*Fuction to check for win situation */
function checkTerminate(choice) {
function rowCheck() { // check for all row case
for (var i = 0; i <= 6; i += 3) {
if (arr[i] === choice && arr[i] === arr[i + 1] && arr[i + 1] === arr[i + 2]) {
$('#xox' + i).css('color', 'blue');
$('#xox' + (i + 1)).css('color', 'blue');
$('#xox' + (i + 2)).css('color', 'blue');
//console.log('row');
return true;
}
}
}
function columnCheck() {//check for all column case
for (var i = 0; i <= 2; i++) {
if (arr[i] === choice && arr[i] === arr[i + 3] && arr[i + 3] === arr[i + 6]) {
$('#xox' + i).css('color', 'blue');
$('#xox' + (i + 3)).css('color', 'blue');
$('#xox' + (i + 6)).css('color', 'blue');
//console.log('column');
return true;
}
}
}
function diagonalCheck() {//check for two diagonal case
for (var i = 0, j = 4; i <= 2; i = i + 2, j = j - 2) {
if (arr[i] === choice && arr[i] === arr[i + j] && arr[i + j] === arr[i + 2 * j]) {
$('#xox' + i).css('color', 'blue');
$('#xox' + (i + j)).css('color', 'blue');
$('#xox' + (i + 2 * j)).css('color', 'blue');
//console.log('diagonal');
return true;
}
}
}
if ((rowCheck() == true) || (columnCheck() === true) || (diagonalCheck() === true)) {// If any of the condition(row, column, diagonal) is met then return true
return true;
}
}
/*Function to generate the computer choice*/
function comp(choice) {
/*Check for near victory case for rows*/
for (var i = 0; i <= 6; i += 3) {
if ((arr[i] === 'e') && (arr[i + 1] === choice) && (arr[i + 2] === choice)) { //console.log(i);
return i;
} else if ((arr[i + 1] === 'e') && (arr[i + 2] === choice) && (arr[i] === choice)) {
//console.log(i+1);
return i + 1;
} else if ((arr[i + 2] === 'e') && (arr[i + 1] === choice) && (arr[i] === choice)) {
return i + 2;
}
}
/*Check for near victory case for column*/
for (var i = 0; i <= 2; i += 1) {
if ((arr[i] === 'e') && (arr[i + 3] === choice) && (arr[i + 6] === choice)) {
return i;
} else if ((arr[i + 3] === 'e') && (arr[i] === choice) && (arr[i + 6] === choice)) {
return i + 3;
} else if ((arr[i + 6] === 'e') && (arr[i] === choice) && (arr[i + 3] === choice)) {
return i + 6;
}
}
/*Check for near victory case for diagonal*/
for (var i = 0, j = 4; i <= 2; i += 2, j = j - 2) {
if ((arr[i] === 'e') && (arr[i + j] === choice) && (arr[i + 2 * j] === choice)) {
return i;
} else if ((arr[i + j] === 'e') && (arr[i] === choice) && (arr[i + 2 * j] === choice)) {
return i + j;
} else if ((arr[i + 2 * j] === 'e') && (arr[i + j] === choice) && (arr[i] === choice)) {
return i + 2 * j;
}
}
}
/*Reset all the entries*/
function clearRound() {
for (var i = 0; i <= 8; i++) {
$('#xox' + i).html('&nbsp &nbsp')
$('#xox' + i).css('color', 'white');
arr.splice(i, 1, 'e');
}
};
/*Render the status of the outcome : Win, Lost or Tie*/
function resultStatus() {
setTimeout(function() {
$('.wrapper_tic_tac, .score').css('display', 'none');
$('.result').fadeIn(1000, function() {
$('.result').css('display', 'block');
});
setTimeout(function() {
$('.result').fadeOut(1000, function() {
$('.wrapper_tic_tac, .score').css('display', 'block');
$('.result').css('display', 'none');
});
}, 2000)
}, 1500);
}
var userScore = 0;
var compScore = 0;
var userChoice;
var compChoice;
/*Let the User choose X or Y and computer takes the other.*/
$('#Xchoose').click(function() {//user chooses X
userChoice = 'X';
compChoice = 'O';
console.log(compChoice);
$('.initiate').fadeOut(0, function() {
$('.initiate').css('display', 'none');
});
$('.wrapper_tic_tac, .score').fadeIn(1000, function() {
$(this.class).css('display', 'block');
$('.score').css('display', 'block');
})
})
$('#Ochoose').click(function() {//user chooses O
userChoice = 'O';
compChoice = 'X';
console.log(compChoice);
$('.initiate').fadeOut(0, function() {
$('.initiate').css('display', 'none');
});
$('.wrapper_tic_tac').fadeIn(1000, function() {
$(this.class).css('display', 'block');
$('.score').css('display', 'block');
})
})
/*Action on reset button click*/
$('.resetBtn').click(function() {
userScore = 0;
compScore = 0;
clearRound();
$('#compScore').html(compScore);
$('#userScore').html(userScore);
})
/*Write the user choice at clicked position in the table*/
$('td').on('click', function() {
//console.log(this.id);
var clickPos = parseInt(this.id.match(/\d+/g));//retrive the number from ID, eg:for xox5 retrieve 5.
if (arr[clickPos] === 'e') {//check if clicked doesn't have any entry.
arr.splice(clickPos, 1, userChoice);
console.log(arr);
$('#xox' + clickPos).html('&nbsp'+userChoice);
if (checkTerminate(userChoice) === true) {//user victory codition check
console.log('You Win');
userScore++;
$('#userScore').html(userScore)
setTimeout(clearRound, 2000);
$('.result').html('You Win!! :(');
resultStatus();
};
/*Check for game completion and make appropriate moves*/
if ((arr.indexOf('e') !== -1) && (checkTerminate(userChoice) === undefined) && (checkTerminate(compChoice) === undefined)) {
var comp_move = comp(userChoice);
var comp_win = comp(compChoice);
if (comp_win !== undefined) {
//console.log(comp_win);
arr.splice(comp_win, 1, compChoice);
console.log(arr);
$('#xox' + comp_win).html('&nbsp'+ compChoice);
if (checkTerminate(compChoice) === true) {
console.log('You Loose');
compScore++;
$('#compScore').html(compScore);
setTimeout(clearRound, 2000);
$('.result').html('Yaay!! You Lost!!');
resultStatus();
};
} else if (comp_move !== undefined) {
//console.log(comp_move);
arr.splice(comp_move, 1, compChoice);
console.log(arr);
$('#xox' + comp_move).html('&nbsp'+compChoice);
if (checkTerminate(compChoice) === true) {
console.log('You Loose');
compScore++;
$('#compScore').html(compScore);
setTimeout(clearRound, 2000);
$('.result').html('Yaay!! You Lost!!')
};
} else {//generate the table position to be clicked randomly.
var randomMove;
function randomMoveGen() {
randomMove = Math.floor((Math.random() * 9));
if (arr[randomMove] === 'e') {
return randomMove;
} else {
randomMoveGen();
}
}
randomMoveGen();
console.log(randomMove);
arr.splice(randomMove, 1, compChoice);
console.log(arr);
$('#xox' + randomMove).html('&nbsp'+compChoice);
if (checkTerminate(compChoice) === true) {
//console.log('You Loose');
compScore++;
$('#compScore').html(compScore);
setTimeout(clearRound, 2000);
$('.result').html('Yaay!! You Lost!!');
resultStatus();
};
}
}
else if ((arr.indexOf('e') === -1) && (checkTerminate(userChoice) === undefined)) {
console.log('Draw');
setTimeout(clearRound, 2000);
$('.result').html("It's a Tie!");
resultStatus();
}
}
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Raw
style.css
body{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.wrapper_box{
margin-top:10px;
border:30px solid #c18f5c;
border-radius:20px;
background:#3a8c3a;
padding:10px 0 10px 0px;
box-shadow:0px 10px 12px 2px;
min-height:500px;
}
.result{
display:none;
font-size:4em;
letter-spacing:4px;
text-align:center;
color:white;
margin-top:150px;
font-family: 'Just Another Hand', cursive;
}
.initiate{
text-align:center;
font-size:2em;
color:white;
margin-top:130px;
letter-spacing:3px;
font-family: 'Just Another Hand', cursive;
}
.initiate .greet{
font-size:2.5em;
padding-bottom:20px;
font-family: 'Just Another Hand', cursive;
}
.initiate button{
text-align:center;
color:white;
font-size:1.3em;
background:#3a8c3a;
border:2px solid white;
border-radius:10px;
}
.initiate button:hover{
color:white;
}
.initiate button:focus{
outline:none !important;
}
.wrapper_tic_tac{
display:none;
font-family:'Bad Script', cursive;
font-weight:bold;
}
.score{
text-align:center;
font-size:2.5em;
letter-spacing:4px;
color:white;
padding:10px 20px 10px 10px;
display:none;
font-family: 'Just Another Hand', cursive;
}
.score button{
background:#3a8c3a;
border:2px solid white;
border-radius:30px;
outline:none;
font-size:0.8em;
letter-spacing:3px;
margin-top:5px;
}
.score button:hover{
color:white;
}
.score button:focus{
color:white;
outline:none !important;
}
table{
text-align:center;
padding-right:20px;
}
tr:nth-child(1){
border-bottom:2px solid white;
}
tr:nth-child(2){
border-bottom:2px solid white;
}
td{
padding:30px;
color:white;
font-size:2em;
}
td:nth-child(1){
border-right:2px solid white;
}
td:nth-child(2){
border-right:2px solid white;
}
.made_by{
top:25px;
padding-bottom:15px;
font-family: 'Pacifico', cursive;
font-size: 1.2em;
margin-left:2%;
text-align: center;
}
.made_by a,
.made_by a:hover,
.made_by a:focus,
.made_by a:active,
.made_by a:visited {
text-decoration: none;
}
@media screen and (max-width: 374px) and (min-width: 300px){
td{
font-size:1.2em;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment