首页
所有分类
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中汉字显示乱码问题（已解决）
Dec 27 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
Angular表单验证实例详解
Oct 20 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
javascript实现拖拽碰撞检测
Mar 12 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
Fragment(1) ICF-5900W(2) pt-archiver(1) 存储过程(3) TcpServer(1) EventBus(1) muduo(1) 忘记密码(1) instantclient(1) B+树(2)
You might like
如何获得PHP相关资料
2006/10/09 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
JavaScript性能优化之函数节流（throttle）与函数去抖（debounce）
2016/08/11 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
详解小程序如何避免多次点击，重复触发事件
2019/04/08 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
详解使用JWT实现单点登录（完全跨域方案）
2019/08/02 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python中类的属性和方法介绍
2018/11/27 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
世界上最大的冷却器制造商：Igloo Coolers
2019/07/23 全球购物
linux面试题参考答案（9）
2016/01/29 面试题
《三峡》教学反思
2014/03/01 职场文书
初中学校军训方案
2014/05/09 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书