JavaScript中国象棋程序（1）

“JavaScript中国象棋程序” 这一系列教程将带你从头利用JavaScript编写一个中国象棋程序。这篇经验是教程的第1节。这一系列共有9个部门。

0、JavaScript中国象棋程序（0）- 媒介

1、JavaScript中国象棋程序（1）- 界面设计

2、JavaScript中国象棋程序（2）- 校验棋子走法

3、JavaScript中国象棋程序（3）- 电脑主动走棋

4、JavaScript中国象棋程序（4）- 极大极小搜刮算法

5、JavaScript中国象棋程序（5）- Alpha-Beta搜刮

6、JavaScript中国象棋程序（6）- 降服程度线效应、查抄反复场合排场

7、JavaScript中国象棋程序（7）- 置换表

8、JavaScript中国象棋程序（8）- 进一步优化

东西/原料

计较机
JavaScript中国象棋程序（1）

1.1、棋盘暗示

1
这一节我们设计图形界面，显示初始化棋局。当点击某棋子时，弹窗提醒所点击的具体棋子。结果如下：
2
中国象棋有10行9列，很天然地想到可以用10×9矩阵暗示棋盘。事实上，我们利用16×16矩阵来暗示一个扩充了的虚拟棋盘。如图所示，灰色部门为真实棋盘，置于虚拟棋盘之中。这么做可以快速判定棋子是否走出鸿沟。例如象沿田字走，若是走到真实棋盘之外的虚拟棋盘中，申明走法不正当。
3
轻易想到利用二维数组暗示16×16矩阵，这样棋盘上的一个位置需要两个变量暗示。一个走法包罗起点和终点，就需要四个变量。若是利用长度为256的一维数组暗示，一个位置只需一个变量，这就可以削减计较量。是以用一维数组暗示16×16矩阵。一维矩阵和二维矩阵之间的转换也很简单:此中，sq & 15是经由过程位运算取余，与sq % 16成果不异。
4
再利用一个辅助数组，标识虚拟棋盘中，哪些位置属于真实棋盘：
5
要判定某位置是否在真实棋盘，可利用函数：

1.2、棋子暗示

1
利用整数暗示棋子：
2
棋子这样暗示，可以快速判定某棋子属于红方仍是黑方，如下表所示：
可以看出：
红方棋子 & 8 = 1
黑方棋子 & 16 = 1

1.3、字符串暗示场合排场

1
利用数组暗示场合排场，程序处置起来很便利，可是再网上传递棋局很不便利。我们可以用一行字符串暗示一个场合排场，这就是FEN格局串，一种利用ASCII码字符描述国际象棋场合排场的尺度，当然也可应用于中国象棋。中国象棋的初始场合排场可暗示为：
rnbakabnr/9/1c5c1/p1p1p1p1p/9/9/P1P1P1P1P/1C5C1/9/RNBAKABNR w - - 0 1
（1）、红色区域，暗示棋盘结构，小写暗示黑方，大写暗示红方。一个字母暗示一个棋子，对应关系如下。
2
至于为什么马不消H（horse），象不消E（elephant），这是为了与国际象棋相对应。若是没有棋子，则用数字暗示出相邻持续的空位数。中国象棋共有十行，每行都用一个字符串暗示，行间利用正斜杠朋分。例如：
rnbakabnr暗示：
3
1c5c1暗示：
4
（2）、绿色区域，暗示轮到哪一方走子，“w”暗示红方，“b”暗示黑方。(没有效r暗示红方，我想也是为了与国际象棋对应吧，究竟结果国际象棋是口角两色。)
（3）、深紫色区域，在中国象棋中没有意义，始终用“-”暗示。（4）、紫红色区域，在中国象棋中没有意义，始终用“-”暗示。
（5）、蓝色区域，暗示两边没有吃子的走棋步数(半回合数)，凡是该值达到120就要判和(六十回合天然限着)，一旦形当作场合排场的上一步是吃子，这里就标识表记标帜“0”。
（6）、棕色区域，暗示当前的回合数。
我们的程序就是利用FEN串初始化棋局的，这就涉及到了将FEN串转化为一维棋局数组。临时不考虑哪方走子，只解析红色部门，伪代码如下：

1.4、棋盘前端设计思绪

1
因为棋盘有90个交叉点，我们把棋盘划分为的90个小正方形区域，交叉点是小正方形的中间。每个区域城市界说一个img标签。
2
上图利用红色方框，标识出了4个小正方形区域。
这些img标签有两个感化：
（1）、显示棋子图片
若是某个区域存在棋子，就会显示响应的棋子图片；不然，显示一张透明图片（也就是oo.gif）。
（2）、响应点击事务
每个img标签城市绑心猿意马onmousedown事务。点击分歧的img标签时，会传递分歧的参数给响应函数，这样就知道点击的具体是哪个区域了。

1.5、焦点代码申明

1
本节的代码可以在 Github 下载，也可以直接clone
git clone -b step-1 https://github.com/Royhoo/write-a-chinesechess-program
程序中界说了两个对象：Board和Position。Board暗示一个棋盘，本家儿要功能是初始化棋局，显示棋盘、棋子，响应棋盘上的点击事务。Position存储了一维棋局数组，并界说了良多对该数组进行操作的方式。
Board对象实例化的代码位于index.html中。
经由过程prototype属性，我们为这两个对象添加了良多的属性和方式。
2
Board的本家儿要属性和方式：
（1）、pos
这是Position对象的一个实例。
（2）、flushBoard()
刷新棋盘，也就是从头显示棋盘上的棋子。
（3）、drawSquare(sq)
显示sq位置的棋子图片。若是该位置没棋子，则显示一张透明的图片。
（4）、clickSquare(sq_)
点击棋盘的响应函数。点击棋盘（棋子或者空位置），就会挪用该函数。sq_是点击的位置。
3
Position的本家儿要属性和方式：
（1）、squares
这就是一维棋局数组。
（2）、fromFen(fen)
经由过程FEN串初始化棋局，也就是将参数fen暗示的棋局，转化为一维棋局数组squares暗示的棋局。
（3）、addPiece(sq, pc)
将棋子pc添加进棋局中的sp位置。