A Pen by Captain Anonymous on CodePen.
-
-
Save reinaldorossetti/4f334c1bb21b559cf7decfff2544b927 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
<html> | |
<head> | |
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" /> | |
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> | |
<script src="script.js"></script> | |
<link rel="stylesheet" type="text/css" href="style.css"> | |
</head> | |
<body> | |
<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> | |
<body> | |
</html> |
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