纯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 五子棋的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
Js四则运算函数代码
Jul 21 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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
You might like
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
PHP多例模式介绍
2013/06/24 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
html下载本地
2006/06/19 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
理解JS事件循环
2016/01/07 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
竞选班干部演讲稿500字
2014/08/20 职场文书
2015年消防工作总结
2015/04/24 职场文书
2016春节放假通知范文
2015/08/18 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android