A Pen by Captain Anonymous on CodePen.
Created
January 21, 2017 21:48
-
-
Save anonymous/e1b827fe3cfb2f9aeb33026a4aee69ac to your computer and use it in GitHub Desktop.
Tic Tac Toe game
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
<div id="tic-tac-toe"> | |
<div class="span3 new_span"> | |
<div class="row"> | |
<h1 class="span3">Tic Tac Toe</h1> | |
<div class="span3"> | |
<div class="input-prepend input-append"> | |
<span class="add-on win_text">O won</span><strong id="o_win" class="win_times add-on">0</strong><span class="add-on">time(s)</span> | |
</div> | |
<div class="input-prepend input-append"> | |
<span class="add-on win_text">X won</span><strong id="x_win" class="win_times add-on">0</strong><span class="add-on">time(s)</span> | |
</div> | |
</div> | |
</div> | |
<ul class="row" id="game"> | |
<li id="one" class="btn span1" >+</li> | |
<li id="two" class="btn span1">+</li> | |
<li id="three" class="btn span1">+</li> | |
<li id="four" class="btn span1">+</li> | |
<li id="five" class="btn span1">+</li> | |
<li id="six" class="btn span1">+</li> | |
<li id="seven" class="btn span1">+</li> | |
<li id="eight" class="btn span1">+</li> | |
<li id="nine" class="btn span1">+</li> | |
</ul> | |
<div class="clr"> </div> | |
<div class="row"><a href="#" id="reset" class="btn-success btn span3" >Restart</a></div></div> | |
</div> |
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
// JavaScript Document | |
$(document).ready(function() { | |
var x = "x" | |
var o = "o" | |
var count = 0; | |
var o_win = 0; | |
var x_win = 0; | |
$('#game li').click(function(){ | |
if ($("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') || $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') || $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') || $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') || $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') || $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o')) | |
{ | |
alert('O has won the game. Start a new game') | |
$("#game li").text("+"); | |
$("#game li").removeClass('disable') | |
$("#game li").removeClass('o') | |
$("#game li").removeClass('x') | |
$("#game li").removeClass('btn-primary') | |
$("#game li").removeClass('btn-info') | |
} | |
else if ($("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') || $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') || $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') || $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') || $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') || $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x')) | |
{ | |
alert('X wins has won the game. Start a new game') | |
$("#game li").text("+"); | |
$("#game li").removeClass('disable') | |
$("#game li").removeClass('o') | |
$("#game li").removeClass('x') | |
$("#game li").removeClass('btn-primary') | |
$("#game li").removeClass('btn-info') | |
} | |
else if (count == 9) | |
{ | |
alert('Its a tie. It will restart.') | |
$("#game li").text("+"); | |
$("#game li").removeClass('disable') | |
$("#game li").removeClass('o') | |
$("#game li").removeClass('x') | |
$("#game li").removeClass('btn-primary') | |
$("#game li").removeClass('btn-info') | |
count = 0 | |
} | |
else if ($(this).hasClass('disable')) | |
{ | |
alert('Already selected') | |
} | |
else if (count%2 == 0) | |
{ | |
count++ | |
$(this).text(o) | |
$(this).addClass('disable o btn-primary') | |
if ($("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') || $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') || $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') || $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') || $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') || $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o')) | |
{ | |
alert('O wins') | |
count = 0 | |
o_win++ | |
$('#o_win').text(o_win) | |
} | |
} | |
else | |
{ | |
count++ | |
$(this).text(x) | |
$(this).addClass('disable x btn-info') | |
if ($("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') || $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') || $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') || $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') || $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') || $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x')) | |
{ | |
alert('X wins') | |
count = 0 | |
x_win++ | |
$('#x_win').text(x_win) | |
} | |
} | |
}); | |
$("#reset").click(function () { | |
$("#game li").text("+"); | |
$("#game li").removeClass('disable') | |
$("#game li").removeClass('o') | |
$("#game li").removeClass('x') | |
$("#game li").removeClass('btn-primary') | |
$("#game li").removeClass('btn-info') | |
count = 0 | |
}); | |
}); |
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="http://code.jquery.com/jquery-1.7.2.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
/*******tic-tac-toe******/ | |
#tic-tac-toe .disable {text-transform:uppercase; font-size:30px; font-family:Georgia, "Times New Roman", Times, serif} | |
#tic-tac-toe #game li {float:left; padding:0; list-style:none; text-align:center; margin-bottom:20px; color:#fff; height:60px; line-height:60px; font-size:40px; color:#ccc} | |
#tic-tac-toe #game li.disable{color:#fff} | |
#tic-tac-toe #game {float:left; padding:0; clear:both} | |
.new_span {width:226px} | |
#tic-tac-toe #reset { padding:5px 10px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:20px; clear:both; cursor:pointer; float:left; text-align:center; text-transform:uppercase; outline:none; width:204px} | |
.input-prepend span.pre_text {width:55px} | |
.input-prepend .span1{width:93px} | |
.input-prepend {margin-bottom:10px} | |
.clr {clear:both; height:0} | |
#tic-tac-toe h1 {text-align:center; font-size:28px} | |
#tic-tac-toe li::-moz-selection {background:none;color:#000;} | |
#tic-tac-toe li::-webkit-selection {background:none;color:#000;} | |
#tic-tac-toe {width:220px; margin:0 auto} | |
.input-append .win_times {background:#fff; width:101px} | |
.input-append .win_text {width:52px} | |
/*******tic-tac-toe END******/ |
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="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment