首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onApril 24, 2013

纯JS五子棋（各浏览器兼容）

效果图：

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

 代码下载

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实现五子棋游戏兼容各浏览器(附源码)

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
vue+SSM实现验证码功能
Dec 07 Javascript
js实现表格数据搜索
Aug 09 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 #Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 #Javascript
查看图片(前进后退)功能实现js代码
Apr 24 #Javascript
jQuery判断密码强度实现思路及代码
Apr 24 #Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 #Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 #Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 #Javascript
logging(1) 相对路径(1) 解密(1) Pickle(1) requests(1) hmac(1) 加密(1) hashlib(1) openpyxl(1) 面向对象(3)
You might like
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
用Python进行TCP网络编程的教程
2015/04/29 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
基于python实现对文件进行切分行
2020/04/26 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
英国鞋网：Rubber Sole
2020/03/03 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
奥运会口号
2014/06/13 职场文书
关于运动会的广播稿
2014/09/22 职场文书
车辆年检委托书范本
2014/10/14 职场文书
雨中的树观后感
2015/06/03 职场文书
入队仪式主持词
2015/07/04 职场文书
小学运动会开幕词
2016/03/04 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers