"Tic Tac Toe"
Bootstrap 2.3.2 Snippet by ASDAFF

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*******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******/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 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')
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard React

Questions / Comments: