HTML5+JS 《五子飞》游戏实现（四）夹一个和挑一对

在第一章我们已经说了怎么才能“夹一个”以及怎样才能挑一对，但那毕竟只是书面上的，对码农来讲，我们还是用代码讲解起来会更容易了解。

为了更容易对照分析，我们先把路线再次贴出来：

// 可走的路线
this.lines = [
[ 0,  1,  2,  3,  4],
[ 5,  6,  7,  8,  9],
[10, 11, 12, 13, 14],
[15, 16, 17, 18, 19],
[20, 21, 22, 23, 24],
[ 0,  5, 10, 15, 20],
[ 1,  6, 11, 16, 21],
[ 2,  7, 12, 17, 22],
[ 3,  8, 13, 18, 23],
[ 4,  9, 14, 19, 24],
[ 0,  6, 12, 18, 24],
[ 4,  8, 12, 16, 20],
[ 2,  6, 10],
[ 2,  8, 14],
[10, 16, 22],
[14, 18, 22]
];

一、夹一个：

根据上面给出的有限路线中，要实现“夹一个”，首页这颗棋子的index得在[0，1，2...24]之中，我们循环搜索每条路线，只要找出符合条件的路线和位置就可把对方的棋子给吃掉。

首先我们找出棋子的目标位置是在哪条路线中：

int index = $.inArray(chess.point.index, this.lines[i]);//chess被移动的棋子，下同
if(index!=-1)//...

然后再找出该条线上能被吃掉的棋子是哪一个。如果按照水平方向来看，被吃掉的棋子有可能在左边，也有可能在右边，如果在左边，那么该方还有一个棋子应该在被吃掉的棋子的左边：

var p1 = index > 1 ? this.chesses[this.lines[i][index - 1]].player : Player.None;
if (p1 != Player.None && p1 != chess.player) {
if (this.chesses[this.lines[i][index - 2]].player == chess.player) {
//...找到符合条件的路线

同理，如果被吃掉的棋子在右边，那么该方还有一个棋子应该在被吃掉的棋子的右边:

var p2 = index < this.lines[i].length - 2 ? this.chesses[this.lines[i][index + 1]].player : Player.None;
if (p2 != Player.None && p2 != chess.player) {
if (this.chesses[this.lines[i][index + 2]].player == chess.player) {
//...找到符合条件的路线

不过，因为按照规则，能夹对方棋子的同时，该条路径上仅且只能有三颗棋子，已方两颗，对方一颗，其他位置上是不能有棋子存在的：

对于在左边的情况：

var bfind = true;// 是否找到能被吃的棋子
for (j = 0; j < index - 2; j++) {
if (this.chesses[this.lines[i][j]].player != Player.None) { bfind = false; break; }
}
if (!bfind) return;
bfind = true;
for (j = index + 1; j < this.lines[i].length; j++) {
if (this.chesses[this.lines[i][j]].player != Player.None) { bfind = false; break; }
}
if (!bfind) return;
chessArray.push([this.chesses[this.lines[i][index - 1]]]);// 找到了

对于在右边的情况：

var bfind = true;
for (j = 0; j < index; j++) {
if (this.chesses[this.lines[i][j]].player != Player.None) { bfind = false; break; }
}
if (!bfind) return;
bfind = true;
for (j = index + 3; j < this.lines[i].length; j++) {
if (this.chesses[this.lines[i][j]].player != Player.None) { bfind = false; break; }
}
if (!bfind) return;
chessArray.push([this.chesses[this.lines[i][index + 1]]]);// 找到了

对于找到可以被夹掉的棋子我们记录下来，存到 chessArray 里面，以便进行其他操作。

二、挑一对：

同样，我们先找出棋子在哪条路径中：

index = $.inArray(chess.point.index, this.lines[i]);
if (index > 0 && index < this.lines[i].length - 1) {

然后相对于夹一个来说简单很多，我们只要找出该棋子左右相邻的两个棋子是对方的棋子，且该条直线上其他位置都是空位就行了。

先找出左右相邻的两颗棋子：

var p1 = this.chesses[this.lines[i][index - 1]].player;
var p2 = this.chesses[this.lines[i][index + 1]].player;
if (p1 != chess.player && p2 != chess.player && p1 != Player.None && p2 != Player.None) {

再判断其他位置是空位：

var bfind = true;
for (j = 0; j < index - 1; j++) {
if (this.chesses[this.lines[i][j]].player != Player.None) { bfind = false; break; }
}
if (!bfind) return;
bfind = true;
for (j = this.lines[i].length - 1; j > index + 1; j--) {
if (this.chesses[this.lines[i][j]].player != Player.None) { bfind = false; break; }
}
if (!bfind) return;
chessArray.push([this.chesses[this.lines[i][index - 1]], this.chesses[this.lines[i][index + 1]]]);// 找到了

现在实现了两个基本的函数，下一章里沃特再跟大家分析移动棋子。本章实现的两个函数归纳如下：

    // 是否可“挑一对”
this.canCarry = function (chess) {
var p1, p2, j, index, bfind, chessArray = [];
for (var i = 0; i < this.lines.length; i++) {
index = $.inArray(chess.point.index, this.lines[i]);
if (index > 0 && index < this.lines[i].length - 1) {
p1 = this.chesses[this.lines[i][index - 1]].player;
p2 = this.chesses[this.lines[i][index + 1]].player;
if (p1 != chess.player && p2 != chess.player && p1 != Player.None && p2 != Player.None) {
bfind = true;
for (j = 0; j < index - 1; j++) {
if (this.chesses[this.lines[i][j]].player != Player.None) { bfind = false; break; }
}
if (!bfind) continue;
bfind = true;
for (j = this.lines[i].length - 1; j > index + 1; j--) {
if (this.chesses[this.lines[i][j]].player != Player.None) { bfind = false; break; }
}
if (!bfind) continue;
chessArray.push([this.chesses[this.lines[i][index - 1]], this.chesses[this.lines[i][index + 1]]]);
}
}
}
return chessArray.length == 0 ? false : chessArray;
};
// 是否可“夹一个”
this.canClip = function (chess) {
var p1, p2, j, index, bfind, chessArray = [];
for (var i = 0; i < this.lines.length; i++) {
index = $.inArray(chess.point.index, this.lines[i]);
if (index != -1) {
p1 = index > 1 ? this.chesses[this.lines[i][index - 1]].player : Player.None;
p2 = index < this.lines[i].length - 2 ? this.chesses[this.lines[i][index + 1]].player : Player.None;
if (p1 != Player.None && p1 != chess.player) {
if (this.chesses[this.lines[i][index - 2]].player == chess.player) {
bfind = true;
for (j = 0; j < index - 2; j++) {
if (this.chesses[this.lines[i][j]].player != Player.None) { bfind = false; break; }
}
if (!bfind) continue;
bfind = true;
for (j = index + 1; j < this.lines[i].length; j++) {
if (this.chesses[this.lines[i][j]].player != Player.None) { bfind = false; break; }
}
if (!bfind) continue;
chessArray.push([this.chesses[this.lines[i][index - 1]]]);
}
} else if (p2 != Player.None && p2 != chess.player) {
if (this.chesses[this.lines[i][index + 2]].player == chess.player) {
bfind = true;
for (j = 0; j < index; j++) {
if (this.chesses[this.lines[i][j]].player != Player.None) { bfind = false; break; }
}
if (!bfind) continue;
bfind = true;
for (j = index + 3; j < this.lines[i].length; j++) {
if (this.chesses[this.lines[i][j]].player != Player.None) { bfind = false; break; }
}
if (!bfind) continue;
chessArray.push([this.chesses[this.lines[i][index + 1]]]);
}
}
}
}
return chessArray.length == 0 ? false : chessArray;
};

View Code

HTML5+JS 《五子飞》游戏实现（一）规则

HTML5+JS 《五子飞》游戏实现（二）路线分析和资源准备

HTML5+JS 《五子飞》游戏实现（三）页面和棋盘棋子

HTML5+JS 《五子飞》游戏实现（五）移动棋子

HTML5+JS 《五子飞》游戏实现（六）鼠标响应与多重选择