背景介绍

　　因为之前用c#的winform中的gdi+，java图形包做过五子棋，所以做这个逻辑思路也就驾轻就熟，然而最近想温故html5的canvas绘图功能（公司一般不用这些），所以做了个五子棋，当然没参考之前的客户端代码，只用使用之前计算输赢判断算法和电脑AI（网络借取）的算法，当然现在html5做的五子棋百度一下非常多，但是自己实现一边总归是好事情，好了废话不多说了进入正题。^_^

界面功能介绍与后续可增加功能

 目前界面功能：

　　主界面包含

　　　　1：人人、人机对战选项 2：棋子外观选择 3：棋盘背景选择 4：棋盘线条颜色选择

　　游戏界面包含

　　　　1：玩家名称 2：玩家棋子 3：当前由谁下棋背景定位 4：玩家比分 5：功能菜单区域（重新开始和无限悔棋） 6：棋盘区域 7.胜利后连环棋子连接 8.最后下棋位置闪烁显示 9.光标定位

　　游戏结束界面

　　　　1：胜利背景图 2：胜利玩家姓名 3：继续下一把按钮

 可增加功能

　　1.返回主界面 2.保存棋局和相关数据 3.读取棋局和相关数据 4.交换角色 5.网络对战（2台机器）6.双方思考总时间记录

演示地址

   (注意：没有加棋子图片下载提示，如果使用仿真棋子，出现下棋为空，请等待棋子图片下载完毕)

界面截图赏析（没花时间美化，比较丑）

整体设计和主代码介绍

整体设计

　　下棋流程：玩家or电脑AI下棋 ---> 绘制棋子 ---> 设定棋子二维坐标值 ----> logic（逻辑判断） ----> （玩家）一方五子连环 ---> 获胜界面
　　　　　　↑　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　|
　　　　　　|　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
　　　　　　<--------------------------------------------------------------------------------------------没有五子

　　悔棋流程(人人对战)：一方玩家悔棋 ----> 弹出下棋记录堆栈并设定为它是最后一枚棋 ---> 清除最后一枚棋子图像 ---> 清除棋子二维坐标值---> 重新定位显示最后下棋位置并闪烁

　　悔棋流程(人机对战)：玩方悔棋 ----> 弹出下棋记录堆栈2次，设定上一次电脑为最后一枚棋 ---> 清除弹出的2次记录图像 ---> 清除棋子2个棋子二维坐标值---> 重新定位显示最后下棋位置并闪烁

主代码介绍

 　　主代码分为二块： 1.界面逻辑块  2.游戏主体块 （界面与游戏代码分离，逻辑清晰，分工明确）

模拟事件通知：游戏主体逻辑块，每次结果都会通知到界面层来进行交互（类似于c#或者java的委托或事件）

界面逻辑代码

1 <script type="text/javascript"> 2 var gb = null; 3 var infoboj = document.getElementsByClassName("info")[0]; 4 var pl1obj = document.getElementById("pl1"); 5 var pl2obj = document.getElementById("pl2"); 6 var plname1obj = document.getElementById("plname1"); 7 var plname2obj = document.getElementById("plname2"); 8 var chesstypeobj = document.getElementsByName("chesstype"); 9 var chesscolorobj = document.getElementsByName("chesscolor"); 10 var chessbgObj = document.getElementsByName("chessbg"); 11 var winerpnl = document.getElementById("winer"); 12 document.getElementById("startgame").addEventListener("click", function() { initParams() { 15 var chessTypeValue = 1; 16 if (chesstypeobj.length > 0) { 17 for (var i = 0; i < chesstypeobj.length; i++) { 18 if (chesstypeobj[i].checked) { 19 chessTypeValue = chesstypeobj[i].value; 20 break; 21 } 22 } 23 } 24 var linevalue = ""; 25 if (chesscolorobj.length > 0) { 26 for (var i = 0; i < chesscolorobj.length; i++) { 27 if (chesscolorobj[i].checked) { 28 linevalue = chesscolorobj[i].value; 29 break; 30 } 31 } 32 } 33 var bcorimgvalue = ""; 34 if (chessbgObj.length > 0) { 35 for (var i = 0; i < chessbgObj.length; i++) { 36 if (chessbgObj[i].checked) { 37 bcorimgvalue = chessbgObj[i].value; 38 break; 39 } 40 } 41 } 42 return { 43 lineColor: linevalue, playAName: plname1Input.value, 46 playBName: plname2Input.value, 47 backColorORImg: bcorimgvalue, 48 playAImg: "http://sandbox.runjs.cn/uploads/rs/62/nbqodq5i/playA.png", 49 playBImg: "http://sandbox.runjs.cn/uploads/rs/62/nbqodq5i/playB.png", 50 playerBIsComputer:openComputer.checked 51 }; 52 } 53 document.getElementById("cc").style.display = "block"; 54 gb = new gobang(initParams()); 55 /** 56 * 设置一些界面信息 57 * @param {Object} opt gb.info = function(opt) { 60 infoboj.style.visibility = "visible"; 61 document.getElementsByClassName("startpnl")[0].style.visibility = "hidden"; 62 plname1obj.innerHTML = opt.playAName; 63 plname2obj.innerHTML = opt.playBName; 64 if (opt.chessType == 1) { 65 var span1 = document.createElement("span"); 66 pl1obj.insertBefore(span1, plname1obj); 67 var span2 = document.createElement("span"); 68 pl2obj.insertBefore(span2, plname2obj); 69 } else { 70 var img1 = document.createElement("img"); 71 img1.src = opt.playAImg; 72 pl1obj.insertBefore(img1, plname1obj); 73 var img2 = document.createElement("img"); 74 img2.src = opt.playBImg; 75 pl2obj.insertBefore(img2, plname2obj); 76 } 77 } 78 /** 79 * 每次下棋后触发事件 80 * @param {Object} c2d gb.operate = function(opt, c2d) { 83 if (!c2d.winer || c2d.winer <= 0) { 84 pl1obj.removeAttribute("class", "curr"); 85 pl2obj.removeAttribute("class", "curr"); 86 if (c2d.player == 1) { 87 pl2obj.setAttribute("class", "curr"); 88 } else { 89 pl1obj.setAttribute("class", "curr"); 90 } 91 document.getElementById("backChessman").innerHTML="悔棋("+c2d.canBackTimes+")"; 92 } else { 93 var winname = c2d.winer == 1 ? opt.playAName : opt.playBName; 94 var str = "恭喜，【" + winname + "】赢了！" 95 alert(str); 96 winerpnl.style.display = "block"; 97 document.getElementById("winerName").innerHTML = "恭喜，【" + winname + "】赢了！"; 98 document.getElementById("pl" + c2d.winer).style.backgroundColor = "pink"; 99 document.getElementById("scoreA").innerHTML = c2d.playScoreA; 100 document.getElementById("scoreB").innerHTML = c2d.playScoreB; 101 } 102 } 103 gb.start(); 104 }); 105 106 document.getElementById("openComputer").addEventListener("change", function() { 107 if (this.checked) { 108 plname2Input.value = "电脑"; 109 plname2Input.disabled = "disabled"; 110 } else { 111 plname2Input.value = "玩家二"; 112 plname2Input.disabled = ""; 113 } 114 }); restartgui() { 120 if (gb) { 121 winerpnl.style.display = "none"; 122 pl1obj.removeAttribute("class", "curr"); 123 pl2obj.removeAttribute("class", "curr"); 124 document.getElementById("pl1").style.backgroundColor = ""; 125 document.getElementById("pl2").style.backgroundColor = ""; 126 gb.restart(); 127 } 128 }; 129 </script>

游戏主体代码块（只包含函数声明代码）