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

摘要：纯JS五子棋（各浏览器兼容）效果图：代码下载HTML代码复制代码代码如下:五子棋.wrapper{width:600px;position:...

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

效果图：

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

代码下载

HTML代码

复制代码代码如下:

<!DOCTYPE html>

<html>

<head>

<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>

$(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 = [],//连续棋子位置

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>

</div>

<div>

<p>

</p>

<p>

</p>

</div>

<div>

</div>

</body>

</html>

【纯JS实现五子棋游戏兼容各浏览器(附源码)】相关文章：

★ jquery实现的判断倒计时是否结束代码

★ JS实现兼容各浏览器解析XML文档数据的方法

★ JS实现简单路由器功能的方法

★ js去除浏览器默认底图的方法

★ 纯javascript实现四方向文本无缝滚动效果

★ js实现字符串转日期格式的方法

★ 用JavaScript实现页面重定向功能的教程

★ jQuery结合ajax实现动态加载文本内容

★ JavaScript实现DIV层拖动及动态增加新层的方法

★ JS和css实现检测移动设备方向的变化并判断横竖屏幕

上一篇：基于jQuery实现图片的前进与后退功能

下一篇：网页中返回顶部代码(多种方法)另附注释说明

学习工具