首页
所有分类
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 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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
NginxConfig(1) 横向滚动(1) 共享文件夹(1) Master(1) ESXI(1) caddy(1) SVN(1) 骨架屏(1) Slave(1) 表约束(2)
You might like
PHP用mysql数据库存储session的代码
2010/03/05 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python科学计算之narray对象用法
2019/11/25 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
英国厨房与餐具用品为主的设计品牌：Joseph Joseph
2018/04/26 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多：Look Human
2019/01/07 全球购物
应届生高等护理求职信
2013/10/12 职场文书
营业经理岗位职责
2013/11/10 职场文书
青年文明号复核材料
2014/02/11 职场文书
节能宣传周活动总结
2014/05/08 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
房屋产权证明书
2015/06/19 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis