A Pen by Zoran Stanic on CodePen.
Created
November 10, 2016 23:21
-
-
Save pilgrim011/51b2b31a9a794e091336d21ae2caed1c to your computer and use it in GitHub Desktop.
Tic Tac Toe
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> | |
<div class = "text-center"> | |
<h1>Tic Tac Toe Game</h1> | |
</div> | |
<div class = "text-center" id = "over"> | |
</div> | |
<div class = "container text-center" id = "play"><table align="center" id = "tabla"><tr><td id="first"></td><td id = "second"></td><td id = "third"></td></tr><tr><td id = "fourth"></td><td id = "fifth"></td><td id = "sixth"></td></tr><tr><td id = "seventh"></td><td id = "eighth"></td><td id = "ninth"></td></tr></table></div> | |
<div class = "container text-center" id = "playground"><h2 id = xoro></h2><span><button type="button" id = "X">X</button></span><span><button type="button" id = "O">O</button></span></div> | |
</body> |
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
$(document).ready (function(){ | |
var x; | |
var question = $("#xoro").text("Would you like to be X or O?"); | |
var arr = ["first","second","third","fourth","fifth", "sixth", "seventh", "eighth", "ninth"]; | |
$("#X").on("click", function(){ | |
document.getElementById("playground").style.display = "none"; | |
document.getElementById("play").style.display = "block"; | |
x = true; | |
}); | |
$("#O").on("click", function(){ | |
document.getElementById("playground").style.display = "none"; | |
document.getElementById("play").style.display = "block"; | |
x = false; | |
}); | |
$("td").on("click", function(){ | |
if (x){ | |
var clicked = this.id; | |
var index = arr.indexOf(clicked); | |
if (index > -1) { | |
$(this).html("<h3>X</h3>"); | |
arr.splice(index, 1); | |
} | |
var rand = arr[Math.floor(Math.random() * arr.length)]; | |
var id = document.getElementById(rand); | |
var ind = arr.indexOf(rand); | |
if (ind > -1) { | |
$(id).html("<h3>O</h3>"); | |
arr.splice(ind,1); | |
} | |
} | |
if(!x){ | |
let clicked = this.id; | |
let index = arr.indexOf(clicked); | |
if (index > -1) { | |
$(this).html("<h3>O</h3>"); | |
arr.splice(index, 1); | |
} | |
let rand = arr[Math.floor(Math.random() * arr.length)]; | |
let id = document.getElementById(rand); | |
let ind = arr.indexOf(rand); | |
if (ind > -1) { | |
$(id).html("<h3>X</h3>"); | |
arr.splice(ind,1); | |
} | |
} | |
var one = document.getElementById("first").innerHTML; | |
var two = document.getElementById("second").innerHTML; | |
var three = document.getElementById("third").innerHTML; | |
var four = document.getElementById("fourth").innerHTML; | |
var five = document.getElementById("fifth").innerHTML; | |
var six = document.getElementById("sixth").innerHTML; | |
var seven = document.getElementById("seventh").innerHTML; | |
var eight = document.getElementById("eighth").innerHTML; | |
var nine = document.getElementById("ninth").innerHTML; | |
console.log(one); | |
var ex = "<h3>X</h3>"; | |
var ou = "<h3>O</h3>"; | |
/*if ((x) && (one === two && two === three || four === five && five === six || seven === eight && eight === nine || one === four )){ | |
alert("You won!"); | |
}*/ | |
if ((x) && (one ===ex && two ===ex && three ===ex || four === ex && five === ex && six === ex || seven === ex && eight === ex && nine === ex || one ===ex && four ===ex && seven ===ex || two === ex && five === ex && eight === ex || three === ex && six === ex && nine === ex || one === ex && five === ex && nine && ex || three === ex && five === ex && seven === ex)){ | |
$("#over").html("<h2>You won!!!</h2>" + "<button type=button id = restart>Restart game?</button>"); | |
$("button").on ("click", function(){ | |
document.location.reload(true); | |
}); | |
} | |
if ((x) && (one ===ou && two ===ou && three ===ou || four === ou && five === ou && six === ou || seven === ou && eight === ou && nine === ou || one ===ou && four ===ou && seven ===ou || two === ou && five === ou && eight === ou || three === ou && six === ou && nine === ou || one === ou && five === ou && nine && ou || three === ou && five === ou && seven === ou)){ | |
$("#over").html("<h2>You lost...</h2>" + "<button type=button>Restart game?</button>"); | |
$("button").on ("click", function(){ | |
document.location.reload(true); | |
}); | |
} | |
if ((!x) && (one ===ou && two ===ou && three ===ou || four === ou && five === ou && six === ou || seven === ou && eight === ou && nine === ou || one ===ou && four ===ou && seven ===ou || two === ou && five === ou && eight === ou || three === ou && six === ou && nine === ou || one === ou && five === ou && nine && ou || three === ou && five === ou && seven === ou)){ | |
$("#over").html("<h2>You won!!!</h2>" + "<button type=button>Restart game?</button>"); | |
$("button").on ("click", function(){ | |
document.location.reload(true); | |
}); | |
} | |
if ((!x) && (one ===ex && two ===ex && three ===ex || four === ex && five === ex && six === ex || seven === ex && eight === ex && nine === ex || one ===ex && four ===ex && seven ===ex || two === ex && five === ex && eight === ex || three === ex && six === ex && nine === ex || one === ex && five === ex && nine && ex || three === ex && five === ex && seven === ex)){ | |
$("#over").html("<h2>You lost...</h2>" + "<button type=button>Restart game?</button>"); | |
$("button").on ("click", function(){ | |
document.location.reload(true); | |
}); | |
} | |
}); | |
}); | |
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://code.jquery.com/jquery-2.2.4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> |
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
#playground{ | |
width:450px; | |
height:450px; | |
background-color: #1B3020; | |
display: block; | |
} | |
#play{ | |
display: none; | |
} | |
#xoro{ | |
color:white; | |
} | |
#X,#O{ | |
margin: 80px 0px 0px 0px; | |
padding:50px; | |
font-size:30px; | |
} | |
table#tabla td { | |
width: 100px; | |
height: 100px; | |
text-align: center; | |
vertical-align: middle; | |
font: bold 36px sans-serif; | |
} | |
td#first, td#second, td#third, td#fourth, td#fifth, td#sixth { | |
border-bottom: 3px solid #930; | |
} | |
td#first, td#second, td#fourth, td#fifth, td#seventh, td#eighth { | |
border-right: 3px solid #930; | |
} | |
h3{ | |
font-size:60px; | |
} | |
#restart{ | |
border: 3px double #FC6; | |
border-top-color: #FC9; | |
border-left-color: #FC9; | |
} |
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
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment