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

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

    // 可走的路线
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;
};

HTML5+JS 《五子飞》游戏实现(一)规则

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

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

HTML5+JS 《五子飞》游戏实现(五)移动棋子

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

HTML5+JS 《五子飞》游戏实现(四)夹一个和挑一对的更多相关文章

  1. HTML5+JS 《五子飞》游戏实现(八)人机对战

    要想实现人机对战,就必须让电脑自动下棋,而且要知道自动去查找对方的棋子,看看有没有可以挑一对的,有没有可以夹一个的,这样下起来才有意思. 当电脑用户下完棋后,电脑应立即搜索用户的棋子,然后如果没有被吃 ...

  2. HTML5+JS 《五子飞》游戏实现(七)游戏试玩

    前面第一至第六章我们已经把<五子飞>游戏的基本工作都已经讲得差不多了,这一章主要是把所有的代码分享给大家,然后小伙伴们也可以玩一玩. 至于人机对战的我们放到后面讲进行分析. 试玩地址:ht ...

  3. HTML5+JS 《五子飞》游戏实现(六)鼠标响应与多重选择

    上一章我们提到了如果有多条线上的棋子可以被吃掉,那么游戏需要提示用户,让用户选择吃哪条线上的.另外因为是网页游戏,所以一定要实现鼠标单击棋子可以进行操作. 当鼠标移动棋子上面后,切换鼠标指针为手形,移 ...

  4. HTML5+JS 《五子飞》游戏实现(五)移动棋子

    上一章 我们知道了怎么处理两个重要的吃棋动作,想要吃对方的棋子,首先得移动自己的棋子.现在里沃特跟大家分享分享,怎么移动棋子. 想要移动棋子,在页面上,首先要点击一下要移动的棋子,然后再点击一下目标位 ...

  5. HTML5+JS 《五子飞》游戏实现(三)页面和棋盘棋子

    前面两节,我们已经对<五子飞>有个初步的认识,对走棋路线也有了基本的了解,现在里沃特继续跟大家分享HTML页面,另外把棋盘棋子也画出来. 演示地址:http://www.lyout.com ...

  6. HTML5+JS 《五子飞》游戏实现(一)规则

    很久没写文章了,这个游戏其实已经写了有段时间了,一直没有完善,赶在新年之际,分享给大家. 该<五子飞>游戏,不是平常大家所说的<五子棋>,这个玩法简单,是我们老家儿时常玩的一种 ...

  7. HTML5+JS 《五子飞》游戏实现(二)路线分析和资源准备

    上一节 里沃特与我们分享了<五子飞>的下棋规则,可能有些伙伴看得不清楚,像我们码农还是看到代码比较靠谱.下面就把可以走棋的路线跟大家说一下. 假设从左上角开始,以0开始编号,往右数(没看第 ...

  8. 用html5+js实现掌机游戏赛车demo

    最近无聊,用html5+js做了一个以前玩过的掌机赛车游戏,顺便学习一下画布的api以及巩固一下js基础. 游戏界面,没做什么美化. 游戏规则:游戏界面分为三列,黑色方块随机落下,红色方块可以在三列自 ...

  9. 100行JS实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

随机推荐

  1. 【Beta版本】冲刺-Day5

    队伍:606notconnected 会议时间:12月13日 目录 一.行与思 二.站立式会议图片 三.燃尽图 四.代码Check-in 一.行与思 张斯巍(433) 今日进展:继续修改界面及图标设计 ...

  2. js搜索输入关键词

    function getInput(val,a){ var id = 'ser-key'; if(a=='focus'){ document.getElementById(id).value=''; ...

  3. H5图片裁剪升级版(手机版)

    前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更 ...

  4. Debian - 设置MYSQL开机启动

    设置MYSQL 首先拷贝mysql.server到/etc/init.d目录下命名为mysql # cp /自己的安装目录/mysql/share/mysql/mysql.server /etc/in ...

  5. Selenium WebDriver + Grid2 + RSpec之旅(三) ----入门小例子

    Selenium WebDriver + Grid2 + RSpec之旅(三) ----入门小例子 第一个例子都是比较简单的博客园登录界面,就像学习编程语言时候都是从Hello,World!开始. 1 ...

  6. Oracle11g环境设置-windows环境

    新建环境变量(系统变量),变量名:ORACLE_HOME 变量值:E:\app\Administrator\product\11.2.0\dbhome_1 新建环境变量(系统变量),变量名:ORACL ...

  7. Qt之Windows资源文件(.rc文件)

    简述 在Windows下使用Qt时,通常会用到Windows的资源文件 - 为exe设置信息,其中包括:文件说明.产品名称.产品版本.版权等信息... 由于是Windows平台相关的东西,Qt助手中对 ...

  8. 数据库关于group by 两个或以上条件的分析

    首先group by 的简单说明:    group by 一般和聚合函数一起使用才有意义,比如 count sum avg等,使用group by的两个要素:    (1) 出现在select后面的 ...

  9. css怎么让页面上的内容不能被选中

    body{     -webkit-user-select:none;     -moz-user-select:none;     -ms-user-select:none;     user-se ...

  10. (转)ASP.NET MVC 4 RC的JS/CSS打包压缩功能

    转自:http://www.cnblogs.com/shanyou/archive/2012/06/22/2558580.html 打包(Bundling)及压缩(Minification)指的是将多 ...