<html>
<head runat="server">
<title>五子棋</title>
<script language="javascript" type="text/javascript">
var actived = "black"; // 当前下棋方 black or white
var black = "+"; // 黑色
var white = "-"; // 白色下棋在单元格中填写的信息
var complete = false; // 是否完成
/// 初始化棋盘
var initTable = function(rowCount,colCount)
{
var tbFive = document.getElementById("tbFive");
var row,cell;
///移除已经存在的所有行
while(tbFive.rows.length > 0)
{
tbFive.deleteRow(i);
}
for(var i=0;i<rowCount;i++)
{
row = tbFive.insertRow(tbFive.rows.length);
row.setAttribute("height","20px");
for(var j=0;j<colCount;j++)
{
cell = row.insertCell();
cell.innerHTML = " ";
cell.setAttribute("id",i + "_" + j);
cell.setAttribute("width","20px");
cell.setAttribute("valign","middle");
cell.setAttribute("align","center");
cell.onclick = function()
{
cellClick(this,i,j);
}
}
}
setMsg("<b>黑色下棋</b>");
actived = "black";
complete = false;
}
// 单元格点击事件，下棋
var cellClick = function(activeCell,rowCount,colCount)
{
var rowIndex,colIndex;
var indexArray = activeCell.id.split("_");
if(complete) return;
rowIndex = parseInt(indexArray[0]);
colIndex = parseInt(indexArray[1]);
if(actived == "black")
{
activeCell.innerHTML = black;
actived = "white";
setMsg("<b>白色下棋</b>");
}
else
{
activeCell.innerHTML = white;
actived = "black";
setMsg("<b>黑色下棋</b>");
}
if(gameOver(activeCell.innerHTML,rowIndex,colIndex,rowCount,colCount))
{
complete = true;
if(actived == "black")
{
setMsg("<font color=\"red\"><b>白色获胜</b></font>");
}
else
{
setMsg("<font color=\"red\"><b>黑色获胜</b></font>");
}
}
/// 检测是否有五子连成线，如果是，游戏结束
activeCell.onclick = null;
}
/// 检测是否有五子连成线，是返回 TRUE；否返回 FALSE
var gameOver = function(activeCellText,rowIndex,colIndex,rowCount,colCount)
{
//debugger;
///检测横向
var count = 0;
// ->
for(var i=rowIndex;i<rowCount;i++)
{
if(document.getElementById(i+"_"+colIndex).innerHTML == activeCellText)
count ++;
else
break;
if(count == 5)
break;
}
// <-
for(var i=rowIndex-1;i>-1;i--)
{
if(document.getElementById(i+"_"+colIndex).innerHTML == activeCellText)
count ++;
else
break;
if(count == 5)
break;
}
if(count == 5)
return true;
///检测竖向
count = 0;
//下
for(var i=colIndex;i<colCount;i++)
{
if(document.getElementById(rowIndex+"_"+i).innerHTML == activeCellText)
count ++;
else
break;
if(count == 5)
break;
}
//上
for(var i=colIndex-1;i>-1;i--)
{
if(document.getElementById(rowIndex+"_"+i).innerHTML == activeCellText)
count ++;
else
break;
if(count == 5)
break;
}
if(count == 5)
return true;
/// 检测斜向
count = 0;
for(var i=rowIndex;i<rowCount;i++)
{
var newColIndex;
newColIndex = colIndex - i + rowIndex;
if(newColIndex < 0) break;
if(document.getElementById(i+"_"+newColIndex).innerHTML == activeCellText)
count ++;
else
break;
if(count == 5)
break;
}
for(var i=rowIndex-1;i>-1;i--)
{
var newColIndex;
newColIndex = colIndex - i + rowIndex;
if(newColIndex == colCount) break;
if(document.getElementById(i+"_"+newColIndex).innerHTML == activeCellText)
count ++;
else
break;
if(count == 5)
break;
}
if(count == 5)
return true;
/// 检测斜向
count = 0;
for(var i=rowIndex;i<rowCount;i++)
{
var newColIndex;
newColIndex = colIndex + i - rowIndex;
if(newColIndex == colCount) break;
if(document.getElementById(i+"_"+newColIndex).innerHTML == activeCellText)
count ++;
else
break;
if(count == 5)
break;
}
for(var i=rowIndex-1;i>-1;i--)
{
var newColIndex;
newColIndex = colIndex + i - rowIndex;
if(newColIndex < 0) break;
if(document.getElementById(i+"_"+newColIndex).innerHTML == activeCellText)
count ++;
else
break;
if(count == 5)
break;
}
if(count == 5)
return true;
return false;
}
// 页面加载完成事件
var afterLoad = function()
{
initTable(15,15);
/// 重新开始
document.getElementById("btnStart").onclick = function()
{
initTable(15,15);
}
}
// 设置页面消息
var setMsg = function(msg)
{
document.getElementById("divMsg").innerHTML = msg;
}
</script>
</head>
<body>
<div style="text-align:center">
<div id="divMsg"></div>
<table id="tbFive" cellpadding="0" cellspacing="0" border="1">
</table>
<div>
<input type="button" id="btnStart" value="开始"/>
</div>
</div>
<script language="javascript" type="text/javascript">
afterLoad();
</script>
</body>
</html>