看到一些曾经只会灌水的网友，在学习了前端之后，已经能写出下载量几千几万的脚本、样式，帮助大众，成为受欢迎的人，感觉满羡慕的。我也想学会前端技术，变得受欢迎呀。于是心血来潮，开始学习前端知识，并写下了这个小练习。

基本思路是这样的：

使用Canvas绘制棋盘、棋子。

用二维数组保存棋盘状态。

设置一个flag，用以标识落子顺序。

点击时，在数组中检测当前点击位置是否存在棋子，若存在，则不落子；如游戏已结束，亦不落子。

落子时，更新数组，并将当前落子所在的行、列、左上-右下列、左下-右上列四个方向的棋盘状态写入到一维数组中，用以判断新落子是否形成了五子连珠。

若形成了五子连珠，提示胜利，并结束游戏；反之，则交换顺序，继续进行游戏。

　　效果图：

　　

代码如下：

1<!DOCTYPEhtml>2<htmllang="zh-CN">3<metacharset="utf-8">4<head><title>五子棋</title></head>5<body>6<canvasid="myCanvas"width="560"height="560">7您的浏览器不支持HTML5canvas标签。</canvas><br/>8<buttonid="reset"onclick="controller.init(ctx)">重置</button>9</body>10<script>11varcontroller={12round:true,13color:"black",14whiteTable:newArray(),15blackTable:newArray(),16row:0,17col:0,18over:false,19trans:function(){20this.round=!this.round;21if(!this.round){22this.blackTable[this.row][this.col]=1;23this.ifWin(this.blackTable)24this.color="white";25}26else{27this.whiteTable[this.row][this.col]=1;28this.ifWin(this.whiteTable)29this.color="black";30}31},32ifWin:function(table){33vararr1=newArray();34vararr2=newArray();35vararr3=newArray();36vararr4=newArray();37varn=0;38for(x=0;x<=lineNums;x++){39for(y=0;y<=lineNums;y++)40{41varx1=this.row-n;42varx2=this.row+n;43vary1=this.col-n;44vary2=this.col+n;45if(y==this.col){46arr1[x]=table[x][y];47}48if(x==this.row){49arr2[y]=table[x][y];50}51}52if(this.inBounds(x1)&&this.inBounds(y2)){53arr3[x1]=table[x1][y2];54}55if(this.inBounds(x1)&&this.inBounds(y1)){56arr4[x1]=table[x1][y1];57}58if(this.inBounds(x2)&&this.inBounds(y1)){59arr3[x2]=table[x2][y1];60}61if(this.inBounds(x2)&&this.inBounds(y2)){62arr4[x2]=table[x2][y2];63}64n=n+1;65}66this.getSum(arr1,this.row);67this.getSum(arr2,this.col);68this.getSum(arr3,this.row);69this.getSum(arr4,this.row);70},71inBounds:function(i){72if(i>=0&&i<=15){73returntrue;74}75else{76returnfalse;77}78},79getSum:function(array,pos){80num=5;81posr=pos+1;82while(num>0){83if(array[pos]>0&&this.inBounds(pos)){84num=num-1;85pos=pos-1;86}87else{88break;89}90}91while(num>0){92if(array[posr]>0&&this.inBounds(pos)){93num=num-1;94posr=posr+1;95}96else{97break;98}99}100if(num==0){101this.over=true;102this.gameOver();103}104},105exist:function(x,y){106this.row=x/ratio;107this.col=y/ratio;108varnums=this.whiteTable[this.row][this.col]+this.blackTable[this.row][this.col];109if(nums>0{110returntrue;111}112else{113returnfalse;114}115},116gameOver:function(){117ctx.font="30pxArial";118ctx.fillStyle="#FF0000";119if(this.round){120ctx.fillText("白棋胜利",240,240);121}122else{123ctx.fillText("黑棋胜利",240,240);124}125},126init:function(){127this.round=true;128this.color="black";129this.over=false;130this.drawBoard();131for(i=0;i<=lineNums;i++){132this.whiteTable[i]=newArray();133this.blackTable[i]=newArray();134for(n=0;n<=lineNums;n++){135this.whiteTable[i][n]=0;136this.blackTable[i][n]=0;137}138}139},140drawBoard:function(){141ctx.beginPath();142ctx.clearRect(0,0,width,width);143ctx.fillStyle="#FFBB00";144ctx.fillRect(0,0,width,width);145for(vari=1;i<(lineNums-1);i++){146ctx.moveTo(i*ratio,0);147ctx.lineTo(i*ratio,width);148ctx.stroke();149ctx.moveTo(0,i*ratio);150ctx.lineTo(width,i*ratio);151ctx.stroke();152}153},154drawPiece:function(posX,posY){155ctx.beginPath();156ctx.arc(posX,posY,ratio/2,0,2*Math.PI);157ctx.fillStyle=this.color;158ctx.fill();159ctx.stroke();160}161};162//获取点击位置163functiongetMousePos(canvas,evt){164varrect=canvas.getBoundingClientRect();165return{166x:evt.clientX-rect.left*(canvas.width/rect.width),167y:evt.clientY-rect.top*(canvas.height/rect.height)168}169}170171functiongetNode(pos){172return((pos/ratio).toFixed())*ratio;173}174175varcanvas=document.getElementById("myCanvas");176varctx=canvas.getContext("2d");177varlineNums=15;178varratio=40;179varwidth=(lineNums-1)*ratio;180181controller.init();182183canvas.addEventListener("click",function(evt){184varmousePos=getMousePos(canvas,evt);185mousePos.x=getNode(mousePos.x);186mousePos.y=getNode(mousePos.y);187varexist=controller.exist(mousePos.x,mousePos.y);188if(!exist&&!controller.over){189controller.drawPiece(mousePos.x,mousePos.y);190controller.trans();191}192},false);193</script>194</html>

l