自己写的javascript五子棋

可能比较繁杂，欢迎指正!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>five-in-a-raw</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style>
<!--
table{text-align: center;font-size: 20px;cursor: hand;empty-cells: show;table-layout: fixed;}
-->
</style>
  </head>
  <script type="text/javascript">
<!--
function FiveRawGame(){
this.redChess="<font color=\"red\">X</font>";
this.blackChess="<font color='black'>O</font>";
//初始化棋盘和数据
this.init=function(){
var str="<table  width=\"600\" height=\"600;\" border=\"1\" cellpadding=\"0\" cellspacing=\"0\"  >";
for(var i=0;i<25;i++){
str+="<tr height='7'>";
for(var j=0;j<25;j++){
str+="<td id='r"+i+"c"+j+"' onclick=\"FiveRawGame.chess("+i+","+j+")\" onmouseover=\"FiveRawGame.showMsg("+i+","+j+")\">&nbsp;</td>";
}
str+="</tr>";
}
str+="</table>";
document.getElementById("main").innerHTML=str;
this.allGrids=new Array();
for(var a=0;a<25;a++){
this.allGrids[a]=new Array();
}
for(var i=0;i<25;i++){
for(var j=0;j<25;j++){
this.allGrids[i][j]=new grid(i,j,"O");
}
}
this.isChess=true;
this.redArr=new Array();
this.blackArr=new Array();
this.allArr=new Array();
};
}
FiveRawGame.prototype.chess=function(i,j){
if(this.isChess&&this.allGrids[i][j].piece=='O'){
document.getElementById("r"+i+"c"+j).innerHTML=this.blackChess;
this.isChess=false;
this.allGrids[i][j].piece="B";
//把该步棋子装入黑方数组
this.blackArr[this.blackArr.length]=this.allGrids[i][j];
this.allArr[this.allArr.length]=this.allGrids[i][j];
//判断输赢 赢则结束游戏
//给该棋子8个方向的棋子赋值
this.insertPiece(i,j,'B');
//调用红方下子
this.computerChess();
}else{
document.getElementById("msg").innerHTML="请等红方下完!";
}
};
FiveRawGame.prototype.computerChess=function(){//电脑下棋
//1、找玩家最后一颗棋子四个方向个有几个？顺便赋值
var hasGrid;
hasGrid=this.assignPiece(this.blackArr[this.blackArr.length-1]);
if(hasGrid==null||hasGrid==false)return;
//2、找自己是否有走一颗棋子就直接胜利的位置
hasGrid=this.enumeration("R",1);
if(hasGrid==null||hasGrid==false){
//3、找对方是否有走一颗棋子就直接胜利的位置
hasGrid=this.enumeration("B",1);
if(hasGrid==null||hasGrid==false){
//4、找对方是否有走一颗棋子就堵不住的位置
hasGrid=this.enumeration("B",2);
if(hasGrid==null||hasGrid==false){
//5、找自己是否有走一颗棋子就堵不住的位置
hasGrid=this.enumeration("R",2);
if(hasGrid==null||hasGrid==false){
//6、否则找最优最好位置堵
hasGrid=this.assignPiece(this.blackArr[this.blackArr.length-1]);
if(hasGrid==null||hasGrid==false)return;
if(hasGrid==true){
for(var j=this.redArr.length-1;j>=0;j--){
hasGrid=this.assignPiece(this.redArr[j]);
if(hasGrid!=null&&hasGrid!=false&&hasGrid!==true)
break;
}
}
}
}
}
}
var r=hasGrid.rowNum;
var c=hasGrid.colNum;
this.allGrids[r][c].piece="R";
document.getElementById("r"+r+"c"+c).innerHTML=this.redChess;
this.redArr[this.redArr.length]=this.allGrids[r][c];
this.allArr[this.allArr.length]=this.allGrids[r][c];
this.isChess=true;
//给该棋子8个方向的棋子赋值
this.insertPiece(r,c,'R');
this.assignPiece(this.allGrids[r][c]);
return;
};

解决方案 »

  1.   


    //找出这个棋子四个方向的数量，并且返回该棋子四周最好下子的位置
    FiveRawGame.prototype.assignPiece=function(grid){
    var piece=grid.piece;
    this.goodChess=new Array();
    //横向
    var count=0;
    var r=grid.rowNum;
    var c=grid.colNum;
    //alert(r+","+c+","+piece);
    do{c--;}while(c>=0&&this.allGrids[r][c].piece==piece);
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    do{c++;count++;}while(c<25&&this.allGrids[r][c].piece==piece);
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    this.allGrids[grid.rowNum][grid.colNum].num1=count-1;
    var num1=count-1;
    //alert(r+","+c+","+this.allGrids[r][c].piece+","+(count-1));
    //竖向
    var count=0;
    var r=grid.rowNum;
    var c=grid.colNum;
    do{r--;}while(r>=0&&this.allGrids[r][c].piece==piece);
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    do{r++;count++;}while(r<25&&this.allGrids[r][c].piece==piece);
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    this.allGrids[grid.rowNum][grid.colNum].num2=count-1;
    var num2=count-1;
    //撇向
    var count=0;
    var r=grid.rowNum;
    var c=grid.colNum;
    do{r++;c--;}while(r<25&&c>=0&&this.allGrids[r][c].piece==piece);
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    do{r--;c++;count++;}while(r>=0&&c<25&&this.allGrids[r][c].piece==piece);
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    this.allGrids[grid.rowNum][grid.colNum].num3=count-1;
    var num3=count-1;
    //捺向
    var count=0;
    var r=grid.rowNum;
    var c=grid.colNum;
    do{r--;c--;}while(c>=0&&this.allGrids[r][c].piece==piece&&r>=0);
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    do{r++;c++;count++;}while(r<25&&c<25&&this.allGrids[r][c].piece==piece);
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    this.allGrids[grid.rowNum][grid.colNum].num4=count-1;
    var num4=count-1;
    var maxValue=0;
    maxValue=Math.max(num1,num2);
    maxValue=Math.max(maxValue,num3);
    maxValue=Math.max(maxValue,num4);
    if(maxValue>=5){
    if(piece=='R'){
    alert("红方胜出!");
    if(window.confirm("是否重新开局?")){
    this.init();
    }
    return false;
    }else if(piece=='B'){
    alert("黑方胜出!");
    if(window.confirm("是否重新开局?")){
    this.init();
    }
    return false;
    }
    }
    //判断哪个值与最大值相同
    if(maxValue==num1){
    if(this.goodChess[0].piece=="O")return this.goodChess[0];
    if(this.goodChess[1].piece=="O")return this.goodChess[1];
    }
    if(maxValue==num2){
    if(this.goodChess[2].piece=="O")return this.goodChess[2];
    if(this.goodChess[3].piece=="O")return this.goodChess[3];
    }
    if(maxValue==num3){
    if(this.goodChess[4].piece=="O")return this.goodChess[4];
    if(this.goodChess[5].piece=="O")return this.goodChess[5];
    }
    if(maxValue==num4){
    if(this.goodChess[6].piece=="O")return this.goodChess[6];
    if(this.goodChess[7].piece=="O")return this.goodChess[7];
    }
    return true;
    };
    FiveRawGame.prototype.insertPiece=function(i,j,piece){
    var row=i;
    var col=j;
    //找出四个方向的属于自己的棋子并且逐个加1
    while(row-1>=0&&col-1>=0&&this.allGrids[row-1][col-1].piece==piece){//左上
    this.allGrids[row-1][col-1].num4=this.allGrids[row-1][col-1].num4+1;
    row--;
    col--;
    if(this.allGrids[row-1][col-1].piece!=piece)break;
    }
    row=i;
    col=j;
    while(row-1>0&&this.allGrids[row-1][col].piece==piece){//上
    this.allGrids[row-1][col].num4=this.allGrids[row-1][col].num4+1;
    row--;
    if(this.allGrids[row-1][col].piece!=piece)break;
    }
    row=i;
    col=j;
    while(row-1>=0&&col+1>=0&&this.allGrids[row-1][col+1].piece==piece){//右上
    this.allGrids[row-1][col+1].num4=this.allGrids[row-1][col+1].num4+1;
    row--;
    col++;
    if(this.allGrids[row-1][col+1].piece!=piece)break;
    }
    row=i;
    col=j;
    while(col-1>0&&this.allGrids[row][col-1].piece==piece){//左
    this.allGrids[row][col-1].num4=this.allGrids[row][col-1].num4+1;
    col--;
    if(this.allGrids[row][col-1].piece!=piece)break;
    }
    row=i;
    col=j;
    while(col+1>0&&this.allGrids[row][col+1].piece==piece){//右
    this.allGrids[row][col+1].num4=this.allGrids[row][col+1].num4+1;
    col++;
    if(this.allGrids[row][col+1].piece!=piece)break;
    }
    row=i;
    col=j;
    while(row+1>=0&&col-1>=0&&this.allGrids[row+1][col-1].piece==piece){//左下
    this.allGrids[row+1][col-1].num4=this.allGrids[row+1][col-1].num4+1;
    row++;
    col--;
    if(this.allGrids[row+1][col-1].piece!=piece)break;
    }
    row=i;
    col=j;
    while(row+1>0&&this.allGrids[row+1][col].piece==piece){//下
    this.allGrids[row+1][col].num4=this.allGrids[row+1][col].num4+1;
    row++;
    if(this.allGrids[row+1][col].piece!=piece)break;
    }
    row=i;
    col=j;
    while(row+1>=0&&col+1>=0&&this.allGrids[row+1][col+1].piece==piece){//右下
    this.allGrids[row+1][col+1].num4=this.allGrids[row+1][col+1].num4+1;
    row++;
    col++;
    if(this.allGrids[row+1][col+1].piece!=piece)break;
    }
    };
      

  2.   


    FiveRawGame.prototype.enumeration=function(piece,stype){
    var checks=this.allGrids;
    var canX="";
    //找出所有没有下棋子的，并且在距离它两个子内没有棋子的
    var len=this.allArr.length;
    for(var i=0;i<len;i++){
    var r=this.allArr[i].rowNum;
    var c=this.allArr[i].colNum;
    //找该棋子附近的24个位置
    if(r-2>=0&&c-2>=0&&checks[r-2][c-2].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r-2)+","+(c-2);
    if(r-2>=0&&c-1>=0&&checks[r-2][c-1].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r-2)+","+(c-1);
    if(r-2>=0&&checks[r-2][c].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r-2)+","+(c);
    if(r-2>=0&&c+1<25&&checks[r-2][c+1].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r-2)+","+(c+1);
    if(r-2>=0&&c+2<25&&checks[r-2][c+2].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r-2)+","+(c+2);
    if(r-1>=0&&c-2>=0&&checks[r-1][c-2].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r-1)+","+(c-2);
    if(r-1>=0&&c-1>=0&&checks[r-1][c-1].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r-1)+","+(c-1);
    if(r-1>=0&&checks[r-1][c].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r-1)+","+(c);
    if(r-1>=0&&c+1<25&&checks[r-1][c+1].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r-1)+","+(c+1);
    if(r-1>=0&&c+2<25&&checks[r-1][c+2].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r-1)+","+(c+2);
    if(c-2>=0&&checks[r][c-2].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r)+","+(c-2);
    if(c-1>=0&&checks[r][c-1].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r)+","+(c-1);
    if(c+1<25&&checks[r][c+1].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r)+","+(c+1);
    if(c+2<25&&checks[r][c+2].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r)+","+(c+2);
    if(r+1>=0&&c-2>=0&&checks[r+1][c-2].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r+1)+","+(c-2);
    if(r+1>=0&&c-1>=0&&checks[r+1][c-1].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r+1)+","+(c-1);
    if(r+1>=0&&checks[r+1][c].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r+1)+","+(c);
    if(r+1>=0&&c+1<25&&checks[r+1][c+1].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r+1)+","+(c+1);
    if(r+1>=0&&c+2<25&&checks[r+1][c+2].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r+1)+","+(c+2);
    if(r+2>=0&&c-1>=0&&checks[r+2][c-2].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r+2)+","+(c-2);
    if(r+2>=0&&c-1>=0&&checks[r+2][c-1].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r+2)+","+(c-1);
    if(r+2>=0&&checks[r+2][c].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r+2)+","+(c);
    if(r+2>=0&&c+1<25&&checks[r+2][c+1].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r+2)+","+(c+1);
    if(r+2>=0&&c+2<25&&checks[r+2][c+2].piece=="O")if(canX.indexOf(r+","+c)==-1)canX+="@"+(r+2)+","+(c+2);
    }
    var arrlen=canX.split("@");
    for(var j=0;j<arrlen.length;j++){
    if(arrlen[j]!=null&&arrlen[j]!=""){
    var r=arrlen[j].split(",")[0];
    var c=arrlen[j].split(",")[1];
    checks=new Array();
    checks=this.allGrids;
    //把棋子放在这个位置，看能发生什么状况
    checks[r][c].piece=piece;
    var has=findGD(r,c,checks,stype);
    this.allGrids[r][c].piece="O";
    if(has){
    return this.allGrids[r][c];
    }
    }
    }
    return false;
    };
    function findGD(sr,sc,checks,stype){
    var grid=checks[sr][sc];
    var piece=grid.piece;
    var testChess=new Array();
    //横向
    var count=0;
    var r=sr;
    var c=sc;
    while(c>0&&checks[r][c].piece==piece){c--;}
    testChess[testChess.length]=checks[r][c];
    do{c++;count++;}while(c<24&&checks[r][c].piece==piece);
    testChess[testChess.length]=checks[r][c];
    checks[grid.rowNum][grid.colNum].num1=count-1;
    var num1=count-1;
    //竖向
    var count=0;
    var r=sr;
    var c=sc;
    while(r>0&&checks[r][c].piece==piece){r--;}
    testChess[testChess.length]=checks[r][c];
    do{r++;count++;}while(r<24&&checks[r][c].piece==piece);
    testChess[testChess.length]=checks[r][c];
    checks[grid.rowNum][grid.colNum].num2=count-1;
    var num2=count-1;
    //撇向
    var count=0;
    var r=sr;
    var c=sc;
    while(r<24&&c>0&&checks[r][c].piece==piece){r++;c--;}
    testChess[testChess.length]=checks[r][c];
    do{r--;c++;count++;}while(r>0&&c<24&&checks[r][c].piece==piece);
    testChess[testChess.length]=checks[r][c];
    checks[grid.rowNum][grid.colNum].num3=count-1;
    var num3=count-1;
    //捺向
    var count=0;
    var r=sr;
    var c=sc;
    while(c>0&&r>0&&checks[r][c].piece==piece){r--;c--;}
    testChess[testChess.length]=checks[r][c];
    do{r++;c++;count++;}while(r<24&&c<24&&checks[r][c].piece==piece);
    testChess[testChess.length]=checks[r][c];
    checks[grid.rowNum][grid.colNum].num4=count-1;
    var num4=count-1;
    var maxValue=0;
    maxValue=Math.max(num1,num2);
    maxValue=Math.max(maxValue,num3);
    maxValue=Math.max(maxValue,num4);
    var allNum=0;
    //判断哪个值与最大值相同
    if(maxValue==num1){
    if(maxValue>=5)return true;
    if(stype==2&&maxValue==4&&testChess[0].piece=="O"&&testChess[1].piece=="O")return true;
    if(stype==2&&maxValue==3&&testChess[0].piece=="O"&&testChess[1].piece=="O")allNum++;
    }
    if(maxValue==num2){
    if(maxValue>=5)return true;
    if(stype==2&&maxValue==4&&testChess[2].piece=="O"&&testChess[3].piece=="O")return true;
    if(stype==2&&maxValue==3&&testChess[2].piece=="O"&&testChess[3].piece=="O")allNum++;
    }
    if(maxValue==num3){
    if(maxValue>=5)return true;
    if(stype==2&&maxValue==4&&testChess[4].piece=="O"&&testChess[5].piece=="O")return true;
    if(stype==2&&maxValue==3&&testChess[4].piece=="O"&&testChess[5].piece=="O")allNum++;
    }
    if(maxValue==num4){
    if(maxValue>=5)return true;
    if(stype==2&&maxValue==4&&testChess[6].piece=="O"&&testChess[7].piece=="O")return true;
    if(stype==2&&maxValue==3&&testChess[6].piece=="O"&&testChess[7].piece=="O")allNum++;
    }
    if(allNum>1){
    return true;
    }else{
    return false;
    }
    }
    FiveRawGame.prototype.showMsg=function (i,j){
    var grid=this.allGrids[i][j];
    var msg="坐标:X:"+i+",Y:"+j;
    //+"<br>"+grid.piece;
    document.getElementById("showMsg").innerHTML=msg;
    };
    //格子对象
    function grid(r,c,piece){
    this.rowNum=r;
    this.colNum=c;
    this.piece=piece;
    //4个方向各有几个自己的棋子
    this.num1=0;//横
    this.num2=0;//竖
    this.num3=0;//撇
    this.num4=0;//捺
    };
    //-->
    </script>
      <body bgcolor="#ffffff" >
       <div id="main" style="float: left;width: 60%;">
       </div>
       <div style="float:right;width: 35%;" >
       <b style="color:red;">红方:&nbsp;&nbsp;&nbsp;&nbsp;X&nbsp;&nbsp;&nbsp;&nbsp;电脑</b><br><br>
       <b style="color:black;">黑方:&nbsp;&nbsp;&nbsp;&nbsp;O&nbsp;&nbsp;&nbsp;&nbsp;玩家</b><br><br>
       <b style="color:black;">黑方先手！</b><br><br>
       <div id="msg" style="color: green;font-size: 20;"></div>
       <div id="showMsg" style="color: green;font-size: 20;"></div>
       <div id="error" style="color: green;font-size: 20;"></div>
       </div>
      </body>
    <script type="text/javascript">
    <!--
    function   document.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键 
    window.FiveRawGame=new FiveRawGame();
    FiveRawGame.init();
    //-->
    </script>  
    </html>
      

  3.   

    把长算法写到Ajax回调中去，要不然会出现假死的问题。操作以Ajax方式进行。或者加一个多线程的框架也不错
      

  4.   

    有bug，我第一颗棋子下在4个角上会出错
      

  5.   

    把这个函数换了//找出这个棋子四个方向的数量，并且返回该棋子四周最好下子的位置
    FiveRawGame.prototype.assignPiece=function(grid){
    var piece=grid.piece;
    this.goodChess=new Array();
    //横向
    var count=0;
    var r=grid.rowNum;
    var c=grid.colNum;
    //alert(r+","+c+","+piece);
    do{c--;}while(c>0&&this.allGrids[r][c].piece==piece);
    if(c<0)c=0;
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    do{c++;count++;}while(c<24&&this.allGrids[r][c].piece==piece);
    if(c>24)c=24;
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    this.allGrids[grid.rowNum][grid.colNum].num1=count-1;
    var num1=count-1;
    //alert(r+","+c+","+this.allGrids[r][c].piece+","+(count-1));
    //竖向
    var count=0;
    var r=grid.rowNum;
    var c=grid.colNum;
    do{r--;}while(r>0&&this.allGrids[r][c].piece==piece);
    if(r<0)r=0;
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    do{r++;count++;}while(r<24&&this.allGrids[r][c].piece==piece);
    if(r>24)r=24;
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    this.allGrids[grid.rowNum][grid.colNum].num2=count-1;
    var num2=count-1;
    //撇向
    var count=0;
    var r=grid.rowNum;
    var c=grid.colNum;
    do{r++;c--;}while(r<24&&c>0&&this.allGrids[r][c].piece==piece);
    if(r>24)r=24;
    if(c<0)c=0;
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    do{r--;c++;count++;}while(r>0&&c<24&&this.allGrids[r][c].piece==piece);
    if(c>24)c=24;
    if(r<0)r=0;
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    this.allGrids[grid.rowNum][grid.colNum].num3=count-1;
    var num3=count-1;
    //捺向
    var count=0;
    var r=grid.rowNum;
    var c=grid.colNum;
    do{r--;c--;}while(c>0&&r>0&&this.allGrids[r][c].piece==piece);
    if(r<0)r=0;
    if(c<0)c=0;
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    do{r++;c++;count++;}while(r<24&&c<24&&this.allGrids[r][c].piece==piece);
    if(r>24)r=24;
    if(c>24)c=24;
    this.goodChess[this.goodChess.length]=this.allGrids[r][c];
    this.allGrids[grid.rowNum][grid.colNum].num4=count-1;
    var num4=count-1;
    var maxValue=0;
    maxValue=Math.max(num1,num2);
    maxValue=Math.max(maxValue,num3);
    maxValue=Math.max(maxValue,num4);
    if(maxValue>=5){
    if(piece=='R'){
    alert("红方胜出!");
    if(window.confirm("是否重新开局?")){
    this.init();
    }
    return false;
    }else if(piece=='B'){
    alert("黑方胜出!");
    if(window.confirm("是否重新开局?")){
    this.init();
    }
    return false;
    }
    }
    //判断哪个值与最大值相同
    if(maxValue==num1){
    if(this.goodChess[0].piece=="O")return this.goodChess[0];
    if(this.goodChess[1].piece=="O")return this.goodChess[1];
    }
    if(maxValue==num2){
    if(this.goodChess[2].piece=="O")return this.goodChess[2];
    if(this.goodChess[3].piece=="O")return this.goodChess[3];
    }
    if(maxValue==num3){
    if(this.goodChess[4].piece=="O")return this.goodChess[4];
    if(this.goodChess[5].piece=="O")return this.goodChess[5];
    }
    if(maxValue==num4){
    if(this.goodChess[6].piece=="O")return this.goodChess[6];
    if(this.goodChess[7].piece=="O")return this.goodChess[7];
    }
    return true;
    };