五子棋js
http://www.jb51.net/article/35993.htm
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/reset.css"> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/CookieHandle.js"></script> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/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.cn/uploads/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.cn/uploads/rs/102/r2dy3tyw/black.png) no-repeat 4px 4px; } div.chessboard div.white { background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/white.png) no-repeat 4px 4px; } div.chessboard div.hover { background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover.png) no-repeat 1px 1px; } div.chessboard div.hover-up { background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_up.png) no-repeat 1px 1px; } div.chessboard div.hover-down { background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_down.png) no-repeat 1px 1px; } div.chessboard div.hover-up-left { background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_up_left.png) no-repeat 1px 1px; } div.chessboard div.hover-up-right { background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_up_right.png) no-repeat 1px 1px; } div.chessboard div.hover-left { background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_left.png) no-repeat 1px 1px; } div.chessboard div.hover-right { background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_right.png) no-repeat 1px 1px; } div.chessboard div.hover-down-left { background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_down_left.png) no-repeat 1px 1px; } div.chessboard div.hover-down-right { background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_down_right.png) no-repeat 1px 1px; } div.chessboard div.white-last { background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/white_last.png) no-repeat 4px 4px; } div.chessboard div.black-last { background: url(http://sandbox.runjs.cn/uploads/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.cn/uploads/rs/102/r2dy3tyw/black.png" alt="preload" /> <img src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/white.png" alt="preload" /> <img src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover.png" alt="preload" /> <img src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_up.png" alt="preload" /> <img src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_down.png" alt="preload" /> <img src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_up_left.png" alt="preload" /> <img src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_up_right.png" alt="preload" /> <img src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_left.png" alt="preload" /> <img src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_right.png" alt="preload" /> <img src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_down_left.png" alt="preload" /> <img src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_down_right.png" alt="preload" /> <img src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/black_last.png" alt="preload" /> <img src="http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/white_last.png" alt="preload" /> </div> </div> </body> </html>
