白开心

  IT博客 :: 首页 ::  :: 联系 :: 聚合  :: 管理 ::
  9 随笔 :: 76 文章 :: 28 评论 :: 0 Trackbacks
<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 
= "&nbsp";
                    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 < 0break;
                
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 < 0break;
                
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>

posted on 2009-09-03 14:27 白开心 阅读(504) 评论(1)  编辑 收藏 引用 所属分类: JavaScript

评论

# re: JS五子棋 2012-07-17 10:43 Edward
浅显易懂适合初学者。
不过小弟说下几个问题。。。
1. 要给div指定宽/高, 或者给内部的table指定宽/高
2. 居中的话 针对FF等还需要使用margin:0 auto;
3. cell = row.insertCell();
// 这里要插入参数cell = row.insertCell(j);

可能是老帖,版主没注意,稍作纠正,希望我们这些初学者,能注意这些问题。  回复  更多评论
  

只有注册用户登录后才能发表评论。