<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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>

/*******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******/

// 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 }); });