Wednesday, 10 August 2011

Tic-Tac-Toe With JavaScript

<html>
<head>
<title></title>
<style type="text/css">

.style1
{
width: 100%;
}
.style2
{
height: 34px;
}
</style>
<script type="text/javascript" language="javascript" >
var p = 0;
var count = 0;
var player1 = "Player 1";
var player2 = "Player 2";

function enable() {
if (document.getElementById("textBox1").value != "") {
player1 = document.getElementById("textBox1").value;

}
if (document.getElementById("textBox2").value != "") {
player2 = document.getElementById("textBox2").value;
}

var i = 1;
var x = "button";
var y
for (i = 1; i <= 9; i++) {

y = x + i;
document.getElementById(y).disabled = false;
document.getElementById(y).value = "";
p = 0;
count=0;
}
document.getElementById("button10").disabled = true;
document.getElementById("textBox1").disabled = true;
document.getElementById("textBox2").disabled = true;

document.getElementById("play").innerHTML = "<marquee>" + player1 + " your turn!!!" + "</marquee>";


}
function play(textstring) {
document.getElementById(textstring).value = p;
document.getElementById(textstring).disabled = true;
if (p == 0) {
p = 1;

}
else { p = 0;}
count++;
check();
}
function check() {




if ((document.getElementById("button1").value == document.getElementById("button2").value && document.getElementById("button1").value == document.getElementById("button3").value && document.getElementById("button1").value != "") || (document.getElementById("button1").value == document.getElementById("button4").value && document.getElementById("button1").value == document.getElementById("button7").value && document.getElementById("button1").value != "") || (document.getElementById("button1").value == document.getElementById("button5").value && document.getElementById("button1").value == document.getElementById("button9").value && document.getElementById("button1").value != "") || (document.getElementById("button4").value == document.getElementById("button5").value && document.getElementById("button4").value == document.getElementById("button6").value && document.getElementById("button4").value != "") || (document.getElementById("button2").value == document.getElementById("button5").value && document.getElementById("button2").value == document.getElementById("button8").value && document.getElementById("button2").value != "") || (document.getElementById("button3").value == document.getElementById("button6").value && document.getElementById("button3").value == document.getElementById("button9").value && document.getElementById("button3").value != "") || (document.getElementById("button3").value == document.getElementById("button5").value && document.getElementById("button3").value == document.getElementById("button7").value && document.getElementById("button3").value != "") || (document.getElementById("button7").value == document.getElementById("button8").value && document.getElementById("button7").value == document.getElementById("button9").value && document.getElementById("button7").value != "")) {


if (p == 0) {
alert(player2+" is the winner");
document.getElementById("play").innerHTML = "<marquee>" + player2 + " wins!!!" + "</marquee>";
}
else {
alert(player1 + " is the winner");
document.getElementById("play").innerHTML = "<marquee>" + player1 + " wins!!!" + "</marquee>";
}
disable();
document.getElementById("button10").disabled = false;
}
else if (count == 9) {
alert("Sorry, it's a draw");
document.getElementById("play").innerHTML = "<marquee>Sorry, it's a draw</marquee>";
document.getElementById("button10").disabled = false;
}
else {
if (p == 0) {

document.getElementById("play").innerHTML = "<marquee>" + player1 + " your turn!!!" + "</marquee>";
}
else { document.getElementById("play").innerHTML = "<marquee>" + player2 + " your turn!!!" + "</marquee>"; }

}



}
function disable() {


var i = 1;
var x = "button";
var y
for (i = 1; i <= 9; i++) {

y = x + i;
document.getElementById(y).disabled = true;
}
}

</script>
</head>

<body>
<form id="form1" runat="server">
<div>

<table class="style1">
<tr>
<td colspan="3">
<asp:Label ID="label2" runat="server"></asp:Label>
</td>
<td>
<p id="play"></p>&nbsp;</td>
</tr>
<tr>
<td class="style2">
<input id="button1" type="button" onclick="play(form1.button1.id)" disabled="true" />
</td>
<td class="style2">
<input id="button2" type="button" onclick="play(form1.button2.id)" disabled="true" />
</td>
<td class="style2">
<input id="button3" type="button" onclick="play(form1.button3.id)" disabled="true" />
</td>
<td class="style2">
Player 1
</td>
</tr>
<tr>
<td>
&nbsp;</td>
<td>
&nbsp;</td>
<td>
&nbsp;</td>
<td>
<input id="textBox1" type="text"/>
</td>
</tr>
<tr>
<td>
<input id="button4" type="button" onclick="play(form1.button4.id)" disabled="true" />

</td>
<td>
<input id="button5" type="button" onclick="play(form1.button5.id)" disabled="true" />

</td>
<td>
<input id="button6" type="button" onclick="play(form1.button6.id)" disabled="true" />

</td>
<td>
<input id="button10" type="button" value="Start" onclick="enable()" />

</td>
</tr>
<tr>
<td>
&nbsp;</td>
<td>
&nbsp;</td>
<td>
&nbsp;</td>
<td>
Player 2</td>
</tr>
<tr>
<td>
<input id="button7" type="button" onclick="play(form1.button7.id)" disabled="true" />

</td>
<td>
<input id="button8" type="button" onclick="play(form1.button8.id)" disabled="true" />

</td>
<td>
<input id="button9" type="button" onclick="play(form1.button9.id)" disabled="true" />
</td>
<td>
<input id="textBox2" type="text"/>
</td>
</tr>
</table>

</div>
</form>
</body>

</html>

Posted by Unknown at 21:00
Labels: ,

9 comments:

  1. Nandani Sinha10 August 2011 at 21:24

    wow saurabh...kya coding ki hai...gr8 work..helped me a lot in my project...thnkkuu..

    ReplyDelete
  2. Mamta Rana10 August 2011 at 21:26

    hey..........u r my friend saurabh wow gr888
    send me ur number to my email id....

    ReplyDelete
  3. shreyvats10 August 2011 at 21:27

    haaa........ji u can code hame pata hai :)

    ReplyDelete
  4. Unknown10 August 2011 at 21:29

    thanks 4 the response, more posts coming up

    ReplyDelete
  5. deepak verma10 August 2011 at 21:32

    nice game saurabh :)

    ReplyDelete
  6. Manroop.singh11 August 2011 at 13:26

    balle saurabh paaji..thanx for sharing buddy!!

    ReplyDelete
  7. Prabhjot Mann8 September 2011 at 06:30

    Very nice, the code could have been smaller though.

    ReplyDelete
  8. Unknown9 September 2011 at 09:19

    thanks for the feedback, but i like to keep it simple :)

    ReplyDelete
  9. Mukul Thakur14 October 2011 at 03:19

    gd one saurabh..

    ReplyDelete

Subscribe to: Post Comments (Atom)