Skip to content

Tic Tac Toe Game Submission #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shivamsachdeva16 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Tic Tac Toe Game Submission #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions ShivamSachdeva006/TicTakToe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE HTML>
<HTML>

<head>

<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

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


<div>

<div class="row" id="game">

<ul>
<button id="one" class="btn span1" >?</button>
<button id="two" class="btn span1">?</button>
<button id="three" class="btn span1">?</button>
</ul>

<ul>
<button id="four" class="btn span1">?</button>
<button id="five" class="btn span1">?</button>
<button id="six" class="btn span1">?</button>

</ul>
<ul>
<button id="seven" class="btn span1">?</button>
<button id="eight" class="btn span1">?</button>
<button id="nine" class="btn span1">?</button>
</ul>
<div class="clr">&nbsp;</div>
<div class="row"><a href="#" id="reset" class="btn-success btn span3" >Restart</a></div></div>
</div>
</div>
</Body>
<script src= "TicTakToe.js"></script>

</HTML>
85 changes: 85 additions & 0 deletions ShivamSachdeva006/TicTakToe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<script>
$(document).ready(function() {
var x = "x"
var o = "o"
var count = 0;
var o_win = 0;
var x_win = 0;
$('#game button').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 button").text("+");
$("#game button").removeClass('disable')
$("#game button").removeClass('o')
$("#game button").removeClass('x')
$("#game button").removeClass('btn-primary')
$("#game button").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 button").text("+");
$("#game button").removeClass('disable')
$("#game button").removeClass('o')
$("#game button").removeClass('x')
$("#game button").removeClass('btn-primary')
$("#game button").removeClass('btn-info')
}
else if (count == 9)
{
alert('Its a tie. It will restart.')
$("#game button").text("+");
$("#game button").removeClass('disable')
$("#game button").removeClass('o')
$("#game button").removeClass('x')
$("#game button").removeClass('btn-primary')
$("#game button").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 button").text("+");
$("#game button").removeClass('disable')
$("#game button").removeClass('o')
$("#game button").removeClass('x')
$("#game button").removeClass('btn-primary')
$("#game button").removeClass('btn-info')
count = 0

});
});
</script>