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

赞 (0)

相关推荐

  • javascript 初学教程及五子棋小程序的简单实现

    javascript 初学教程及五子棋小程序的简单实现

    一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 二.hbulider工具的使用 1) hbulider的特点: 1.飞快的编码速度 2.HBuilder直接创建移动App,打包为ios或Android原生安装包 3.HTML5语法.HTML5+

  • 原生JS+Canvas实现五子棋游戏

    本文实例为大家分享了JS  Canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px auto; box-shadow: -2p

  • 原生JS+Canvas实现五子棋游戏实例

    原生JS+Canvas实现五子棋游戏实例

    一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *

  • JS+canvas实现的五子棋游戏【人机大战版】

    JS+canvas实现的五子棋游戏【人机大战版】

    本文实例讲述了JS+canvas实现的五子棋游戏.分享给大家供大家参考,具体如下: 运行效果图: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css

  • Javascript和HTML5利用canvas构建Web五子棋游戏实现算法

    Javascript和HTML5利用canvas构建Web五子棋游戏实现算法

    这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五

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

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

    纯JS五子棋(各浏览器兼容) 效果图:  代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/

  • jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示       源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"

  • JS库particles.js创建超炫背景粒子插件(附源码下载)

    JS库particles.js创建超炫背景粒子插件(附源码下载)

    插件描述:particles.js用于创建粒子的轻量级 JavaScript 库. 查看 效果             源码下载 使用 加载 particles.js和配置粒子 <div id="particles-js"></div> <script src="particles.js"></script> app.js /* particlesJS.load(@dom-id, @path-json, @callba

  • 不依赖Flash和任何JS库实现文本复制与剪切附源码下载

    不依赖Flash和任何JS库实现文本复制与剪切附源码下载

    效果图如下: 我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js. 查看演示 下载源码 HTML 首先加载本地clipboard.js文件. 复制代码 代码如下: <script src="clipboard.min.js"></scri

  • C语言实现扫雷游戏详解（附源码）

    目录 1.游戏的功能 2.游戏实现的基本思路 2.1实现菜单给玩家选择 2.2初始化棋盘 2.3数组大小的问题 2.4对棋盘赋值 2.5打印棋盘 2.6布置雷 2.7排查雷 3.代码基本实现部分 3.1主函数部分 3.2 初始化棋盘 3.3对两个棋盘进行赋值 3.4打印棋盘 3.5布置雷 3.6排查雷  3.7函数声明 4.扫雷游戏的源代码 总结 1.游戏的功能 游戏的主要功能有 1:棋盘内有若干个雷 2:玩家输入要排查雷的坐标 3:在玩家输入的坐标处显示周围八个坐标有几个雷 3:若玩家将所有的

  • 纯JS实现五子棋游戏

    本文实例为大家分享了JS实现五子棋游戏的具体代码,供大家参考,具体内容如下 基本实现方式是表格,当时想用黑白圆棋代替的,但是尺寸没调好,就先上黑白底色了 说一下实现思路,刚开始是想每次落子的时候都把整个棋盘上的子遍历一遍,然后判断四个方向(横,竖,左斜,右斜)上的点数是不是想加等于5,做到一半的时候感觉这种效率太低了,也没必要,,然后就在每次落子之后判断它四个方向相加是不是等于5(不算落子本身),这是各个方向的最终效果 横向: 竖向: 左斜: 右斜: 横向和竖向的图是我修改过后的,加了一个定时器

  • jquery validate.js表单验证入门实例（附源码）

    jquery validate.js表单验证入门实例（附源码）

    小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=

  • jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】

    本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p

  • 利用Vue.js框架实现火车票查询系统（附源码）

    利用Vue.js框架实现火车票查询系统（附源码）

    前言 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js 今天,我就要基于这个库来搭建一个火车票查询系统.首先我们的机器上得有NodeJS环境,并且安装了npm包管理工具.因为vue是跑在node环境下的,并且我们需要用npm来安装vue. 在终端输入npm install --global vue-cli我们来全局安装vue-cli

  • Java实现的打地鼠小游戏完整示例【附源码下载】

    Java实现的打地鼠小游戏完整示例【附源码下载】

    本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体代码: Mouse.java: import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt

随机推荐