How to make a simple tictoc game using jquery??

How to make a simple tictoc game using jquery??

Hello Sir, I want to make a program for tictoc game using jquery but in simple format.


I have code in Java Script for tictoc game but I need in jquery
Java Screept Code
[
<html>
<head>
<script type="text/javascript">
var p=0;
var tmp = "0";
function f(x){
 if(x.innerHTML=="")
{
if (p%2==0) {
x.innerHTML="o";
}
else
{
x.innerHTML="x";
}
p=p+1;
q('d1','d2','d3');
q('d4','d5','d6');
q('d7','d8','d9');
q('d1','d4','d7');
q('d2','d5','d8');
q('d3','d6','d9');
q('d1','d5','d9');
q('d3','d5','d7');
w();
}
}
function q(m,n,o) {
var x = document.getElementById(m);
var y = document.getElementById(n);
var z = document.getElementById(o);
if(x.innerHTML=="o" && y.innerHTML=="o" && z.innerHTML=="o")
{
alert("o win");s();
tmp = "1";
}
if(x.innerHTML=="x" && y.innerHTML=="x" && z.innerHTML=="x")
{
alert("x win");s();
tmp = "1";
}


}
function s() {
document.getElementById("d1").innerHTML="";
document.getElementById("d2").innerHTML="";
document.getElementById("d3").innerHTML="";
document.getElementById("d4").innerHTML="";
document.getElementById("d5").innerHTML="";
document.getElementById("d6").innerHTML="";
document.getElementById("d7").innerHTML="";
document.getElementById("d8").innerHTML="";
document.getElementById("d9").innerHTML="";
}
function w() {
if(tmp != "1" && p >8)
{
alert("draw");
tmp = 0;
p = 0;
s();
}
}
</script>
</head>
<body>
<div>
<div id="d1" style="height: 50px;width:50px;border:1px solid black;float:left" onclick="f(this)"></div>
<div id="d2"style="height: 50px;width:50px;border:1px solid black;float:left" onclick="f(this)"></div>
<div id="d3"style="height: 50px;width:50px;border:1px solid black;float:left" onclick="f(this)"></div>
</div>
<div>
<div id="d4" style="height: 50px;width:50px;border:1px solid black;float:left;clear:left" onclick="f(this)"></div>
<div id="d5" style="height: 50px;width:50px;border:1px solid black;float:left" onclick="f(this)"></div>
<div id="d6" style="height: 50px;width:50px;border:1px solid black;float:left" onclick="f(this)"></div>
</div>
<div>
<div id="d7" style="height: 50px;width:50px;border:1px solid black;float:left;clear:left" onclick="f(this)"></div>
<div id="d8" style="height: 50px;width:50px;border:1px solid black;float:left"onclick="f(this)"></div>
<div id="d9" style="height: 50px;width:50px;border:1px solid black;float:left" onclick="f(this)"></div>
</div>
</body>
</html>
] 



Sir I reach This code but stuck here i Don't know what to do from this portion
[
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div>
<div id="d1" class="c1" style="height: 50px;width:50px;border:1px solid black;float:left"></div>
<div id="d2" class="c1" style="height: 50px;width:50px;border:1px solid black;float:left"></div>
<div id="d3" class="c1" style="height: 50px;width:50px;border:1px solid black;float:left"></div>
</div>
<div>
<div id="d4" class="c1" style="height: 50px;width:50px;border:1px solid black;float:left;clear:left"></div>
<div id="d5" class="c1" style="height: 50px;width:50px;border:1px solid black;float:left"></div>
<div id="d6" class="c1" style="height: 50px;width:50px;border:1px solid black;float:left"></div>
</div>
<div>
<div id="d7" class="c1" style="height: 50px;width:50px;border:1px solid black;float:left;clear:left"></div>
<div id="d8" class="c1" style="height: 50px;width:50px;border:1px solid black;float:left"></div>
<div id="d9" class="c1" style="height: 50px;width:50px;border:1px solid black;float:left"></div>
</div>
<script >
var p=0;
$(".c1").click(

function tictoc() {
if($(this).html="")
{
if(p%2==0)
{
$(this).html="x";
}
else
{
$(this).html="o";
}
p=p+1;
q('d1','d2','d3');
q('d4','d5','d6');
q('d7','d8','d9');
q('d1','d4','d7');
q('d2','d5','d8');
q('d3','d6','d9');
q('d1','d5','d9');
q('d3','d5','d7');
w();
}
// I stuck here Don't know from here...
});
</script>
</body>
</html>
]


Thanks