HTML5 利用canvas构建 Web五子棋游戏程序设计

这只是一个简单的javascript和HTML5小程序，没有实现人机对战。五子棋棋盘落子点对应的二维数组。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子，数组元素值为1表示该元素对应的落子点有白棋子，数组元素值为2表示该元素对应的落子点有黑棋子；判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的。判断五子棋赢棋算法下边的函数可以实现判断五子棋赢棋的算法，也可以按照教材中相应的算法实现。其中函数的参数xx.yy为数组下标，chess数组实现五子棋棋盘落子点的数据结构映射。算法的思想方法是：以当前落子点对应的下标为基点，向其周围8个方向进行搜索，如果有同色子连五子，返回1，或2，否则返回0。返回1代表白棋方胜，返回2代表黑棋方胜。返回0代表没有发生赢棋数据结构状态。提供程序用到的棋子

<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><styletype="text/css">body{margin:10px;}</style><scripttype="text/javascript">varcanvas;varcontext;varisWhite=true;//设置是否该轮到白棋varisWell=false;//设置该局棋盘是否赢了，如果赢了就不能再走了varimg_b=newImage();img_b.src="p_w_picpaths/b.png";//白棋图片varimg_w=newImage();img_w.src="p_w_picpaths/w.png";//黑棋图片varchessData=newArray(15);//这个为棋盘的二维数组用来保存棋盘信息，初始化0为没有走过的，1为白棋走的，2为黑棋走的for(varx=0;x<15;x++){chessData[x]=newArray(15);for(vary=0;y<15;y++){chessData[x][y]=0;}}functiondrawRect(){//页面加载完毕调用函数，初始化棋盘canvas=document.getElementById("canvas");context=canvas.getContext("2d");for(vari=0;i<=640;i+=40){//绘制棋盘的线context.beginPath();context.moveTo(0,i);context.lineTo(640,i);context.closePath();context.stroke();context.beginPath();context.moveTo(i,0);context.lineTo(i,640);context.closePath();context.stroke();}}functionplay(e){//鼠标点击时发生varx=parseInt((e.clientX-20)/40);//计算鼠标点击的区域，如果点击了（65，65），那么就是点击了（1，1）的位置vary=parseInt((e.clientY-20)/40);if(chessData[x][y]!=0){//判断该位置是否被下过了alert("你不能在这个位置下棋");return;}if(isWhite){isWhite=false;drawChess(1,x,y);}else{isWhite=true;drawChess(2,x,y);}}functiondrawChess(chess,x,y){//参数为，棋（1为白棋，2为黑棋），数组位置if(isWell==true){alert("已经结束了，如果需要重新玩，请刷新");return;}if(x>=0&&x<15&&y>=0&&y<15){if(chess==1){context.drawImage(img_w,x*40+20,y*40+20);//绘制白棋chessData[x][y]=1;}else{context.drawImage(img_b,x*40+20,y*40+20);chessData[x][y]=2;}judge(x,y,chess);}}functionjudge(x,y,chess){//判断该局棋盘是否赢了varcount1=0;varcount2=0;varcount3=0;varcount4=0;//左右判断for(vari=x;i>=0;i--){if(chessData[i][y]!=chess){break;}count1++;}for(vari=x+1;i<15;i++){if(chessData[i][y]!=chess){break;}count1++;}//上下判断for(vari=y;i>=0;i--){if(chessData[x][i]!=chess){break;}count2++;}for(vari=y+1;i<15;i++){if(chessData[x][i]!=chess){break;}count2++;}//左上右下判断for(vari=x,j=y;i>=0,j>=0;i--,j--){if(chessData[i][j]!=chess){break;}count3++;}for(vari=x+1,j=y+1;i<15,j<15;i++,j++){if(chessData[i][j]!=chess){break;}count3++;}//右上左下判断for(vari=x,j=y;i>=0,j<15;i--,j++){if(chessData[i][j]!=chess){break;}count4++;}for(vari=x+1,j=y-1;i<15,j>=0;i++,j--){if(chessData[i][j]!=chess){break;}count4++;}if(count1>=5||count2>=5||count3>=5||count4>=5){if(chess==1){alert("白棋赢了");}else{alert("黑棋赢了");}isWell=true;//设置该局棋盘已经赢了，不可以再走了}}</script></head><bodyonload="drawRect()"><div><canvaswidth="640"id="canvas"onmousedown="play(event)"height="640">你的浏览器不支持HTML5canvas，请使用googlechrome浏览器打开.</canvas></div></body></html>