人生本是一个不断学习的过程，在这个过程中，图老师就是你们的好帮手，下面分享的纯JS五子棋（各浏览器兼容）懂设计的网友们快点来了解吧！
【 tulaoshi.com - Web开发 】
纯JS五子棋（各浏览器兼容）
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）效果图：
HTML代码!DOCTYPE html html head meta http-equiv="Content-Type" content="text/html;" title五子棋/title link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/reset.css" script type="text/javascript" src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/CookieHandle.js"/script script type="text/javascript" src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/jquery-1.7.2.js"/script style .wrapper { width: 600px; position: relative; } /* 棋盘 */ div.chessboard { margin: 30px 0 0 50px; width: 542px; background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/chessboard.png) no-repeat 14px 14px rgb(250, 250, 250); overflow: hidden; box-shadow: 2px 2px 8px #888; -webkit-box-shadow: 2px 2px 8px #888; -moz-box-shadow: 2px 2px 8px #888; } div.chessboard div { float: left; width: 36px; height: 36px; border-top: 0px solid #ccc; border-left: 0px solid #ccc; border-right: 0; border-bottom: 0; cursor: pointer; } /* 棋子 */ div.chessboard div.black { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/black.png) no-repeat 4px 4px; } div.chessboard div.white { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/white.png) no-repeat 4px 4px; } div.chessboard div.hover { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover.png) no-repeat 1px 1px; } div.chessboard div.hover-up { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_up.png) no-repeat 1px 1px; } div.chessboard div.hover-down { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_down.png) no-repeat 1px 1px; } div.chessboard div.hover-up-left { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_up_left.png) no-repeat 1px 1px; } div.chessboard div.hover-up-right { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_up_right.png) no-repeat 1px 1px; } div.chessboard div.hover-left { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_left.png) no-repeat 1px 1px; } div.chessboard div.hover-right { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_right.png) no-repeat 1px 1px; } div.chessboard div.hover-down-left { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_down_left.png) no-repeat 1px 1px; } div.chessboard div.hover-down-right { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_down_right.png) no-repeat 1px 1px; } div.chessboard div.white-last { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/white_last.png) no-repeat 4px 4px; } div.chessboard div.black-last { background: url(http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/black_last.png) no-repeat 4px 4px; } /* 右侧 */ div.operating-panel { position: absolute; left: 610px; top: 150px; width: 200px; text-align: center; } .operating-panel a { display: inline-block; padding: 10px 15px; margin-bottom: 39px; margin-right: 8px; margin-left: 8px; background: rgb(100, 167, 233); text-decoration: none; color: #333; font-weight: bold; font-size: 16px; font-family: "微软雅黑", "宋体"; } .operating-panel a:hover { background: rgb(48, 148, 247); text-decoration: none; } .operating-panel a.disable, .operating-panel a.disable:hover { cursor: default; background: rgb(197, 203, 209); color: rgb(130, 139, 148); } .operating-panel a.selected { border: 5px solid #F3C242; padding: 5px 10px; } #result_tips { color: #CE4242; font-size: 26px; font-family: "微软雅黑"; } #result_info { margin-bottom: 26px; } /style script $(document).ready(function() { fiveChess.init(); }); var fiveChess = { NO_CHESS: 0, BLACK_CHESS: -1, WHITE_CHESS: 1, chessArr: [], //记录棋子 chessBoardHtml: "", humanPlayer: "black",//玩家棋子颜色 AIPlayer: "white",//AI棋子颜色 isPlayerTurn: true, //轮到player下棋 totalGames: cookieHandle.getCookie("totalGames") || 0,//总局数 winGames: cookieHandle.getCookie("winGames") || 0,//玩家赢局数 isGameStart: false,//游戏已经开始 isGameOver: false, //游戏结束 playerLastChess: [], //玩家最后下子位置 AILastChess: [], //AI最后下子位置 init: function () { this.chessBoardHtml = $("div.chessboard").html(); var _fiveChess = this; //右侧操作按钮 $(".operating-panel a").click(function (event) { event.preventDefault(); var id = $(this).attr("id"); if (_fiveChess.isGameStart && id !== "replay_btn" ) { return; }//正在游戏 不操作 switch (id) { case "black_btn": _fiveChess.humanPlayer = "black"; _fiveChess.AIPlayer = "white"; break; case "white_btn": _fiveChess.humanPlayer = "white"; _fiveChess.AIPlayer = "black"; break; case "first_move_btn": _fiveChess.isPlayerTurn = true; break; case "second_move_btn": _fiveChess.isPlayerTurn = false; break; case "replay_btn": _fiveChess.resetChessBoard(); if (_fiveChess.isGameStart) {//点重玩 _fiveChess.gameOver(); } else { //点开始 _fiveChess.gameStart(); } break; } if (id !== "replay_btn") { $(this).addClass("selected").siblings().removeClass("selected"); } }); this.resetChessBoard(); $("#result_info").html("胜率：" + (this.winGames * 100 / this.totalGames | 0) + "%"); }, //重置棋盘 resetChessBoard: function () { $("div.chessboard").html(this.chessBoardHtml); $("#result_tips").html(""); this.isGameOver = false; this.isPlayerTurn = $("#first_move_btn").hasClass("selected"); //初始化棋子状态 var i, j; for (i = 0; i 15; i++) { this.chessArr[i] = []; for (j = 0; j 15; j++) { this.chessArr[i][j] = this.NO_CHESS; } } //player下棋事件 var _fiveChess = this; $("div.chessboard div").click(function () { if (!_fiveChess.isPlayerTurn || _fiveChess.isGameOver) { return; } if (!_fiveChess.isGameStart) { _fiveChess.gameStart(); } var index = $(this).index(), i = index / 15 | 0, j = index % 15; if (_fiveChess.chessArr[i][j] === _fiveChess.NO_CHESS) { _fiveChess.playChess(i, j, _fiveChess.humanPlayer); if (i === 0 && j === 0) { $(this).removeClass("hover-up-left"); } else if (i === 0 && j === 14) { $(this).removeClass("hover-up-right"); } else if (i === 14 && j === 0) { $(this).removeClass("hover-down-left"); } else if (i === 14 && j === 14) { $(this).removeClass("hover-down-right"); } else if (i === 0) { $(this).removeClass("hover-up"); } else if (i === 14) { $(this).removeClass("hover-down"); } else if (j === 0) { $(this).removeClass("hover-left"); } else if (j === 14) { $(this).removeClass("hover-right"); } else { $(this).removeClass("hover"); } _fiveChess.playerLastChess = [i, j]; _fiveChess.playerWinOrNot(i, j); } }); //鼠标在棋盘上移动效果 $("div.chessboard div").hover( function () { if (!_fiveChess.isPlayerTurn || _fiveChess.isGameOver) { return; } var index = $(this).index(), i = index / 15 | 0, j = index % 15; if (_fiveChess.chessArr[i][j] === _fiveChess.NO_CHESS) { if (i === 0 && j === 0) { $(this).addClass("hover-up-left"); } else if (i === 0 && j === 14) { $(this).addClass("hover-up-right"); } else if (i === 14 && j === 0) { $(this).addClass("hover-down-left"); } else if (i === 14 && j === 14) { $(this).addClass("hover-down-right"); } else if (i === 0) { $(this).addClass("hover-up"); } else if (i === 14) { $(this).addClass("hover-down"); } else if (j === 0) { $(this).addClass("hover-left"); } else if (j === 14) { $(this).addClass("hover-right"); } else { $(this).addClass("hover"); } } }, function () { if (!_fiveChess.isPlayerTurn || _fiveChess.isGameOver) { return; } var index = $(this).index(), i = index / 15 | 0, j = index % 15; if (i === 0 && j === 0) { $(this).removeClass("hover-up-left"); } else if (i === 0 && j === 14) { $(this).removeClass("hover-up-right"); } else if (i === 14 && j === 0) { $(this).removeClass("hover-down-left"); } else if (i === 14 && j === 14) { $(this).removeClass("hover-down-right"); } else if (i === 0) { $(this).removeClass("hover-up"); } else if (i === 14) { $(this).removeClass("hover-down"); } else if (j === 0) { $(this).removeClass("hover-left"); } else if (j === 14) { $(this).removeClass("hover-right"); } else { $(this).removeClass("hover"); } } ); }, gameStart: function () { this.totalGames++; cookieHandle.setCookie({ name: "totalGames", value: this.totalGames, expiresHours: 365 * 24 }); //AI先手 if (!this.isPlayerTurn) { this.AImoveChess(); } this.isGameStart = true; $(".operating-panel p a").addClass("disable"); $("#replay_btn").html("重玩"); }, gameOver: function () { this.isGameStart = false; $(".operating-panel a").removeClass("disable"); $("#replay_btn").html("开始"); $("#result_info").html("胜率：" + (this.winGames * 100 / this.totalGames | 0) + "%"); }, //下棋 i行，j列，color颜色 playChess: function (i, j, color) { this.chessArr[i][j] = color === "black" ？ this.BLACK_CHESS : this.WHITE_CHESS; if (color === this.AIPlayer) { $("div.chessboard div." + color + "-last").addClass(color).removeClass(color + "-last"); $("div.chessboard div:eq(" + (i * 15 + j) + ")").addClass(color + "-last"); } else { $("div.chessboard div:eq(" + (i * 15 + j) + ")").addClass(color); } }, //玩家是否取胜 playerWinOrNot: function (i, j) { var nums = 1, //连续棋子个数 chessColor = this.humanPlayer === "black" ？ this.BLACK_CHESS : this.WHITE_CHESS, m, n; //x方向 for (m = j - 1; m = 0; m--) { if (this.chessArr[i][m] === chessColor) { nums++; } else { break; } } for (m = j + 1; m 15; m++) { if (this.chessArr[i][m] === chessColor) { nums++; } else { break; } } if (nums = 5) { this.playerWin(); return; } else { nums = 1; } //y方向 for (m = i - 1; m = 0; m--) { if (this.chessArr[m][j] === chessColor) { nums++; } else { break; } } for (m = i + 1; m 15; m++) { if (this.chessArr[m][j] === chessColor) { nums++; } else { break; } } if (nums = 5) { this.playerWin(); return; } else { nums = 1; } //左斜方向 for (m = i - 1, n = j - 1; m = 0 && n = 0; m--, n--) { if (this.chessArr[m][n] === chessColor) { nums++; } else { break; } } for (m = i + 1, n = j + 1; m 15 && n 15; m++, n++) { if (this.chessArr[m][n] === chessColor) { nums++; } else { break; } } if (nums = 5) { this.playerWin(); return; } else { nums = 1; } //右斜方向 for (m = i - 1, n = j + 1; m = 0 && n 15; m--, n++) { if (this.chessArr[m][n] === chessColor) { nums++; } else { break; } } for (m = i + 1, n = j - 1; m 15 && n = 0; m++, n--) { if (this.chessArr[m][n] === chessColor) { nums++; } else { break; } } if (nums = 5) { this.playerWin(); return; } this.AImoveChess(); }, playerWin: function () { this.winGames++; cookieHandle.setCookie({ name: "winGames", value: this.winGames, expiresHours: 365 * 24 }); this.showResult(true); this.gameOver(); }, //AI下棋 AImoveChess: function () { this.isPlayerTurn = false; var maxX = 0, maxY = 0, maxWeight = 0, i, j, tem; for (i = 14; i = 0; i--) { for (j = 14; j = 0; j--) { if (this.chessArr[i][j] !== this.NO_CHESS) { continue; } tem = this.computeWeight(i, j); if (tem maxWeight) { maxWeight = tem; maxX = i; maxY = j; } } } this.playChess(maxX, maxY, this.AIPlayer); this.AILastChess = [maxX, maxY]; if ((maxWeight = 100000 && maxWeight 250000) || (maxWeight = 500000)) { this.showResult(false); this.gameOver(); } else { this.isPlayerTurn = true; } }, showResult: function(isPlayerWin) { if (isPlayerWin) { $("#result_tips").html("恭喜你获胜！"); } else { $("#result_tips").html("哈哈，你输咯！"); } this.isGameOver = true; this.showWinChesses(isPlayerWin); }, //标记显示获胜棋子 showWinChesses: function (isPlayerWin) { var nums = 1, //连续棋子个数 lineChess = [],//连续棋子位置 i, j, chessColor, m, n; if (isPlayerWin) { chessColor = this.humanPlayer === "black" ？ this.BLACK_CHESS : this.WHITE_CHESS; i = this.playerLastChess[0]; j = this.playerLastChess[1]; } else { chessColor = this.AIPlayer === "black" ？ this.BLACK_CHESS : this.WHITE_CHESS; i = this.AILastChess[0]; j = this.AILastChess[1]; } $("div.chessboard div." + this.AIPlayer + "-last").addClass(this.AIPlayer).removeClass(this.AIPlayer + "-last"); //x方向 lineChess[0] = [i]; lineChess[1] = [j]; for (m = j - 1; m = 0; m--) { if (this.chessArr[i][m] === chessColor) { lineChess[0][nums] = i; lineChess[1][nums] = m; nums++; } else { break; } } for (m = j + 1; m 15; m++) { if (this.chessArr[i][m] === chessColor) { lineChess[0][nums] = i; lineChess[1][nums] = m; nums++; } else { break; } } if (nums = 5) { for (k = nums - 1; k = 0; k--) { this.markChess(lineChess[0][k] * 15 + lineChess[1][k], isPlayerWin ？ this.humanPlayer : this.AIPlayer); } return; } //y方向 nums = 1; lineChess[0] = [i]; lineChess[1] = [j]; for (m = i - 1; m = 0; m--) { if (this.chessArr[m][j] === chessColor) { lineChess[0][nums] = m; lineChess[1][nums] = j; nums++; } else { break; } } for (m = i + 1; m 15; m++) { if (this.chessArr[m][j] === chessColor) { lineChess[0][nums] = m; lineChess[1][nums] = j; nums++; } else { break; } } if (nums = 5) { for (k = nums - 1; k = 0; k--) { this.markChess(lineChess[0][k] * 15 + lineChess[1][k], isPlayerWin ？ this.humanPlayer : this.AIPlayer); } return; } //左斜方向 nums = 1; lineChess[0] = [i]; lineChess[1] = [j]; for (m = i - 1, n = j - 1; m = 0 && n = 0; m--, n--) { if (this.chessArr[m][n] === chessColor) { lineChess[0][nums] = m; lineChess[1][nums] = n; nums++; } else { break; } } for (m = i + 1, n = j + 1; m 15 && n 15; m++, n++) { if (this.chessArr[m][n] === chessColor) { lineChess[0][nums] = m; lineChess[1][nums] = n; nums++; } else { break; } } if (nums = 5) { for (k = nums - 1; k = 0; k--) { this.markChess(lineChess[0][k] * 15 + lineChess[1][k], isPlayerWin ？ this.humanPlayer : this.AIPlayer); } return; } //右斜方向 nums = 1; lineChess[0] = [i]; lineChess[1] = [j]; for (m = i - 1, n = j + 1; m = 0 && n 15; m--, n++) { if (this.chessArr[m][n] === chessColor) { lineChess[0][nums] = m; lineChess[1][nums] = n; nums++; } else { break; } } for (m = i + 1, n = j - 1; m 15 && n = 0; m++, n--) { if (this.chessArr[m][n] === chessColor) { lineChess[0][nums] = m; lineChess[1][nums] = n; nums++; } else { break; } } if (nums = 5) { for (k = nums - 1; k = 0; k--) { this.markChess(lineChess[0][k] * 15 + lineChess[1][k], isPlayerWin ？ this.humanPlayer : this.AIPlayer); } } }, markChess: function (pos, color) { $("div.chessboard div:eq(" + pos + ")").removeClass(color).addClass(color + "-last"); }, //下子到i，j X方向 结果: 多少连子 两边是否截断 putDirectX: function (i, j, chessColor) { var m, n, nums = 1, side1 = false, side2 = false; for (m = j - 1; m = 0; m--) { if (this.chessArr[i][m] === chessColor) { nums++; } else { if (this.chessArr[i][m] === this.NO_CHESS) { side1 = true; } break; } } for (m = j + 1; m 15; m++) { if (this.chessArr[i][m] === chessColor) { nums++; } else { if (this.chessArr[i][m] === this.NO_CHESS) { side2 = true; } break; } } return {"nums": nums, "side1": side1, "side2": side2}; }, //下子到i，j Y方向 结果 putDirectY: function (i, j, chessColor) { var m, n, nums = 1, side1 = false, side2 = false; for (m = i - 1; m = 0; m--) { if (this.chessArr[m][j] === chessColor) { nums++; } else { if (this.chessArr[m][j] === this.NO_CHESS) { side1 = true; } break; } } for (m = i + 1; m 15; m++) { if (this.chessArr[m][j] === chessColor) { nums++; } else { if (this.chessArr[m][j] === this.NO_CHESS) { side2 = true; } break; } } return {"nums": nums, "side1": side1, "side2": side2}; }, //下子到i，j XY方向 结果 putDirectXY: function (i, j, chessColor) { var m, n, nums = 1, side1 = false, side2 = false; for (m = i - 1, n = j - 1; m = 0 && n = 0; m--, n--) { if (this.chessArr[m][n] === chessColor) { nums++; } else { if (this.chessArr[m][n] === this.NO_CHESS) { side1 = true; } break; } } for (m = i + 1, n = j + 1; m 15 && n 15; m++, n++) { if (this.chessArr[m][n] === chessColor) { nums++; } else { if (this.chessArr[m][n] === this.NO_CHESS) { side2 = true; } break; } } return {"nums": nums, "side1": side1, "side2": side2}; }, putDirectYX: function (i, j, chessColor) { var m, n, nums = 1, side1 = false, side2 = false; for (m = i - 1, n = j + 1; m = 0 && n 15; m--, n++) { if (this.chessArr[m][n] === chessColor) { nums++; } else { if (this.chessArr[m][n] === this.NO_CHESS) { side1 = true; } break; } } for (m = i + 1, n = j - 1; m 15 && n = 0; m++, n--) { if (this.chessArr[m][n] === chessColor) { nums++; } else { if (this.chessArr[m][n] === this.NO_CHESS) { side2 = true; } break; } } return {"nums": nums, "side1": side1, "side2": side2}; }, //计算下子至i,j的权重 computeWeight: function (i, j) { var weight = 14 - (Math.abs(i - 7) + Math.abs(j - 7)), //基于棋盘位置权重 pointInfo = {},//某点下子后连子信息 chessColor = this.AIPlayer === "black" ？ this.BLACK_CHESS : this.WHITE_CHESS; //x方向 pointInfo = this.putDirectX(i, j, chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI下子权重 pointInfo = this.putDirectX(i, j, -chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player下子权重 //y方向 pointInfo = this.putDirectY(i, j, chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI下子权重 pointInfo = this.putDirectY(i, j, -chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player下子权重 //左斜方向 pointInfo = this.putDirectXY(i, j, chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI下子权重 pointInfo = this.putDirectXY(i, j, -chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player下子权重 //右斜方向 pointInfo = this.putDirectYX(i, j, chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI下子权重 pointInfo = this.putDirectYX(i, j, -chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player下子权重 return weight; }, //权重方案 独：两边为空可下子，单：一边为空 weightStatus: function (nums, side1, side2, isAI) { var weight = 0; switch (nums) { case 1: if (side1 && side2) { weight = isAI ？ 15 : 10;//独一 } break; case 2: if (side1 && side2) { weight = isAI ？ 100 : 50;//独二 } else if (side1 || side2) { weight = isAI ？ 10 : 5;//单二 } break; case 3: if (side1 && side2) { weight = isAI ？ 500 : 200;//独三 } else if (side1 || side2) { weight = isAI ？ 30 : 20;//单三 } break; case 4: if (side1 && side2) { weight = isAI ？ 5000 : 2000;//独四 } else if (side1 || side2) { weight = isAI ？ 400 : 100;//单四 } break; case 5: weight = isAI ？ 100000 : 10000;//五 break; default: weight = isAI ？ 500000 : 250000; break; } return weight; } }; /script /head body div class="wrapper" div class="chessboard" !-- top line -- div class="chess-top"/div div class="chess-top"/div div class="chess-top"/div div class="chess-top"/div div class="chess-top"/div div class="chess-top"/div div class="chess-top"/div div class="chess-top"/div div class="chess-top"/div div class="chess-top"/div div class="chess-top"/div div class="chess-top"/div div class="chess-top"/div div class="chess-top"/div div class="chess-top chess-right"/div !-- line 1 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- line 2 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- line 3 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- line 4 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- line 5 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- line 6 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- line 7 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- line 8 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- line 9 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- line 10 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- line 11 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- line 12 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- line 13 -- div class="chess-left"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-middle"/div div class="chess-right"/div !-- bottom line -- div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom"/div div class="chess-bottom chess-right"/div /div div class="operating-panel" p a id="black_btn" class="btn selected" href="#"黑子/a a id="white_btn" class="btn" href="#"白子/a /p p a id="first_move_btn" class="btn selected" href="#"先手/a a id="second_move_btn" class="btn" href="#"后手/a /p a id="replay_btn" class="btn" href="#"开始/a p id="result_info"胜率：100%/p p id="result_tips"/p /div div style="display: none" !-- 图片需合并 减少http请求数 -- img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/black.png" alt="preload" / img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/white.png" alt="preload" / img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover.png" alt="preload" / img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_up.png" alt="preload" / img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_down.png" alt="preload" / img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_up_left.png" alt="preload" / img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_up_right.png" alt="preload" / img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_left.png" alt="preload" / img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_right.png" alt="preload" / img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_down_left.png" alt="preload" / img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/hover_down_right.png" alt="preload" / img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/black_last.png" alt="preload" / img src="http://sandbox.runjs.cnhttp://img.warting.com/rs/102/r2dy3tyw/white_last.png" alt="preload" / /div /div /body /html
来源:https://www.tulaoshi.com/n/20160219/1607217.html
看过《纯JS五子棋（各浏览器兼容）》的人还看了以下文章 更多>>
