Javascript和HTML5用画布搭建Web五子棋游戏的实现算法

这只是一个简单的JAVAscript和HTML5小程序，并没有实现人机对战。五子棋棋盘落点对应的二维数组。数组的元素对应于子点。例如，数组元素值0表示在其对应的棋子处没有棋子，数组元素值1表示在其对应的棋子处有白色棋子，数组元素值2表示在其对应的棋子处有黑色棋子。五子棋决胜算法是通过对五子棋棋盘落点对应的二维数组进行运算来实现的。判断五子棋胜局算法下面的功能可以实现判断五子棋胜局的算法，也可以按照教材中对应的算法来实现。函数的参数xx.yy为数组下标，象棋数组实现五子棋棋盘落点的数据结构映射。该算法的思想是：以当前落点对应的下标为基点，围绕其进行八个方向的搜索，如果有5个子连接的同色则返回1或2，否则返回0。1表示白棋赢，2表示黑棋赢。0表示没有赢棋的数据结构状态。

复制代码代码如下：DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' body { margin 3360 10px；}/样式脚本类型=' text/JavaScript ' var画布；定义变量上下文；var isWhite=true//设置是否该轮到白棋var isWell=false//设置该局棋盘是否赢了，如果赢了就不能再走了var img _ b=new Image()；img _ b . src=' images/b . png '；//白棋图片var img _ w=new Image()；img _ w . src=' images/w . png '；//黑棋图片var chessData=新数组(15);//这个为棋盘的二维数组用来保存棋盘信息，初始化0为没有走过的，1为白棋走的，2为黑棋走的for(var x=0；x15x ) { chessData[x]=新数组(15);for(var y=0；y15y){象棋数据[x][y]=0；} }函数drawRect() {//页面加载完毕调用函数，初始化棋盘canvas=文档。getelementbyid(' canvas ')；上下文=画布。get context(' 2d ')；for(var I=0；i=640i=40) {//绘制棋盘的线语境。begin path()；context.moveTo(0，I)；context.lineTo(640，I)；语境。close path()；语境。笔画()；语境。begin path()；context.moveTo(i，0)；context.lineTo(i，640)；语境。close path()；语境。笔画()；} }功能播放(e) {//鼠标点击时发生var x=ParSeint((e . client x-20)/40)；//计算鼠标点击的区域，如果点击了(65,65),那么就是点击了(1,1)的位置var y=ParSeint((e . client y-20)/40)；if (chessData[x][y]！=0) {//判断该位置是否被下过了警报('你不能在这个位置下棋');返回；} if(isWhite){ isWhite=false；drawChess(1，x，y)；} else { isWhite=truedrawChess(2，x，y)；} }函数drawChess(国际象棋，x，y) {//参数为，棋(1为白棋，2为黑棋),数组位置if (isWell==true) { alert('已经结束了，如果需要重新玩，请刷新');返回；} if(x=0 x 15y=0y 15){ if(chess==1){ context。绘制图像(img _ w，x * 40 20，y * 40 20)；//绘制白棋象棋数据[x][y]=1；} else { context.drawImage(img_b，x * 40 20，y * 40 20)；象棋数据[x][y]=2；}判官(x，y，象棋);} }函数判断(x，y，象棋){//判断该局棋盘是否赢了var计数1=0；var计数2=0；var计数3=0；var计数4=0；//左右判断for(var I=x；I=0；i - ) { if (chessData [y]！=象棋){ break } count 1 } for(var I=x 1；I 15i){ if(ChesStata[y]！=象棋){ break} count1} //上下判断for(var I=y；I=0；I-){ if(chesdata[x]！=象棋){ break } count 2 } for(var I=y ^ 1；I 15i){ if(ChesStata[x]！=象棋){ break} count2} //左上右下判断for (var i=x，j=y；i=0，j=0；i -，j - ) { if (chessData [j]！=象棋){ break} count3} for (var i=x 1，j=y 1；i 15，j 15I，j){ if(chesdata[j]！=象棋){ break} count3} //右上左下判断for (var i=x，j=y；i=0，j=15i -，j){ if(chesdata[j]！=象棋){ break} count4} for (var i=x 1，j=y-1；i 15，j=0；I，j - ) { if (chessData [j]！=象棋){ break } count 4 } if(count 1=5 | | count 2=5 | | count 3=5 | | count 4=5){ if(chess==1){ alert('白棋赢了');} else { alert('黑棋赢了');} isWell=true//设置该局棋盘已经赢了，不可以再走了} }/script/head body on load=' draw rect()' div canvas width=' 640 ' id=' canvas ' on mouse down=' play(event)' height=' 640 '你的浏览器不支持HTML5画布，请使用谷歌浏览器浏览器打开/画布/div/正文/html