<html>
<head>
<style>
body{background-image:url(1.jpg);}
h2{color:black;}
h3{font-family:courier;font-size:2em;color:black;}
#myb{width:60px;height:40px;font-size:1em;}
#myb1{width:60px;height:40px;font-size:1em;}
h2.player1{position:absolute;top:43%;left:15%;}
h2.player2{position:absolute;top:43%;right:15%;}
.hd{position:absolute;bottom:5%;left:50%;}
.turn
{
position:absolute;bottom:0px;left:40%;
}
button
{
width:90px;
height:90px;
background-color:off white;
font-size:4em;
font-weight:bolder;
}
h1 {font-size:30px;font-family:algerian,Calibiri,arial;text-align:center;}
div{width:300px;height:300px;border:5px solid grey;}
div.pos{position:absolute;top:30%;left:35%;}
.p{position:absolute;left:55%;top:20%;}
.p1{position:absolute;left:43%;top:20%;}
</style>
<script>
var p1=window.prompt("Enter Player 1 Name:")
var p2=window.prompt("Enter Player 2 Name:")
if(p1=="")
{
p1="Player 1";
}
if(p2=="")
{
p2="Player 2";
}
var ss="X";
var result=new Array(9);
var counter=0;
function dis()
{
for(i=0;i<=9;i++)
{
var c=document.getElementById(i);
c.disabled=true;
}
}
function b()
{
var b1=document.getElementById("myb");
var bt="NEW GAME";
b1.innerHTML=bt;
}
function xC(bl)
{
var a1=document.getElementById(bl);
if(result[bl]=="X")
{
a1.style.color = 'green';
}
else
{
a1.style.color = 'blue';
}
}
function B_press(b_d)
{
var t=document.getElementById("turn");
var c=document.getElementById(b_d);
c.innerHTML=ss;
result[b_d] = ss;
c.disabled=true;
xC(b_d);
if(ss=="X")
{
ss="O";
}
else
{
ss="X";
}
if(counter>3)
{
Win();
}
if(c.innerHTML=="X")
{
t.innerHTML="Player turn=" + p2;
}
else
{
t.innerHTML="Player turn=" + p1;
}
counter++;
}
function arr()
{
for(i=0;i<=9;i++)
{
result[i]=null;
}
counter=0;
}
function col(x,y,z)
{
var a1=document.getElementById(x);
var b1=document.getElementById(y);
var c1=document.getElementById(z);
a1.style.background = 'grey';
b1.style.background = 'grey';
c1.style.background = 'grey';
}
function Win()
{
if(result[0]==result[1]&&result[0]==result[2])
{
if(result[0]!=null)
{
var a=0;
var b=1;
var c=2;
col(a,b,c);
if(result[0]=="X")
{
alert (p1 + " Wins ");
}
else
{
alert (p2 + " Wins ");
}
dis();
b();
}
}
else if(result[3]==result[4]&&result[3]==result[5])
{
if(result[3]!=null)
{
var a=3;
var b=4;
var c=5;
col(a,b,c);
if(result[3]=="X")
{
alert (p1 + " Wins ");
}
else
{
alert (p2 + " Wins ");
}
dis();
b();
}
}
if(result[6]==result[7]&&result[6]==result[8])
{
if(result[6]!=null)
{
var a=6;
var b=7;
var c=8;
col(a,b,c);
if(result[6]=="X")
{
alert (p1 + " Wins ");
}
else
{
alert (p2 + " Wins ");
}
dis();
b();
}
}
if(result[0]==result[3]&&result[0]==result[6])
{
if(result[0]!=null)
{
var a=0;
var b=3;
var c=6;
col(a,b,c);
if(result[0]=="X")
{
alert (p1 + " Wins ");
}
else
{
alert (p2 + " Wins ");
}
}
dis();
b();
}
if(result[1]==result[4]&&result[1]==result[7])
{
if(result[1]!=null)
{
var a=1;
var b=4;
var c=7;
col(a,b,c);
if(result[1]=="X")
{
alert (result[1] + " Wins ");
}
else
{
alert (p2 + " Wins ");
}
dis();
b();
}
}
if(result[2]==result[5]&&result[2]==result[8])
{
if(result[2]!=null)
{
var a=2;
var b=5;
var c=8;
col(a,b,c);
if(result[2]=="X")
{
alert (p1 + " Wins ");
}
else
{
alert (p2 + " Wins ");
}
dis();
b();
}
}
if(result[0]==result[4]&&result[0]==result[8])
{
if(result[0]!=null)
{
var a=0;
var b=4;
var c=8;
col(a,b,c);
if(result[0]=="X")
{
alert (p1 + " Wins ");
}
else
{
alert (p2 + " Wins ");
}
dis();
b();
}
}
if(result[2]==result[4]&&result[2]==result[6])
{
if(result[2]!=null)
{
var a=2;
var b=4;
var c=6;
col(a,b,c);
if(result[2]=="X")
{
alert (result[2] + " Wins ");
}
else
{
alert (p2 + " Wins ");
}
dis();
b();
}
}
if(counter==8)
{
alert ("MATCH DRAW");
b();
}
}
function T()
{
var v=0;
ss="X";
var tbody = "<table border='5px' width='300px' height='300px'>";
for (i=0;i<3;i++)
{
tbody+="<tr>";
for (j=0;j<3;j++)
{
var b_id=v;
tbody+="<td><button id='"+b_id+"' onclick='B_press(\""+b_id+"\")'></button></td>";
v++;
}
tbody+="</tr>";
}
tbody+="</table>";
var o=document.getElementById("tb");
o.innerHTML = tbody;
arr();
alert(p1 + " turn")
}
document.write("<h2 class='player1'>Player 1 = "+p1+"</h2>");
document.write("<h2 class='player2'>Player 2 = "+p2+"</h2>");
</script>
</head>
<body>
<h1 id="myh">TIC TAC GAME</h1>
<button id="myb" onclick="T()" class="p">Play Game</button>
<button onClick="window.location.reload()" class="p1" id="myb1">New Game</button>
<div class="pos" id="tb">
</div>
<h3 id="turn" class="turn"></h3>
</body>
</html>
Tic Tac Toe Game.zip （4个子文件） 
TIC TAC 
1.jpg 143KB bg1.jpg 293KB
tic.html 4KB original.html 5KB资源评论
sanbaofengs
- 粉丝: 509
- 资源: 711
最新资源
- 国际象棋检测2-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar
- ssd5课件图片记录保存
- 常用算法介绍与学习资源汇总
- Python与Pygame实现带特效的圣诞节场景模拟程序
- 国际象棋检测11-YOLO（v7至v9）、COCO、Darknet、Paligemma、VOC数据集合集.rar
- 使用Python和matplotlib库绘制爱心图形的技术教程
- Java外卖项目（瑞吉外卖项目的扩展）
- 必应图片壁纸Python爬虫代码bing-img.zip
- 基于Pygame库实现新年烟花效果的Python代码
- 浪漫节日代码 - 爱心代码、圣诞树代码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
