Skip to content

Instantly share code, notes, and snippets.

@pilgrim011

pilgrim011/index.html

Created November 10, 2016 23:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pilgrim011/51b2b31a9a794e091336d21ae2caed1c to your computer and use it in GitHub Desktop.
Save pilgrim011/51b2b31a9a794e091336d21ae2caed1c to your computer and use it in GitHub Desktop.
Download ZIP
Tic Tac Toe
Raw
index.html
<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>
Raw
script.js
$(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);
});
}
});
});
Raw
scripts
<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>
Raw
style.css
#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;
}
Raw
styles
<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