tic tac toe game
hello frends welcome to my blog.
here is a code of the simple game tic tac toe. I hope you had played it before
if you will find any error in this code then please comment below.
And here is its code.
I hope you will like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Tic Tac toe </title>
<style>
table tr td:hover{
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
}
table tr td{
background-color: green;
font-size:50px;
padding:5px;
width:60px;
height:60px;
text-align:center;
cursor: pointer;
}
table{
position: relative;
top:80px;
left:300px;
width:400px;
border:5px solid black;
border-radius:5px;
}
#play{
position:relative;
top:5px;
left:400px;
}
#displayResult{
position:relative;
top: 300px;
left:-250px;
}
#play, #displayResult{
font-size:40px;
background-color:green;
color:white;
border:2px solid black;
border-radius:4px;
padding:5px;
padding-left:50px;
padding-right:50px;
cursor: pointer;
}
#p1{
position: relative;
top:150px;
left:150px;
}
#p2{
position: relative;
top:150px;
left:350px;
}
#p1, #p2{
background-color:green;
color:white;
border:2px solid black;
border-radius:4px;
font-size:40px;
padding:5px;
}
p{
position: fixed;
bottom:0px;
right: 0px;
}
</style>
</head>
<body>
<button id="play" onclick="strt()" title=" if you will not click on it, the game will not start " > PLAY </button>
<table>
<tr>
<td id="one" onclick = "myfun(1)" ></td>
<td id="two" onclick = "myfun(2)" ></td>
<td id="three" onclick = "myfun(3)" ></td>
</tr>
<tr>
<td id="four" onclick = "myfun(4)" ></td>
<td id="five" onclick = "myfun(5)" ></td>
<td id="six" onclick = "myfun(6)" ></td>
</tr>
<tr>
<td id="seven" onclick = "myfun(7)" ></td>
<td id="eight" onclick = "myfun(8)" ></td>
<td id="nine" onclick = "myfun(9)" ></td>
</tr>
</table>
<button id="p1" > PLAYER ONE(0) </button>
<button id="p2" > PLAYER TWO(X) </button>
<p> <b> made by: raul kumayan </b></p>
<button id="displayResult" onclick="document.getElementById('displayResult').innerHTML=text;" > RESULT </button>
<script>
var num, win, i, text;
var first = document.getElementById("p1");
var second = document.getElementById("p2");
var click = [ 'a' ,'s', 'd', 'f', 'g', 'h', 'j', 'k', 'l' ] ;
function strt()
{
num=0;
text=" the match is still going on ";
document.getElementById("one").innerHTML='';
document.getElementById("two").innerHTML='';
document.getElementById("three").innerHTML='';
document.getElementById("four").innerHTML='';
document.getElementById("five").innerHTML='';
document.getElementById("six").innerHTML='';
document.getElementById("seven").innerHTML='';
document.getElementById("eight").innerHTML='';
document.getElementById("nine").innerHTML='';
document.getElementById("displayResult").innerHTML="RESULT";
}
function myfun( position )
{
++num;
if( num%2 != 0 )
{
first.style.backgroundColor="red";
first.style.boxShadow="0 4px 8px 0 black, 0 6px 20px 0 black";
second.style.backgroundColor="green";
second.style.boxShadow="0px";
switch( position )
{
case 1:
document.getElementById("one").innerHTML='0';
break;
case 2:
document.getElementById("two").innerHTML='0';
break;
case 3:
document.getElementById("three").innerHTML='0';
break;
case 4:
document.getElementById("four").innerHTML='0';
break;
case 5:
document.getElementById("five").innerHTML='0';
break;
case 6:
document.getElementById("six").innerHTML='0';
break;
case 7:
document.getElementById("seven").innerHTML='0';
break;
case 8:
document.getElementById("eight").innerHTML='0';
break;
case 9:
document.getElementById("nine").innerHTML='0';
break;
}
click[position-1] = '0';
}
else
{
first.style.backgroundColor="green";
first.style.boxShadow="0px";
second.style.backgroundColor="red";
second.style.boxShadow="0 4px 8px 0 black, 0 6px 20px 0 black";
switch( position )
{
case 1:
document.getElementById("one").innerHTML='X';
break;
case 2:
document.getElementById("two").innerHTML='X';
break;
case 3:
document.getElementById("three").innerHTML='X';
break;
case 4:
document.getElementById("four").innerHTML='X';
break;
case 5:
document.getElementById("five").innerHTML='X';
break;
case 6:
document.getElementById("six").innerHTML='X';
break;
case 7:
document.getElementById("seven").innerHTML='X';
break;
case 8:
document.getElementById("eight").innerHTML='X';
break;
case 9:
document.getElementById("nine").innerHTML='X';
break;
}
click[position-1] = 'X';
}
if( num > 4 )
{
decideWin();
}
}
function decideWin()
{
win=0;
for( i=0 ; i<3; ++i ) //columnwise
{
if( (click[i]=='0') && (click[i+3]=='0') && (click[i+6]=='0') )
{
text = " player one wins (0) ";
win=1;
}
else if( (click[i]=='X') && (click[i+3]=='X') && (click[i+6]=='X') )
{
text = " player two wins (X) ";
win=1;
}
}
if( (click[0]=='0') && (click[1]=='0') && (click[2]=='0' ) )
{
text = " player one wins (0) ";
win=1;
}
else if( (click[0] == 'X') && (click[1]=='X') && (click[2]=='X' ) )
{
text = " player two wins (X) ";
win=1;
}
else if( (click[3]=='0') && (click[4]=='0') && (click[5]=='0' ) )
{
text = " player one wins (0) ";
win=1;
}
else if( (click[3] == 'X') && (click[4]=='X') && (click[5]=='X' ) )
{
text = " player two wins (X) ";
win=1;
}
else if( (click[6]=='0') && (click[7]=='0') && (click[8]=='0' ) )
{
text = " player one wins (0) ";
win=1;
}
else if( (click[3] == '6') && (click[4]=='7') && (click[8]=='X' ) )
{
text = " player two wins (X) ";
win=1;
}
else
{
if( (click[0]=='0') && (click[4]=='0') && (click[8]=='0') ) // pehla cross
{
text = " player one wins (0) ";
win=1;
}
else if( (click[0]=='X') && (click[4]=='X') && (click[8]=='X') )
{
text = " player two wins (X) ";
win=1;
}
else if( (click[2]=='0') && (click[4]=='0') && (click[6]=='0') ) // dusra cross
{
text = " player one wins (0) ";
win=1;
}
else if( (click[2]=='X') && (click[4]=='X') && (click[6]=='X') )
{
text = " player two wins (X) ";
win=1;
}
else if( num == 9 )
{
text= " THE game is draw ";
win=1;
}
}
}
</script>
</body>
</html>
Comments
Post a Comment