首页
所有分类
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 相关文章推荐
使用js画图之圆、弧、扇形
Jan 12 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
理解JavaScript原型链
Oct 25 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
redux.js详解及基本使用
May 24 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 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
GCN(1) Python(3) Flask(2) PIL(1) 鲲鹏(1) 进度条(1) 验证码(1) Pytesseract(1) 柱状图(1) 裁剪图片(1)
You might like
php自定文件保存session的方法
2014/12/10 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
AJAX异步从优酷专辑中采集所有视频及信息（JavaScript代码）
2010/11/20 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
javascript常用的方法整理
2015/08/20 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
python绘制双柱形图代码实例
2017/12/14 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
深入浅析python with语句简介
2018/04/11 Python
python实现自动登录
2018/09/17 Python
python正则表达式实例代码
2020/03/03 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
类如何去实现接口
2013/12/19 面试题
北京华建集团SQL面试题
2014/06/03 面试题
自愿离婚协议书范本
2014/09/13 职场文书
机关工会工作总结2015
2015/05/26 职场文书
Python os和os.path模块详情
2022/04/02 Python