Pure JS はすべてのブラウザと互換性のあるバックギャモン ゲームを実装します (ソース コード添付)_JavaScript スキル

純粋な JS バックギャモン (すべてのブラウザと互換性があります)
レンダリング:

コードのダウンロード
HTML コード

コードをコピー コードは次のとおりです:

.wrapper {
幅: 600px;
位置: 相対。
}
/* 棋盘 */
div.chessboard {
margin: 30px 0 0 50px;
幅: 542px;
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/chessboard.png) no-repeat 14px 14px rgb(250, 250, 250);
オーバーフロー: 非表示;
ボックスシャドウ: 2px 2px 8px #888;
-webkit-box-shadow: 2px 2px 8px #888;
-moz-box-shadow: 2px 2px 8px #888;
}
div.chessboard div {
float: left;
幅: 36px;
高さ: 36px;
ボーダートップ: 0px ソリッド #ccc;
ボーダー左: 0px ソリッド #ccc;
右ボーダー: 0;
ボーダーボトム: 0;
カーソル: ポインタ;
}
/* 棋子 */
div.chessboard div.black {
background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/black.png ) リピートなし 4px 4px;
}
div.chessboard div.white {
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/white.png) no-repeat 4px 4px;
}
div.chessboard div.hover {
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover.png) no-repeat 1px 1px;
}
div.chessboard div.hover-up {
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_up.png) no-repeat 1px 1px ;
}
div.chessboard div.hover-down {
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_down.png) no-repeat 1px 1px ;
}
div.chessboard div.hover-up-left {
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_up_left.png) no-repeat 1ピクセル 1ピクセル;
}
div.chessboard div.hover-up-right {
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_up_right.png) no-repeat 1ピクセル 1ピクセル;
}
div.chessboard div.hover-left {
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_left.png) no-repeat 1px 1px ;
}
div.chessboard div.hover-right {
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_right.png) no-repeat 1px 1px ;
}
div.chessboard div.hover-down-left {
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_down_left.png) no-repeat 1ピクセル 1ピクセル;
}
div.chessboard div.hover-down-right {
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/hover_down_right.png) no-repeat 1ピクセル 1ピクセル;
}
div.chessboard div.white-last {
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/white_last.png) no-repeat 4px 4px ;
}
div.chessboard div.black-last {
背景: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/black_last.png) no-repeat 4px 4px ;
}
/* 右侧 */
div.operating-panel {
位置: 絶対;
左: 610px;
トップ: 150ピクセル;
幅: 200px;
text-align: 中央;
}
.operating-panel a {
display: inline-block;
パディング: 10px 15px;
マージン-ボトム: 39px;
右マージン: 8px;
マージン左: 8px;
背景: rgb(100, 167, 233);
テキスト装飾: なし。
カラー: #333;
フォントの太さ: 太字;
フォントサイズ: 16px;
フォントファミリー: "微软雅黑"、"宋体";
}
.operating-panel a:hover {
背景: rgb(48, 148, 247);
テキスト装飾: なし。
}
.operating-panel a.disable, .operating-panel a.disable:hover {
カーソル: デフォルト;
背景: rgb(197, 203, 209);
色: rgb(130, 139, 148);
}
.operating-panel a.selected {
border: 5px ソリッド #F3C242;
パディング: 5px 10px;
}
#result_tips {
色: #CE4242;
フォントサイズ: 26px;
フォントファミリー: "微软雅黑";
}
#result_info {
margin-bottom: 26px;
}


$(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, //プレイヤーがチェスをプレイする番です
totalGames : cookieHandle.getCookie("totalGames") || 合計ゲーム数
winGames: cookieHandle.getCookie("winGames") || プレイヤーが勝ったゲーム数
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 = "白";
ケース "白";
_fiveChess.AIPlayer = "黒"; >case "first_move_btn":
_fiveChess.isPlayerTurn = true;
case "first_move_btn":
_fiveChess.isPlayerTurn = false; {//クリックしてリプレイします
_fiveChess.gameOver();
}
else { //クリックして開始します
_fiveChess.gameStart();
break
}
if ( id !== "replay_btn") {
$(this).addClass("selected").siblings().removeClass("selected");
}
}); replaceChessBoard();
$("#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 this.chessArr[i] = [];
for (j = 0; j this.chessArr [i][j] = this.NO_CHESS;
}
}
//プレイヤーチェスイベント
var _fiveChess = this;
$( "div.chessboard div").click( function () {
if (!_fiveChess.isPlayerTurn || _fiveChess.isGameOver) {
return;
}
if (!_fiveChess.isGameStart) {
_fiveChess.gameStart(); 🎜>}
var インデックス = $(this).index(),
i = インデックス / 15 |
j = インデックス % 15; j] === _fiveChess.NO_CHESS) {
_fiveChess.playChess(i, j, _fiveChess.humanPlayer);
if (i === 0 && j == = 0) {
$(this ).removeClass("ホバーアップ左");
}
else if (i === 0 && j === 14) {
$ (this).removeClass("ホバーアップ-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("ホバーアップ");
}
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; }
varindex = $( this).index(),
i = インデックス / 15 | 0,
j = インデックス % 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 インデックス = $(this).index(),
i = インデックス / 15 |
j = インデックス % 15; (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 == =「黒」? 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 === "黒" ? this.BLACK_CHESS : this.WHITE_CHESS、
m、n;
//x 方向
for (m = j - 1; m >= 0; m--) {
if (this.chessArr[i][m] === chessColor) {
数字;
}
else {
ブレーク;
}
}
for (m = j 1; m if (this.chessArr[i][m] === chessColor) {
nums ;
}
else {
ブレーク;
}
}
if (nums >= 5) {
this.playerWin();
戻る;
}
else {
数値 = 1;
}
//y 方向
for (m = i - 1; m >= 0; m--) {
if (this.chessArr[m][j] === chessColor) {
数値 ;
}
else {
ブレーク;
}
}
for (m = i 1; m if (this.chessArr[m][j] === chessColor) {
nums ;
}
else {
ブレーク;
}
}
if (nums >= 5) {
this.playerWin();
戻る;
}
else {
数値 = 1;
}
//左斜め方向
for (m = i - 1, n = j - 1; m >= 0 && n >= 0; m--, n--) {
if (this.chessArr[m][n] === chessColor) {
nums ;
}
else {
ブレーク;
}
}
for (m = i 1, n = j 1; m if (this.chessArr[m][ n] === chessColor) {
nums ;
}
else {
ブレーク;
}
}
if (nums >= 5) {
this.playerWin();
戻る;
}
else {
数値 = 1;
}
//右斜め方向
for (m = i - 1, n = j 1; m >= 0 && n if (this.chessArr[m][n] === chessColor) {
nums ;
}
else {
ブレーク;
}
}
for (m = i 1, n = j - 1; m = 0; m , n--) {
if (this.chessArr [m][n] === chessColor) {
nums ;
}
else {
ブレーク;
}
}
if (nums >= 5) {
this.playerWin();
戻る;
}
this.AImoveChess();
},
playerWin: function () {
this.winGames ;
cookieHandle.setCookie({ 名前: "winGames"、値: 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) {
続行;
}
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 = 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]; [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; m;
nums ;
}
else {
break;
}
for (m = j 1; m if (this.chessArr[i][m] === chessColor) {
lineChess[0][nums] = i;
lineChess[1][nums] = m;
数値 ;
}
else {
ブレーク;
}
}
if (nums >= 5) {
for (k = nums - 1; k >= 0; k--) {
this.markChess(lineChess [0][k] * 15 lineChess[1][k], isPlayerWin ? this.humanPlayer : this.AIPlayer);
}
戻る;
}
//y 方向
nums = 1;
lineChess[0] = [i];
lineChess[1] = [j];
for (m = i - 1; m >= 0; m--) {
if (this.chessArr[m][j] === chessColor) {
lineChess[0][数値] = m;
lineChess[1][nums] = j;
数値 ;
}
else {
ブレーク;
}
}
for (m = i 1; m if (this.chessArr[m][j] === chessColor) {
lineChess [0][数値] = m;
lineChess[1][nums] = j;
数値 ;
}
else {
ブレーク;
}
}
if (nums >= 5) {
for (k = nums - 1; k >= 0; k--) {
this.markChess(lineChess [0][k] * 15 lineChess[1][k], isPlayerWin ? this.humanPlayer : this.AIPlayer);
}
戻る;
}
//左斜め方向
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;
数値 ;
}
else {
ブレーク;
}
}
for (m = i 1, n = j 1; m if (this.chessArr[m][ n] === chessColor) {
lineChess[0][nums] = m;
lineChess[1][nums] = n;
数値 ;
}
else {
ブレーク;
}
}
if (nums >= 5) {
for (k = nums - 1; k >= 0; k--) {
this.markChess(lineChess [0][k] * 15 lineChess[1][k], isPlayerWin ? this.humanPlayer : this.AIPlayer);
}
戻る;
}
//右斜め方向
nums = 1;
lineChess[0] = [i];
lineChess[1] = [j];
for (m = i - 1, n = j 1; m >= 0 && n if (this.chessArr[m][n] == = chessColor) {
lineChess[0][nums] = m;
lineChess[1][nums] = n;
数値 ;
}
else {
ブレーク;
}
}
for (m = i 1, n = j - 1; m = 0; m , n--) {
if (this.chessArr [m][n] === chessColor) {
lineChess[0][nums] = m;
lineChess[1][nums] = n;
数値 ;
}
else {
ブレーク;
}
}
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(色 "-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;
}
休憩;
}
}
for (m = j 1; m if (this.chessArr[i][m] === chessColor) {
nums ;
}
else {
if (this.chessArr[i][m] === this.NO_CHESS) {
side2 = true;
}
休憩;
}
}
return {"nums": nums, "side1": サイド 1, "サイド 2": サイド 2};
},
//下子到 i，j Y 方向 結果
putDirectY: function (i, j, chessColor) {
var m, n,
nums = 1,
サイド 1 = false、
サイド 2 = 偽;
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;
}
休憩;
}
}
for (m = i 1; m if (this.chessArr[m][j] === chessColor) {
nums ;
}
else {
if (this.chessArr[m][j] === this.NO_CHESS) {
side2 = true;
}
休憩;
}
}
return {"nums": nums, "side1": サイド 1, "サイド 2": サイド 2};
},
//下子到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 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 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 = 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;
}
};

黑子
白子

先手
后手

开始

胜率：100%