jQuery实现的五子棋游戏实例
本文实例讲述了jQuery实现的五子棋游戏。分享给大家供大家参考。具体如下：
这是一款非常不错的代码，就是人工智能方面差了一点
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>五子棋</title>
<styletype="text/css">
div{margin:0;padding:0;}
div.board{width:561px;height:561px;border:1pxsolid#ccc;margin:0auto;}
div.boarddiv{width:31px;height:31px;border:1pxsolid#ccc;float:left;cursor:pointer;background-repeat:no-repeat;}
div.board.person{background-image:url('images/1/files/demo/white.jpg')}
div.board.machine{background-image:url('images/1/files/demo/black.jpg')}
div.board.person_star{background-image:url('images/1/files/demo/white_star.jpg')}
div.board.machine_star{background-image:url('images/1/files/demo/black_star.jpg')}
input.ipt{display:block;margin:0auto;margin-top:8px;width:70px}
</style>
</head>
<body>
<divclass='board'id='board'>
</div>
<inputtype='button'value='开始游戏'onclick="initGame();
this.value='重新开始'"class='ipt'/>
<scripttype='text/javascript'>
varTRANSVERSE=16;
varVERTICAL=16;
varLEFT=1;
varRIGHT=2;
varTOP=3;
varBOTTOM=4;
varLEFT_TOP=5;
varLEFT_BOTTOM=6;
varRIGHT_TOP=7;
varRIGHT_BOTTOM=8;
varChess=function()
{
varowner='';
varvictory=false;
this.getOwner=function(){returnowner;};
this.setOwner=function(value){owner=value;};
this.getVictory=function(){returnvictory;}
this.setVictory=function(value){victory=value;}
}
varBoard=function()
{
varchessBoard=[];
varisGameOver=false;
this.getChess=function(point)
{
varx=point.x,y=point.y;
returnchessBoard[y][x];
}
this.setChess=function(chess,point)
{
varx=point.x,y=point.y;
chessBoard[y][x]=chess;
}
this.setVictory=function(points)
{
for(vari=0;i<points.length;i++)
{
for(varj=0;j<points[i].length;j++)
{
varchess=this.getChess(points[i][j]);
chess.setVictory(true);
}
}
}
this.getAvaiablePoints=function()
{
varavaiable=newArray;
for(vary=0;y<=VERTICAL;y++)
{
for(varx=0;x<=TRANSVERSE;x++)
{
if(chessBoard[y][x])continue;
varpoint={x:x,y:y};
avaiable.push(point);
}
}
returnavaiable;
}
this.getMap=function()
{
varmap={};
for(vary=0;y<=VERTICAL;y++)
{
for(varx=0;x<=TRANSVERSE;x++)
{
varchess=chessBoard[y][x];
varvalue='';
if(chess)
{
value=chess.getOwner();
if(chess.getVictory())value+='_star';
}
else
{
value='';
}
map[x+','+y]=value;
}
}
returnmap;
}
this.gameOver=function()
{
returnisGameOver=true;
}
this.isGameOver=function()
{
returnisGameOver;
}
this.getNextPoint=function(point,direction)
{
varnext={x:point.x,y:point.y};
switch(direction)
{
caseLEFT:
next.x-=1;
break;
caseRIGHT:
next.x+=1;
break;
caseTOP:
next.y-=1;
break;
caseBOTTOM:
next.y+=1;
break;
caseLEFT_TOP:
next.x-=1,next.y-=1;
break;
caseRIGHT_TOP:
next.x+=1,next.y-=1;
break;
caseLEFT_BOTTOM:
next.x-=1,next.y+=1;
break;
caseRIGHT_BOTTOM:
next.x+=1,next.y+=1;
break;
default:
alert('方向错误');
}
returnnext;
}
varinitialize=function()
{
for(vari=0;i<=VERTICAL;i++)chessBoard.push([]);
}
initialize();
}
varCompute=function(role)
{
vardirections=[LEFT,TOP,RIGHT,BOTTOM,LEFT_TOP,LEFT_BOTTOM,RIGHT_TOP,RIGHT_BOTTOM];
varscore=0;
varself=this;
this._computeScore=function(direction)
{
thrownewError('未实现');
}
this._convertToPattern=function(chesslist)
{
returnrole.convertToPattern(chesslist)
}
this.compute=function(point)
{
score=0;
for(vari=0,direction;direction=directions[i++];)
{
score+=this._computeScore(point,direction);
}
}
this.getScore=function(refPoint)
{
returnscore;
}
}
varFive=function(role)
{
Compute.call(this,role);
varcomputeScore1=function(refPoint,direction)
{
varpredefined='IIII';
varchesslist=role.find(refPoint,direction,4);
varpattern=role.convertToPattern(chesslist);
if(predefined==pattern)returntrue;
returnfalse;
}
varcomputeScore2=function(refPoint,direction)
{
varprev=role.find(refPoint,direction,2);
varnext=role.find(refPoint,role.reverseDirection(direction),2);
varprevPattern=role.convertToPattern(prev);
varnextPattern=role.convertToPattern(next);
if(prevPattern=='II'&&nextPattern=='II')returntrue;
returnfalse;
}
varcomputeScore3=function(refPoint,direction)
{
varprev=role.find(refPoint,direction,3);
varnext=role.find(refPoint,role.reverseDirection(direction),1);
varprevPattern=role.convertToPattern(prev);
varnextPattern=role.convertToPattern(next);
if(prevPattern=='III'&&nextPattern=='I')returntrue;
returnfalse;
}
this._computeScore=function(refPoint,direction)
{
if(computeScore1(refPoint,direction)||computeScore2(refPoint,direction)||computeScore3(refPoint,direction))
return100000;
elsereturn0;
}
}
varFour_Live=function(role)
{
Compute.call(this,role);
this._computeScore=function(refPoint,direction)
{
varscore=0;
varprev=role.find(refPoint,direction,4);
varnext=role.find(refPoint,role.reverseDirection(direction),1);
varprevPattern=this._convertToPattern(prev);
varnextPattern=this._convertToPattern(next);
if(prevPattern=='III0'&&nextPattern=='0')score=10000;
returnscore;
}
}
varFour_Live1=function(role)
{
Compute.call(this,role);
this._computeScore=function(refPoint,direction)
{
varprev=role.find(refPoint,direction,3);
varnext=role.find(refPoint,role.reverseDirection(direction),2);
varprevPattern=this._convertToPattern(prev);
varnextPattern=this._convertToPattern(next);
if(prevPattern=='II0'&&nextPattern=='I0')return10000;
elsereturn0;
}
}
varTree_Live=function(role)
{
Compute.call(this,role);
this._computeScore=function(refPoint,direction)
{
varscore=0;
varprev=role.find(refPoint,direction,3);
varnext=role.find(refPoint,role.reverseDirection(direction),2);
varprevPattern=this._convertToPattern(prev);
varnextPattern=this._convertToPattern(next);
if(prevPattern=='II0'&&nextPattern=='00')
score+=1000;
returnscore;
}
}
varTree_Live1=function(role)
{
Compute.call(this,role);
this._computeScore=function(refPoint,direction)
{
varprev=role.find(refPoint,direction,2);
varnext=role.find(refPoint,role.reverseDirection(direction),3);
varprevPattern=this._convertToPattern(prev);
varnextPattern=this._convertToPattern(next);
if(prevPattern=='I0'&&nextPattern=='I00')
return1000
elsereturn0;
}
}
varTwo_Live=function(role)
{
Compute.call(this,role);
this._computeScore=function(refPoint,direction)
{
varprev=role.find(refPoint,direction,3);
varnext=role.find(refPoint,role.reverseDirection(direction),2);
varprevPattern=this._convertToPattern(prev);
varnextPattern=this._convertToPattern(next);
if(prevPattern=='I00'&&nextPattern=='00')return100;
elsereturn0;
}
}
varOne_Live=function(role)
{
Compute.call(this,role);
this._computeScore=function(refPoint,direction)
{
varprev=role.find(refPoint,direction,3);
varnext=role.find(refPoint,role.reverseDirection(direction),3);
varprevPattern=this._convertToPattern(prev);
varnextPattern=this._convertToPattern(next);
if(prevPattern=='000'&&nextPattern=='000')return10;
elsereturn0;
}
}
varFour_End=function(role)
{
Compute.call(this,role);
this._computeScore=function(refPoint,direction)
{
varprev=role.find(refPoint,direction,3);
varnext=role.find(refPoint,role.reverseDirection(direction),1);
varprevPattern=this._convertToPattern(prev);
varnextPattern=this._convertToPattern(next);
if(prevPattern=='III'&&nextPattern=='0')return150;
elsereturn0;
}
}
varRole=function(board)
{
varcomputers=[];
varself=this;
varisVictory=false;
this.isVictory=function()
{
returnisVictory;
}
vargetScore=function(point)
{
varscore=0;
for(vari=0,computer;computer=computers[i++];)
{
computer.compute(point);
score+=computer.getScore();
}
varresult={score:score,point:point};
returnresult;
}
vargetScoreList=function()
{
varresult=[];
varavaiablePoints=board.getAvaiablePoints();
for(vari=0,point;point=avaiablePoints[i++];)
{
result.push(getScore(point));
}
returnresult;
}
this.getCode=function()
{
thrownewError('未实现');
}
this.getPeak=function()
{
varscoreInfo=getScoreList();
scoreInfo.sort(function(a,b){
returnb.score-a.score;
});
returnscoreInfo[0];
}
this.convertToPattern=function(chesslist)
{
varpattern='';
if(!chesslist)return'';
for(vari=0;i<chesslist.length;i++)
{
varchess=chesslist[i];
if(chess==undefined)pattern+='0';
elseif(chess.getOwner()==this.getCode())pattern+='I';
elsepattern+='Y';
}
returnpattern;
}
this.reverseDirection=function(direction)
{
switch(direction)
{
caseLEFT:returnRIGHT;
caseRIGHT:returnLEFT;
caseTOP:returnBOTTOM;
caseBOTTOM:returnTOP;
caseLEFT_TOP:returnRIGHT_BOTTOM;
caseRIGHT_BOTTOM:returnLEFT_TOP;
caseRIGHT_TOP:returnLEFT_BOTTOM;
caseLEFT_BOTTOM:returnRIGHT_TOP;
default:alert('方向错误');
}
}
this._checkGameOver=function(point)
{
varleftRight=findVictory(point,LEFT);
vartopBottom=findVictory(point,TOP);
varleftTopRightBottom=findVictory(point,LEFT_TOP);
varrightTopLeftBottom=findVictory(point,RIGHT_TOP);
vararray=[leftRight,topBottom,leftTopRightBottom,rightTopLeftBottom];
varvictory=[];
for(vari=0;i<array.length;i++)
{
if(array[i].length>=5)victory.push(array[i]);
}
if(victory.length>0)
{
board.gameOver();
board.setVictory(victory);
isVictory=true;
}
if(board.getAvaiablePoints().length==0)board.gameOver();
}
varisLicitPoint=function(point)
{
returnpoint.x>=0&&point.y>=0&&point.x<=TRANSVERSE&&point.y<=VERTICAL
&&board.getChess(point)&&board.getChess(point).getOwner()==self.getCode()
}
varfindVictory=function(refPoint,direction)
{
varreverse=self.reverseDirection(direction);
varresult=[];
varnextPoint;
varcurrPoint={x:refPoint.x,y:refPoint.y};
while(true)
{
nextPoint=board.getNextPoint(currPoint,direction);
if(!isLicitPoint(nextPoint))break;
currPoint={x:nextPoint.x,y:nextPoint.y};
}
while(true)
{
result.push(currPoint);
nextPoint=board.getNextPoint(currPoint,reverse);
if(!isLicitPoint(nextPoint))break;
currPoint={x:nextPoint.x,y:nextPoint.y};
}
returnresult;
}
this.find=function(point,direction,deep)
{
varrefPoint={x:point.x,y:point.y};
varresult=newArray;
varindex=1;
varnextPoint;
while(index<=deep)
{
nextPoint=board.getNextPoint(refPoint,direction);
if(nextPoint.x<0||nextPoint.y<0||
nextPoint.x>TRANSVERSE||nextPoint.y>VERTICAL)returnnull;
varchess=board.getChess(nextPoint);
if(chess)chess.point={x:nextPoint.x,y:nextPoint.y};
result.push(chess);
refPoint=nextPoint;
index++;
}
returnresult;
}
varinitialize=function()
{
computers.push(newFive(self));
computers.push(newFour_Live(self));
computers.push(newTree_Live(self));
computers.push(newFour_Live1(self));
computers.push(newTree_Live1(self));
computers.push(newTwo_Live(self));
computers.push(newOne_Live(self));
computers.push(newFour_End(self));
}
initialize();
}
varMachine=function(board,rival)
{
Role.call(this,board);
this.setChess=function()
{
if(board.isGameOver())return;
varmyPeak=this.getPeak();
varrivalPeak=rival.getPeak();
varpeak;
if(myPeak.score>=rivalPeak.score)peak=myPeak;
elsepeak=rivalPeak;
varchess=newChess();
chess.setOwner(this.getCode());
board.setChess(chess,peak.point);
this._checkGameOver(peak.point);
}
this.getCode=function(){return'machine';}
}
varPerson=function(board,rival)
{
Role.call(this,board);
this.setChess=function(x,y)
{
if(board.isGameOver())return;
varpoint=newObject;
point.x=x;
point.y=y;
varchess=newChess()
chess.setOwner(this.getCode());
board.setChess(chess,point);
this._checkGameOver(point);
}
this.getCode=function(){return'person';}
}
varUIBase=function()
{
varself=this;
this._id='$UI'+(++UIBase.index);
this._globalKey="";
this.getHTML=function()
{
return"";
}
varsetGlobalKey=function()
{
varmagic='$UI_Items';
self._globalKey='window.'+magic+'.'+self._id;
window[magic]=window[magic]||{};
window[magic][self._id]=self;
}
varformatHTML=function(html)
{
html=html.replace(/\$\$/g,self._globalKey);
html=html.replace(/&&/g,self._id);
returnhtml;
}
varinitUIBase=function()
{
setGlobalKey();
}
this.renderHTML=function()
{
returnformatHTML(this.getHTML());
}
this.getDOM=function()
{
vardom=document.getElementById(this._id)
returndom;
}
initUIBase();
}
UIBase.index=0;
varChessUI=function(board,placeholder)
{
UIBase.call(this);
this.setChess=function(){}
this.getHTML=function()
{
varhtml='';
varmap=board.getMap();
for(varkeyinmap)
{
varonclick='';
varclassName=map[key];
if(className=='')onclick='$$._setChess('+key+')';
html+='<divonclick="'+onclick+'"class="'+className+'"></div>';
}
returnhtml;
}
this.draw=function()
{
varhtml=this.renderHTML();
document.getElementById(placeholder).innerHTML=html;
}
this._setChess=function(x,y)
{
this.setChess(x,y);
}
this.draw();
}
functiongetMSIEVersion()
{
varregex=/MSIE([^;]+)/;
varuserAgent=navigator.userAgent;
varresult=regex.exec(userAgent);
if(result)returnparseInt(result[1]);
}
functioninitGame()
{
varversion=getMSIEVersion();
if(version&&version<=8)
{
alert('请使用非IE浏览器(ie9、10除外)进行游戏(googlechrome、firefox等)');
return;
}
varboard=newBoard();
varperson=newPerson(board);
varmachine=newMachine(board,person);
varchessUI=newChessUI(board,'board');
chessUI.setChess=function(x,y)
{
person.setChess(x,y);
machine.setChess();
chessUI.draw();
if(board.isGameOver())
{
if(person.isVictory())alert('您获得了胜利');
elseif(machine.isVictory())alert('机器获得了胜利');
elsealert('游戏结束，胜负未分');
}
}
if(Math.floor(Math.random()*10)%2)
{
alert('机器执棋');
machine.setChess();
chessUI.draw();
}
else
{
alert('您执棋');
}
}
</script>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。