纯JS五子棋（各浏览器兼容）
来源：互联网 发布：如何加盟菜鸟网络 编辑：程序博客网 时间：2024/05/21 21:48
纯JS五子棋（各浏览器兼容）
效果图：
代码下载：http://download.csdn.net/detail/guoxuepeng123/5293751
【纯JS扫雷游戏】：http://blog.csdn.net/guoxuepeng123/article/details/8848003
【纯JS坦克大战游戏】：http://blog.csdn.net/guoxuepeng123/article/details/8858985
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.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>- 纯JS五子棋（各浏览器兼容）
- 纯JS扫雷游戏（各浏览器兼容）
- 纯JS坦克大战（各浏览器兼容）
- js 导出excle之终极攻略（兼容各大浏览器），纯JS实现
- 纯js实现五子棋
- 纯JS(JavaScript)实现拖拽效果，兼容各大浏览器
- 不用JS实现显示隐藏效果（兼容各浏览器）
- js实现表格排序（兼容各浏览器）
- JS获取回车事件（兼容各浏览器）
- JS获取回车事件（兼容各浏览器）
- JS获取回车事件（兼容各浏览器）
- css兼容，js浏览器兼容
- js 复制网页内容，兼容各浏览器
- js操作select各浏览器兼容
- js 复制网页内容，兼容各浏览器
- JS阻止事件冒泡兼容各浏览器
- JS读取XML文件（兼容浏览器）
- JS读取XML文件（兼容浏览器）
- 对文件列表List<File>按名称排序
- NTFS vs FAT vs exFAT
- 在linux(ubuntu11.10)下goagent实现开机自动加载运行
- 学习笔记_uml_状态图
- 程序人生--2009年(53)
- 纯JS五子棋（各浏览器兼容）
- 常用工具合集，保留下来 自己需要的时候方便查找^_^
- hdu 2215(最小覆盖圆)
- Jquery来对form表单提交（mvc方案）
- 自己开发的web快速开发平台教程(3)，工具条(Toolbar)的使用教程
- 二进制、八进制、十进制、十六进制之间转换
- 孙子问题（同余定理）
- linux下进程通信方式
- STM 32 IIC自写驱动程序
