JavaScript实现一块黑白五子棋游戏

HTML5 herman 927浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

五子棋大家都不陌生吧。以前我们玩的可能是app版的,但是今天我给大家带来一块web版的五子棋。本文制作的黑白五子棋游戏也算是一块HTML5游戏吧。

下面我们先来看看我的五子棋的运行效果。

五子棋

怎么样看起来是不是很高大上。实际上它的实现过程一点也不难。我们先从五子棋的规则说起吧。

五子棋通常双方分别使用黑白两色的棋子,下在棋盘直线与横线的交叉点上,先形成5子连线者获胜。

根据上面的规则,我们说说我们五子棋实现的步骤:

  • 先要实现一个15*15的棋牌。
  • 剩下的就是逻辑。控制谁先走,实时判断输赢。

下面是全部的实现代码:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;">
	<title>业余草www.xttblog.com五子棋</title>
	<link rel="stylesheet" type="text/css" href="reset.css">
	<script type="text/javascript" src="CookieHandle.js"></script>
	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<style>
	.wrapper {
	width: 600px;
	position: relative;
}
/* 棋盘 */
div.chessboard {
	margin: 30px 0 0 50px;
	width: 542px;
	background: url(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(black.png) no-repeat 4px 4px;
}
div.chessboard div.white {
	background: url(white.png) no-repeat 4px 4px;
}
div.chessboard div.hover {
	background: url(hover.png) no-repeat 1px 1px;
}
div.chessboard div.hover-up {
	background: url(hover_up.png) no-repeat 1px 1px;
}
div.chessboard div.hover-down {
	background: url(hover_down.png) no-repeat 1px 1px;
}
div.chessboard div.hover-up-left {
	background: url(hover_up_left.png) no-repeat 1px 1px;
}
div.chessboard div.hover-up-right {
	background: url(hover_up_right.png) no-repeat 1px 1px;
}
div.chessboard div.hover-left {
	background: url(hover_left.png) no-repeat 1px 1px;
}
div.chessboard div.hover-right {
	background: url(hover_right.png) no-repeat 1px 1px;
}
div.chessboard div.hover-down-left {
	background: url(hover_down_left.png) no-repeat 1px 1px;
}
div.chessboard div.hover-down-right {
	background: url(hover_down_right.png) no-repeat 1px 1px;
}
div.chessboard div.white-last {
	background: url(white_last.png) no-repeat 4px 4px;
}
div.chessboard div.black-last {
	background: url(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="black.png" alt="preload" />
		<img src="white.png" alt="preload" />
		<img src="hover.png" alt="preload" />
		<img src="hover_up.png" alt="preload" />
		<img src="hover_down.png" alt="preload" />
		<img src="hover_up_left.png" alt="preload" />
		<img src="hover_up_right.png" alt="preload" />
		<img src="hover_left.png" alt="preload" />
		<img src="hover_right.png" alt="preload" />
		<img src="hover_down_left.png" alt="preload" />
		<img src="hover_down_right.png" alt="preload" />
		<img src="black_last.png" alt="preload" />
		<img src="white_last.png" alt="preload" />
	</div>
</div>
</body>
</html>

全部源码已共享到了runjs上,http://runjs.cn/code/jhp3w797

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » JavaScript实现一块黑白五子棋游戏