前言
小朋友在学校里，跟同学玩过五子棋，回来想跟我也较量一下，但是家里没有五子棋，准备用纸做一个，做了半天，做出来的成品，不忍直视，无意看到桌上的平板，想到可以用js开发一个五子棋游戏，免去安装
理清思路
- 需要一个棋盘，n行n列
- 两种棋子，白棋黑棋
- 白棋黑棋交替下子
- 横线（—）、竖线（|）、左斜线（/）、右斜线（\），四条线上任意一条，五个棋子连成一条线就赢
思路清楚后，直接撸代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五子棋</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
.chessboard {
border: black solid 2px;
width: auto;
display: inline-block;
margin-left: 100px;
padding: 20px;
background: burlywood;
}
.chessboard_row {
display: flex;
}
.grid-area {
width: 30px;
height: 30px;
position: relative;
}
.grid-area:after {
content: '';
position: absolute;
top: 18px;
left: 18px;
width: 22px;
height: 22px;
border: 1px dashed black;
display: none;
}
.grid-area:hover:after {
display: inline-block;
}
.grid-area[have-chess] {
cursor: no-drop;
}
.grid {
border-right: black solid 1px;
border-bottom: black solid 1px;
}
.grid-row-first {
border-right: black solid 1px;
border-top: black solid 1px;
border-bottom: black solid 1px;
}
.grid-first-row-col {
border: black solid 1px;
}
.grid-first-col {
border-right: black solid 1px;
border-left: black solid 1px;
border-bottom: black solid 1px;
}
.chessman {
width: 22px;
height: 22px;
border-radius: 50%;
position: absolute;
z-index: 10;
top: 19px;
left: 19px;
}
.chessman.black {
background: black;
}
.chessman.white {
background: white;
}
.op-area {
display: inline-block;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="chessboard">
</div>
<div class="op-area">
<ul>
<li>
<button id="restart-btn">重新开始</button>
</li>
</ul>
</div>
<script>
let fir = {
chessmanType: {
black: 0,
white: 1
},
lineType: {
horizontal: 1,//横线
vertical: 2,//竖线
leftSlash: 3,//左斜线
rightSlash: 4,//右斜线
},
direction: {
positive: 1,//正向
negative: -1//反向
},
black_array: [],//已下黑子数组
white_array: [],//已下白子数组
currentChessmanType: null,//当前落子方
init: () => {
fir.drawChessboard();
fir.bindEvent();
//黑棋先下
fir.currentChessmanType = fir.chessmanType.black
},
/**
* 画棋盘，默认18行，18列
* */
drawChessboard: (col) => {//画棋盘
col = col || 18;//列数，行数默认等于列数
let chessboard_html = [];
for (let i = 0; i < col; i ) {
chessboard_html.push('<div class="chessboard_row">');
for (let j = 0; j < col; j ) {
if (i === 0) {
if (j === 0) {
chessboard_html.push('<div data-r="' i '" data-c="' j '" class="grid-area grid-first-row-col"></div>');
} else {
chessboard_html.push('<div data-r="' i '" data-c="' j '" class="grid-area grid-row-first"></div>');
}
} else {
if (j === 0) {
chessboard_html.push('<div data-r="' i '" data-c="' j '" class="grid-area grid-first-col"></div>');
} else {
chessboard_html.push('<div data-r="' i '" data-c="' j '" class="grid-area grid"></div>');
}
}
}
chessboard_html.push('</div>')
}
$('.chessboard').append(chessboard_html.join(""));
},
bindEvent: () => {
$('.grid-area').bind('click', function () {
fir.chess(this);
});
$('#restart-btn').bind('click', () => {
fir.reset();
});
},
victorycallback: (chessmanType) => {
let msg = chessmanType === fir.chessmanType.black ? '黑棋胜利' : '白棋胜利';
alert(msg);
fir.reset();
},
chess: (obj) => {
let $obj = $(obj);
if ($obj.attr('have-chess')) {
alert('不能下在此处');
return
}
let pos = {r: $obj.attr('data-r'), c: $obj.attr('data-c')};
if (fir.currentChessmanType === fir.chessmanType.black) {
$obj.append('<div class="chessman black"></div>');
fir.black_array.push(pos);
} else {
$obj.append('<div class="chessman white"></div>');
fir.white_array.push(pos);
}
$obj.attr('have-chess', fir.currentChessmanType);
fir.victory(fir.currentChessmanType, pos, fir.victoryCallback);
fir.swap();
},
swap: () => {
if (fir.currentChessmanType === fir.chessmanType.black) {
fir.currentChessmanType = fir.chessmanType.white;
} else {
fir.currentChessmanType = fir.chessmanType.black;
}
},
findInArray: (arr, obj) => {
for (let ele of arr) {
if (ele.c === obj.c && ele.r === obj.r) {
return ele;
}
}
return null;
},
getNearPos: (pos, line, direction) => {
let n_r = parseInt(pos.r);//行
let n_c = parseInt(pos.c);//列
if (line === fir.lineType.horizontal) {
if (direction === fir.direction.negative) {
return {r: n_r '', c: (n_c - 1) ''};
} else if (direction === fir.direction.positive) {
return {r: n_r '', c: (n_c 1) ''};
}
} else if (line === fir.lineType.vertical) {
if (direction === fir.direction.negative) {
return {r: (n_r 1) '', c: n_c ''};
} else if (direction === fir.direction.positive) {
return {r: (n_r - 1) '', c: n_c ''};
}
} else if (line === fir.lineType.leftSlash) {
if (direction === fir.direction.negative) {
return {r: (n_r 1) '', c: (n_c - 1) ''};
} else if (direction === fir.direction.positive) {
return {r: (n_r - 1) '', c: (n_c 1) ''};
}
} else if (line === fir.lineType.rightSlash) {
if (direction === fir.direction.negative) {
return {r: (n_r 1) '', c: (n_c 1) ''};
} else if (direction === fir.direction.positive) {
return {r: (n_r - 1) '', c: (n_c - 1) ''};
}
}
},
/***
* 获取落子后，连续棋子的个数
* 递归查询
*/
coiledSize: (arr, pos, line, direction, size) => {
let nearPos = fir.getNearPos(pos, line, direction);
let obj = fir.findInArray(arr, nearPos);
if (obj) {
size = size 1;
size = fir.coiledSize(arr, obj, line, direction, size);
}
return size;
},
victory: (chessmanType, pos, callback) => {
let arr;
if (chessmanType === fir.chessmanType.black) {
arr = fir.black_array;
} else {
arr = fir.white_array;
}
for (let lineTypeKey in fir.lineType) {
let type = fir.lineType[lineTypeKey];
let size_1 = fir.coiledSize(arr, pos, type, fir.direction.negative, 0);
if (size_1 >= 4) {
callback(chessmanType);
return;
}
let size_2 = fir.coiledSize(arr, pos, type, fir.direction.positive, 0);
if (size_2 >= 4) {
callback(chessmanType);
return;
}
if (size_1 size_2 >= 4) {
callback(chessmanType);
return;
}
}
},
reset: () => {
fir.white_array = [];
fir.black_array = [];
$('.chessman').remove();
$('.grid-area').removeAttr('have-chess');
}
}
fir.init();
</script>
</body>
</html>
在浏览器上运行一下，效果还不错吧
有兴趣的可以增加一个后台服务，实现在线实时对弈
有想看其他的小游戏，可以打在评论区[呲牙]
