Pure JS implements backgammon game compatible with all browsers (source code attached)_javascript skills

Pure JS backgammon (compatible with all browsers)
Rendering:

Code download
HTML code

Copy code The code is as follows:

<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: [], //Record chess pieces<BR>chessBoardHtml: "" , <BR>humanPlayer: "black",//Player chess color<BR>AIPlayer: "white",//AI chess color<BR>isPlayerTurn: true, //It's the player's turn to play chess<BR>totalGames: cookieHandle. getCookie("totalGames") || 0,//Total number of games<BR>winGames: cookieHandle.getCookie("winGames") || 0,//Number of games won by the player<BR>isGameStart: false,//The game has started<BR>isGameOver: false, //The game is over<BR>playerLastChess: [], //The player’s last move<BR>AILastChess: [], //The AI’s last move<BR>init: function () { <BR> this.chessBoardHtml = $("div.chessboard").html(); <BR>var _fiveChess = this; <BR>//Right operating button<BR>$(".operating-panel a").click( function (event) { <BR>event.preventDefault(); <BR>var id = $(this).attr("id"); <BR>if (_fiveChess.isGameStart && id !== "replay_btn" ) { return; }//In game and not operating <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; >if (_fiveChess.isGameStart) {//Click to replay<BR>_fiveChess.gameOver(); <BR>} <BR>else { //Click to start<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("Win rate:" (this.winGames * 100 / this.totalGames | 0) "%") ; <BR>}, <BR>//Reset the chessboard<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>//Initialize the chess piece state<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 chess event<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>//The effect of mouse movement on the chessboard <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%