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位置。