admin 管理员组

文章数量: 1087819

五子棋游戏源码和核心算法的讲解（简易五子棋web版）

扫雷游戏代码【js】 

 <style>*{margin:0;}/*解决浏览器的兼容问题*/#canvas{background:#f4f4f4;margin:100px auto auto auto;display:block;border:7px solid #3d3d3d;box-shadow:0 0 30px;}body{background:url(.jpg@900w_1l_2o_100sh.jpg);background-size:cover;;}button{height:40px;width:100px;display:block;margin:45px auto ;border-radius: 25px;}</style></head><body><canvas id="canvas" height="450" width="450"></canvas><button id="restart">重新开始</button></body>

一、以上是界面的代码

二、js的部分代码

	 //获得画板var chess=document.getElementById("canvas");//获得画笔（上下文）var context=chess.getContext("2d");//true为白棋,false为黑棋var me=false;//棋盘数组，0代表没有棋子，1代表白棋，2代表黑棋var chessBorad=[];for(var i=0;i<15;i++){chessBorad[i]=[];for(var j=0;j<15;j++){chessBorad[i][j]=0;}}//获得按钮var restart=document.getElementById("restart");

三、以下的代码将棋盘（的线）画出来

//绘画棋盘的方法function drawChessBorad(){context.strokeStyle="#4d4d4d";//改变线条的颜色for(var i=0;i<15;i++){//棋盘的竖线context.moveTo(15+i*30,15);//起点context.lineTo(15+i*30,435);//终点context.stroke();//连线//棋盘的横线context.moveTo(15,15+i*30);//起点context.lineTo(435,15+i*30);//终点context.stroke();}}window.onload=function(){drawChessBorad();}

四、以下代码是用来绘画棋子的和重启游戏，以及画板的点击事件

	//画棋子function drawChess(i,j,me){//i纵坐标,j横坐标context.beginPath();context.arc(15+j*30,i*30+15,13,0,Math.PI*2,false);context.closePath();context.stroke();//设置渐变色 径向渐变var grd=context.createRadialGradient(15+j*30+2,i*30+15-2,10,15+j*30+2,i*30+15-2,0);if(me){//白棋grd.addColorStop(0,"#d1d1d1");grd.addColorStop(1,"#f9f9f9");chessBorad[i][j]=1;}else{//黑棋grd.addColorStop(0,"#0a0a0a");grd.addColorStop(1,"#636767");chessBorad[i][j]=2;}context.fillStyle=grd;//设置填充色context.fill();}//画板的鼠标点击事件chess.onclick=function(e){var x=e.offsetX;var y=e.offsetY;var i=Math.floor(y/30);var j=Math.floor(x/30);if(chessBorad[i][j]==0){drawChess(i,j,me);//画棋子win(i,j,me);me=!me;}}//重新游戏restart.onclick=function(){clearChess();}//清空棋子function clearChess(){//当canvas的高度或者宽度重新设置时将清空画布chess.height=chess.height;drawChessBorad();	}

五、判断游戏是哪方赢了（核心代码）

之前在网上看的大部分代码的算法大都是遍历了整个棋盘，以此来判断是否有哪一方已经达到赢的条件。个人觉得此算法的性能不是特别好。

以下的代码算法思想是：达成赢得条件时，那五个连成一直线的棋子中必然有一个是最后下的。由此获取最后棋子的坐标，向八方分别计算各个方向与其相同颜色的棋子个数。

统计好以上八个方向上（除了最后一个棋子）与最后一个棋子相同颜色的棋子，并且在遇到另一种颜色棋子时就不再进行统计，一个方向上最多统计4个棋子。

最后判断以下四个方向是否存在五个相同颜色的棋子（颜色为最后一个棋子的颜色），存在则达到了赢的条件，游戏结束。

代码的实现：

//判断赢的方法function win(i,j,me){//i纵坐标,j横坐标var count=[0,0,0,0,0,0,0,0];var state=[1,1,1,1,1,1,1,1];//遇到相同颜色值为1var color=1;if(me){color=1;}else{color=2;}for(var step=1;step<5;step++){if(state[0]==1&&i-step>=0&&j-step>=0){if(chessBorad[i-step][j-step]==color){count[0]++;}else{state[0]=2;}//遇到相异的颜色或者没有棋子}if(state[1]==1&&i-step>=0){if(chessBorad[i-step][j]==color){count[1]++;}else{state[1]=2;}}if(state[2]==1&&i-step>=0&&j+step<15){if(chessBorad[i-step][j+step]==color){count[2]++;}else{state[2]=2;}}if(state[3]==1&&j+step<15){if(chessBorad[i][j+step]==color){count[3]++;}else{state[3]=2;}}if(state[4]==1&&i+step<15&&j+step<15){if(chessBorad[i+step][j+step]==color){count[4]++;}else{state[4]=2;}}if(state[5]==1&&i+step<15){if(chessBorad[i+step][j]==color){count[5]++;}else{state[5]=2;}}if(state[6]==1&&i+step<15&&j-step>=0){if(chessBorad[i+step][j-step]==color){count[6]++;}else{state[6]=2;}}if(state[7]==1&&j-step>=0){if(chessBorad[i][j-step]==color){count[7]++;}else{state[7]=2;}}}if((count[0]+count[4]+1)>=5||(count[1]+count[5]+1)>=5||(count[2]+count[6]+1)>=5||(count[3]+count[7]+1)>=5){if(me){alert("白棋赢了");}else{alert("黑棋赢了");}}}

 

本文标签： 五子棋游戏源码和核心算法的讲解（简易五子棋web版）

版权声明：本文标题：五子棋游戏源码和核心算法的讲解（简易五子棋web版） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687416745a100168.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。