纯JS实现五子棋游戏兼容各浏览器(附源码)_javascript技巧

纯JS五子棋（各浏览器兼容）
效果图：
 
代码下载
HTML代码

复制代码 代码如下:

<script> <BR>$(document).ready(function() { <BR>fiveChess.init(); <BR>}); <BR>var fiveChess = { <BR>NO_CHESS: 0, <BR>BLACK_CHESS: -1, <BR>WHITE_CHESS: 1, <BR>chessArr: [], //记录棋子 <BR>chessBoardHtml: "", <BR>humanPlayer: "black",//玩家棋子颜色 <BR>AIPlayer: "white",//AI棋子颜色 <BR>isPlayerTurn: true, //轮到player下棋 <BR>totalGames: cookieHandle.getCookie("totalGames") || 0,//总局数 <BR>winGames: cookieHandle.getCookie("winGames") || 0,//玩家赢局数 <BR>isGameStart: false,//游戏已经开始 <BR>isGameOver: false, //游戏结束 <BR>playerLastChess: [], //玩家最后下子位置 <BR>AILastChess: [], //AI最后下子位置 <BR>init: function () { <BR>this.chessBoardHtml = $("div.chessboard").html(); <BR>var _fiveChess = this; <BR>//右侧操作按钮 <BR>$(".operating-panel a").click(function (event) { <BR>event.preventDefault(); <BR>var id = $(this).attr("id"); <BR>if (_fiveChess.isGameStart && id !== "replay_btn" ) { return; }//正在游戏 不操作 <BR>switch (id) { <BR>case "black_btn": <BR>_fiveChess.humanPlayer = "black"; <BR>_fiveChess.AIPlayer = "white"; <BR>break; <BR>case "white_btn": <BR>_fiveChess.humanPlayer = "white"; <BR>_fiveChess.AIPlayer = "black"; <BR>break; <BR>case "first_move_btn": <BR>_fiveChess.isPlayerTurn = true; <BR>break; <BR>case "second_move_btn": <BR>_fiveChess.isPlayerTurn = false; <BR>break; <BR>case "replay_btn": <BR>_fiveChess.resetChessBoard(); <BR>if (_fiveChess.isGameStart) {//点重玩 <BR>_fiveChess.gameOver(); <BR>} <BR>else { //点开始 <BR>_fiveChess.gameStart(); <BR>} <BR>break; <BR>} <BR>if (id !== "replay_btn") { <BR>$(this).addClass("selected").siblings().removeClass("selected"); <BR>} <BR>}); <BR>this.resetChessBoard(); <BR>$("#result_info").html("胜率：" + (this.winGames * 100 / this.totalGames | 0) + "%"); <BR>}, <BR>//重置棋盘 <BR>resetChessBoard: function () { <BR>$("div.chessboard").html(this.chessBoardHtml); <BR>$("#result_tips").html(""); <BR>this.isGameOver = false; <BR>this.isPlayerTurn = $("#first_move_btn").hasClass("selected"); <BR>//初始化棋子状态 <BR>var i, j; <BR>for (i = 0; i < 15; i++) { <BR>this.chessArr[i] = []; <BR>for (j = 0; j < 15; j++) { <BR>this.chessArr[i][j] = this.NO_CHESS; <BR>} <BR>} <BR>//player下棋事件 <BR>var _fiveChess = this; <BR>$("div.chessboard div").click(function () { <BR>if (!_fiveChess.isPlayerTurn || _fiveChess.isGameOver) { <BR>return; <BR>} <BR>if (!_fiveChess.isGameStart) { <BR>_fiveChess.gameStart(); <BR>} <BR>var index = $(this).index(), <BR>i = index / 15 | 0, <BR>j = index % 15; <BR>if (_fiveChess.chessArr[i][j] === _fiveChess.NO_CHESS) { <BR>_fiveChess.playChess(i, j, _fiveChess.humanPlayer); <BR>if (i === 0 && j === 0) { <BR>$(this).removeClass("hover-up-left"); <BR>} <BR>else if (i === 0 && j === 14) { <BR>$(this).removeClass("hover-up-right"); <BR>} <BR>else if (i === 14 && j === 0) { <BR>$(this).removeClass("hover-down-left"); <BR>} <BR>else if (i === 14 && j === 14) { <BR>$(this).removeClass("hover-down-right"); <BR>} <BR>else if (i === 0) { <BR>$(this).removeClass("hover-up"); <BR>} <BR>else if (i === 14) { <BR>$(this).removeClass("hover-down"); <BR>} <BR>else if (j === 0) { <BR>$(this).removeClass("hover-left"); <BR>} <BR>else if (j === 14) { <BR>$(this).removeClass("hover-right"); <BR>} <BR>else { <BR>$(this).removeClass("hover"); <BR>} <BR>_fiveChess.playerLastChess = [i, j]; <BR>_fiveChess.playerWinOrNot(i, j); <BR>} <BR>}); <BR>//鼠标在棋盘上移动效果 <BR>$("div.chessboard div").hover( <BR>function () { <BR>if (!_fiveChess.isPlayerTurn || _fiveChess.isGameOver) { return; } <BR>var index = $(this).index(), <BR>i = index / 15 | 0, <BR>j = index % 15; <BR>if (_fiveChess.chessArr[i][j] === _fiveChess.NO_CHESS) { <BR>if (i === 0 && j === 0) { <BR>$(this).addClass("hover-up-left"); <BR>} <BR>else if (i === 0 && j === 14) { <BR>$(this).addClass("hover-up-right"); <BR>} <BR>else if (i === 14 && j === 0) { <BR>$(this).addClass("hover-down-left"); <BR>} <BR>else if (i === 14 && j === 14) { <BR>$(this).addClass("hover-down-right"); <BR>} <BR>else if (i === 0) { <BR>$(this).addClass("hover-up"); <BR>} <BR>else if (i === 14) { <BR>$(this).addClass("hover-down"); <BR>} <BR>else if (j === 0) { <BR>$(this).addClass("hover-left"); <BR>} <BR>else if (j === 14) { <BR>$(this).addClass("hover-right"); <BR>} <BR>else { <BR>$(this).addClass("hover"); <BR>} <BR>} <BR>}, <BR>function () { <BR>if (!_fiveChess.isPlayerTurn || _fiveChess.isGameOver) { return; } <BR>var index = $(this).index(), <BR>i = index / 15 | 0, <BR>j = index % 15; <BR>if (i === 0 && j === 0) { <BR>$(this).removeClass("hover-up-left"); <BR>} <BR>else if (i === 0 && j === 14) { <BR>$(this).removeClass("hover-up-right"); <BR>} <BR>else if (i === 14 && j === 0) { <BR>$(this).removeClass("hover-down-left"); <BR>} <BR>else if (i === 14 && j === 14) { <BR>$(this).removeClass("hover-down-right"); <BR>} <BR>else if (i === 0) { <BR>$(this).removeClass("hover-up"); <BR>} <BR>else if (i === 14) { <BR>$(this).removeClass("hover-down"); <BR>} <BR>else if (j === 0) { <BR>$(this).removeClass("hover-left"); <BR>} <BR>else if (j === 14) { <BR>$(this).removeClass("hover-right"); <BR>} <BR>else { <BR>$(this).removeClass("hover"); <BR>} <BR>} <BR>); <BR>}, <BR>gameStart: function () { <BR>this.totalGames++; <BR>cookieHandle.setCookie({ name: "totalGames", value: this.totalGames, expiresHours: 365 * 24 }); <BR>//AI先手 <BR>if (!this.isPlayerTurn) { <BR>this.AImoveChess(); <BR>} <BR>this.isGameStart = true; <BR>$(".operating-panel p a").addClass("disable"); <BR>$("#replay_btn").html("重玩"); <BR>}, <BR>gameOver: function () { <BR>this.isGameStart = false; <BR>$(".operating-panel a").removeClass("disable"); <BR>$("#replay_btn").html("开始"); <BR>$("#result_info").html("胜率：" + (this.winGames * 100 / this.totalGames | 0) + "%"); <BR>}, <BR>//下棋 i行，j列，color颜色 <BR>playChess: function (i, j, color) { <BR>this.chessArr[i][j] = color === "black" ? this.BLACK_CHESS : this.WHITE_CHESS; <BR>if (color === this.AIPlayer) { <BR>$("div.chessboard div." + color + "-last").addClass(color).removeClass(color + "-last"); <BR>$("div.chessboard div:eq(" + (i * 15 + j) + ")").addClass(color + "-last"); <BR>} <BR>else { <BR>$("div.chessboard div:eq(" + (i * 15 + j) + ")").addClass(color); <BR>} <BR>}, <BR>//玩家是否取胜 <BR>playerWinOrNot: function (i, j) { <BR>var nums = 1, //连续棋子个数 <BR>chessColor = this.humanPlayer === "black" ? this.BLACK_CHESS : this.WHITE_CHESS, <BR>m, n; <BR>//x方向 <BR>for (m = j - 1; m >= 0; m--) { <BR>if (this.chessArr[i][m] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>for (m = j + 1; m < 15; m++) { <BR>if (this.chessArr[i][m] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>if (nums >= 5) { <BR>this.playerWin(); <BR>return; <BR>} <BR>else { <BR>nums = 1; <BR>} <BR>//y方向 <BR>for (m = i - 1; m >= 0; m--) { <BR>if (this.chessArr[m][j] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>for (m = i + 1; m < 15; m++) { <BR>if (this.chessArr[m][j] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>if (nums >= 5) { <BR>this.playerWin(); <BR>return; <BR>} <BR>else { <BR>nums = 1; <BR>} <BR>//左斜方向 <BR>for (m = i - 1, n = j - 1; m >= 0 && n >= 0; m--, n--) { <BR>if (this.chessArr[m][n] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>for (m = i + 1, n = j + 1; m < 15 && n < 15; m++, n++) { <BR>if (this.chessArr[m][n] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>if (nums >= 5) { <BR>this.playerWin(); <BR>return; <BR>} <BR>else { <BR>nums = 1; <BR>} <BR>//右斜方向 <BR>for (m = i - 1, n = j + 1; m >= 0 && n < 15; m--, n++) { <BR>if (this.chessArr[m][n] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>for (m = i + 1, n = j - 1; m < 15 && n >= 0; m++, n--) { <BR>if (this.chessArr[m][n] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>if (nums >= 5) { <BR>this.playerWin(); <BR>return; <BR>} <BR>this.AImoveChess(); <BR>}, <BR>playerWin: function () { <BR>this.winGames++; <BR>cookieHandle.setCookie({ name: "winGames", value: this.winGames, expiresHours: 365 * 24 }); <BR>this.showResult(true); <BR>this.gameOver(); <BR>}, <BR>//AI下棋 <BR>AImoveChess: function () { <BR>this.isPlayerTurn = false; <BR>var maxX = 0, <BR>maxY = 0, <BR>maxWeight = 0, <BR>i, j, tem; <BR>for (i = 14; i >= 0; i--) { <BR>for (j = 14; j >= 0; j--) { <BR>if (this.chessArr[i][j] !== this.NO_CHESS) { <BR>continue; <BR>} <BR>tem = this.computeWeight(i, j); <BR>if (tem > maxWeight) { <BR>maxWeight = tem; <BR>maxX = i; <BR>maxY = j; <BR>} <BR>} <BR>} <BR>this.playChess(maxX, maxY, this.AIPlayer); <BR>this.AILastChess = [maxX, maxY]; <BR>if ((maxWeight >= 100000 && maxWeight < 250000) || (maxWeight >= 500000)) { <BR>this.showResult(false); <BR>this.gameOver(); <BR>} <BR>else { <BR>this.isPlayerTurn = true; <BR>} <BR>}, <BR>showResult: function(isPlayerWin) { <BR>if (isPlayerWin) { <BR>$("#result_tips").html("恭喜你获胜！"); <BR>} <BR>else { <BR>$("#result_tips").html("哈哈，你输咯！"); <BR>} <BR>this.isGameOver = true; <BR>this.showWinChesses(isPlayerWin); <BR>}, <BR>//标记显示获胜棋子 <BR>showWinChesses: function (isPlayerWin) { <BR>var nums = 1, //连续棋子个数 <BR>lineChess = [],//连续棋子位置 <BR>i, <BR>j, <BR>chessColor, <BR>m, n; <BR>if (isPlayerWin) { <BR>chessColor = this.humanPlayer === "black" ? this.BLACK_CHESS : this.WHITE_CHESS; <BR>i = this.playerLastChess[0]; <BR>j = this.playerLastChess[1]; <BR>} <BR>else { <BR>chessColor = this.AIPlayer === "black" ? this.BLACK_CHESS : this.WHITE_CHESS; <BR>i = this.AILastChess[0]; <BR>j = this.AILastChess[1]; <BR>} <BR>$("div.chessboard div." + this.AIPlayer + "-last").addClass(this.AIPlayer).removeClass(this.AIPlayer + "-last"); <BR>//x方向 <BR>lineChess[0] = [i]; <BR>lineChess[1] = [j]; <BR>for (m = j - 1; m >= 0; m--) { <BR>if (this.chessArr[i][m] === chessColor) { <BR>lineChess[0][nums] = i; <BR>lineChess[1][nums] = m; <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>for (m = j + 1; m < 15; m++) { <BR>if (this.chessArr[i][m] === chessColor) { <BR>lineChess[0][nums] = i; <BR>lineChess[1][nums] = m; <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>if (nums >= 5) { <BR>for (k = nums - 1; k >= 0; k--) { <BR>this.markChess(lineChess[0][k] * 15 + lineChess[1][k], isPlayerWin ? this.humanPlayer : this.AIPlayer); <BR>} <BR>return; <BR>} <BR>//y方向 <BR>nums = 1; <BR>lineChess[0] = [i]; <BR>lineChess[1] = [j]; <BR>for (m = i - 1; m >= 0; m--) { <BR>if (this.chessArr[m][j] === chessColor) { <BR>lineChess[0][nums] = m; <BR>lineChess[1][nums] = j; <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>for (m = i + 1; m < 15; m++) { <BR>if (this.chessArr[m][j] === chessColor) { <BR>lineChess[0][nums] = m; <BR>lineChess[1][nums] = j; <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>if (nums >= 5) { <BR>for (k = nums - 1; k >= 0; k--) { <BR>this.markChess(lineChess[0][k] * 15 + lineChess[1][k], isPlayerWin ? this.humanPlayer : this.AIPlayer); <BR>} <BR>return; <BR>} <BR>//左斜方向 <BR>nums = 1; <BR>lineChess[0] = [i]; <BR>lineChess[1] = [j]; <BR>for (m = i - 1, n = j - 1; m >= 0 && n >= 0; m--, n--) { <BR>if (this.chessArr[m][n] === chessColor) { <BR>lineChess[0][nums] = m; <BR>lineChess[1][nums] = n; <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>for (m = i + 1, n = j + 1; m < 15 && n < 15; m++, n++) { <BR>if (this.chessArr[m][n] === chessColor) { <BR>lineChess[0][nums] = m; <BR>lineChess[1][nums] = n; <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>if (nums >= 5) { <BR>for (k = nums - 1; k >= 0; k--) { <BR>this.markChess(lineChess[0][k] * 15 + lineChess[1][k], isPlayerWin ? this.humanPlayer : this.AIPlayer); <BR>} <BR>return; <BR>} <BR>//右斜方向 <BR>nums = 1; <BR>lineChess[0] = [i]; <BR>lineChess[1] = [j]; <BR>for (m = i - 1, n = j + 1; m >= 0 && n < 15; m--, n++) { <BR>if (this.chessArr[m][n] === chessColor) { <BR>lineChess[0][nums] = m; <BR>lineChess[1][nums] = n; <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>for (m = i + 1, n = j - 1; m < 15 && n >= 0; m++, n--) { <BR>if (this.chessArr[m][n] === chessColor) { <BR>lineChess[0][nums] = m; <BR>lineChess[1][nums] = n; <BR>nums++; <BR>} <BR>else { <BR>break; <BR>} <BR>} <BR>if (nums >= 5) { <BR>for (k = nums - 1; k >= 0; k--) { <BR>this.markChess(lineChess[0][k] * 15 + lineChess[1][k], isPlayerWin ? this.humanPlayer : this.AIPlayer); <BR>} <BR>} <BR>}, <BR>markChess: function (pos, color) { <BR>$("div.chessboard div:eq(" + pos + ")").removeClass(color).addClass(color + "-last"); <BR>}, <BR>//下子到i，j X方向 结果: 多少连子 两边是否截断 <BR>putDirectX: function (i, j, chessColor) { <BR>var m, n, <BR>nums = 1, <BR>side1 = false, <BR>side2 = false; <BR>for (m = j - 1; m >= 0; m--) { <BR>if (this.chessArr[i][m] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>if (this.chessArr[i][m] === this.NO_CHESS) { <BR>side1 = true; <BR>} <BR>break; <BR>} <BR>} <BR>for (m = j + 1; m < 15; m++) { <BR>if (this.chessArr[i][m] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>if (this.chessArr[i][m] === this.NO_CHESS) { <BR>side2 = true; <BR>} <BR>break; <BR>} <BR>} <BR>return {"nums": nums, "side1": side1, "side2": side2}; <BR>}, <BR>//下子到i，j Y方向 结果 <BR>putDirectY: function (i, j, chessColor) { <BR>var m, n, <BR>nums = 1, <BR>side1 = false, <BR>side2 = false; <BR>for (m = i - 1; m >= 0; m--) { <BR>if (this.chessArr[m][j] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>if (this.chessArr[m][j] === this.NO_CHESS) { <BR>side1 = true; <BR>} <BR>break; <BR>} <BR>} <BR>for (m = i + 1; m < 15; m++) { <BR>if (this.chessArr[m][j] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>if (this.chessArr[m][j] === this.NO_CHESS) { <BR>side2 = true; <BR>} <BR>break; <BR>} <BR>} <BR>return {"nums": nums, "side1": side1, "side2": side2}; <BR>}, <BR>//下子到i，j XY方向 结果 <BR>putDirectXY: function (i, j, chessColor) { <BR>var m, n, <BR>nums = 1, <BR>side1 = false, <BR>side2 = false; <BR>for (m = i - 1, n = j - 1; m >= 0 && n >= 0; m--, n--) { <BR>if (this.chessArr[m][n] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>if (this.chessArr[m][n] === this.NO_CHESS) { <BR>side1 = true; <BR>} <BR>break; <BR>} <BR>} <BR>for (m = i + 1, n = j + 1; m < 15 && n < 15; m++, n++) { <BR>if (this.chessArr[m][n] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>if (this.chessArr[m][n] === this.NO_CHESS) { <BR>side2 = true; <BR>} <BR>break; <BR>} <BR>} <BR>return {"nums": nums, "side1": side1, "side2": side2}; <BR>}, <BR>putDirectYX: function (i, j, chessColor) { <BR>var m, n, <BR>nums = 1, <BR>side1 = false, <BR>side2 = false; <BR>for (m = i - 1, n = j + 1; m >= 0 && n < 15; m--, n++) { <BR>if (this.chessArr[m][n] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>if (this.chessArr[m][n] === this.NO_CHESS) { <BR>side1 = true; <BR>} <BR>break; <BR>} <BR>} <BR>for (m = i + 1, n = j - 1; m < 15 && n >= 0; m++, n--) { <BR>if (this.chessArr[m][n] === chessColor) { <BR>nums++; <BR>} <BR>else { <BR>if (this.chessArr[m][n] === this.NO_CHESS) { <BR>side2 = true; <BR>} <BR>break; <BR>} <BR>} <BR>return {"nums": nums, "side1": side1, "side2": side2}; <BR>}, <BR>//计算下子至i,j的权重 <BR>computeWeight: function (i, j) { <BR>var weight = 14 - (Math.abs(i - 7) + Math.abs(j - 7)), //基于棋盘位置权重 <BR>pointInfo = {},//某点下子后连子信息 <BR>chessColor = this.AIPlayer === "black" ? this.BLACK_CHESS : this.WHITE_CHESS; <BR>//x方向 <BR>pointInfo = this.putDirectX(i, j, chessColor); <BR>weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI下子权重 <BR>pointInfo = this.putDirectX(i, j, -chessColor); <BR>weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player下子权重 <BR>//y方向 <BR>pointInfo = this.putDirectY(i, j, chessColor); <BR>weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI下子权重 <BR>pointInfo = this.putDirectY(i, j, -chessColor); <BR>weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player下子权重 <BR>//左斜方向 <BR>pointInfo = this.putDirectXY(i, j, chessColor); <BR>weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI下子权重 <BR>pointInfo = this.putDirectXY(i, j, -chessColor); <BR>weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player下子权重 <BR>//右斜方向 <BR>pointInfo = this.putDirectYX(i, j, chessColor); <BR>weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI下子权重 <BR>pointInfo = this.putDirectYX(i, j, -chessColor); <BR>weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player下子权重 <BR>return weight; <BR>}, <BR>//权重方案 独：两边为空可下子，单：一边为空 <BR>weightStatus: function (nums, side1, side2, isAI) { <BR>var weight = 0; <BR>switch (nums) { <BR>case 1: <BR>if (side1 && side2) { <BR>weight = isAI ? 15 : 10;//独一 <BR>} <BR>break; <BR>case 2: <BR>if (side1 && side2) { <BR>weight = isAI ? 100 : 50;//独二 <BR>} <BR>else if (side1 || side2) { <BR>weight = isAI ? 10 : 5;//单二 <BR>} <BR>break; <BR>case 3: <BR>if (side1 && side2) { <BR>weight = isAI ? 500 : 200;//独三 <BR>} <BR>else if (side1 || side2) { <BR>weight = isAI ? 30 : 20;//单三 <BR>} <BR>break; <BR>case 4: <BR>if (side1 && side2) { <BR>weight = isAI ? 5000 : 2000;//独四 <BR>} <BR>else if (side1 || side2) { <BR>weight = isAI ? 400 : 100;//单四 <BR>} <BR>break; <BR>case 5: <BR>weight = isAI ? 100000 : 10000;//五 <BR>break; <BR>default: <BR>weight = isAI ? 500000 : 250000; <BR>break; <BR>} <BR>return weight; <BR>} <BR>}; <BR></script>

黑子
白子

先手
后手

开始

胜率：100%