HarmonyOS - 方舟開發框架ArkUI基于JSAPI實現五子棋游戲
前言
最近逛社區發現已經有童鞋實現了java版的五子棋了，作為前端開發人員，怎能沒有js版的五子棋呢，所以趕緊擼起來。
效果展示
實現過程
一、 繪制棋盤
首先我們使用css繪制棋盤，繪制一個14*14的正方形格子棋盤，但是需要注意，因為我們落子是落在四個格子之間的交界點上的，而不是落在格子里的，所以怎辦呢?我們可以先繪制一個15*15的輔助正方形格子，然后再在其中間繪制一個14*14,這樣落棋在15*15的格子里，而在14*14的格子里就可以看到落棋是在交界點里。
首先繪制一個15*15的正方形格子。
2. 然后再在其中間繪制一個14*14的正方形格子，這樣的話，棋子就繪制在15*15的格子里，而在14*14的棋盤里就顯示是在格子交界點上了。
最后把15*15的邊距去掉，就得到一個正常的14*14的棋盤了，怎樣是不是很漂亮。
做過前端開發的同學知道其實不需要這么麻煩的，直接繪制一個14*14的格子就可以了，可以使用css的::before和::after選擇器來繪制格子線條。一開始也想用這么這樣處理的，但是發現在目前好像還沒集成這兩個選擇器進來，這個后續估計會更新，敬請期待。
二、實現落棋功能
首先我們在data聲明一個arr為15*15的空數組，也就是長度為225的空數組。數組值只能更新為：
- 1：存放黑棋。
- -1：存放白棋。
在標簽里定義兩個class來繪制黑棋和白棋。
<div
class="li{{item == '1' ? 'black' : ''}} {{item == '-1' ? 'white': ''}}"
for="{{(index,item) in arr}}"
tid="item"
onclick="play(index)"
></div>
在點擊play落棋時，傳入當前落棋的位置。
play(e){
// 針對數組內的數據修改，請使用splice方法生效數據綁定變更
this.arr.splice(e,1,'1');
}
上面代碼傳入1，則點擊顯示黑棋，看看效果怎樣。
當然到這里還不行，需要做交換走棋，黑棋走完，到白棋走，并且走過的位置不允許再走棋。
在data定義holder為當前持棋者：
- 1：存放黑棋，默認持黑棋先走。
- -1：存放白棋。
play(e){
if(this.arr[e] == '1' || this.arr[e] == '-1'){
console.log('該處已經有棋了');
return false;
}
// 針對數組內的數據修改，請使用splice方法生效數據綁定變更
this.arr.splice(e,1,this.holder);
// 交換走棋
this.holder = this.holder == '1' ? '-1' : '1';
},
三、計算贏棋方式
我們都知道要贏棋就得同色5顆棋子連成一條線，包括橫向，豎向，斜向，斜向左邊和斜向右邊四種方式。那么我們就要把這幾種方式拆分出來一一計算統計。
通過上面的序號，我們不難發現幾個規律。
1、橫向贏棋方式
橫向贏棋方式是五個棋子每兩兩相差一個數值，所以每相鄰棋子就是一個+1和-1的過程。
2、豎向贏棋方式
豎向贏棋方式上下連成一排，我們知道一行只有15個格子，每個棋子都相差15數值，所以每相鄰棋子之間都是+15和-15的過程。
3、左斜向贏棋
左斜方向通過觀察不難發現每兩兩棋子之間相差+14和-14。
4、右斜向贏棋
右邊斜方向也可以看出每相鄰棋子之間相差+16和16。
四、實現贏棋計算
通過上面一比較，是不是瞬間就覺得其實沒那么難了呢，我們只要計算好每次落棋的序號和之前落棋的序號進行一對比，只要滿足條件的五個棋子，就贏棋了。
實現思路： 以黑棋、橫向為例子，通過遞歸算法，通過計算+1 || -1是否都有黑棋的記錄，有則記錄累計一次，每次計算完成，則去判斷當前累計次數是否等于5，如果不是，則還沒有贏，如果為5次，則說明贏棋了。
實現代碼如下：
//id: 當前棋子的序號 d: 計算方式，比如橫向是 +1 和 -1，arr是累計下來的序號結果。
compute(id,d,arr){
id = parseInt(id);
if(this.arr[id + d] && this.arr[id + d] == this.holder){
arr.push(id);
this.compute(id + d, d, arr);
} else{
arr.push(id);
}
},
判斷是否贏棋的方法：
// 判斷是否贏了
getResult(arr){
if(arr.length > 5){
console.log(this.holder + '贏棋'); //this.holder是定義的當前下棋的一方
// 累計清0
arr.length = 0;
} else {
// 累計清0
arr.length = 0;
}
},
我們在每次點擊下棋的時候，都調用一次統計累計次數方法和計算贏棋的方法。
// 橫向贏方法
this.compute(e, 1, this.arr1); //arr1是定義好的累計次數多數組
this.compute(e, -1, this.arr1);
this.getResult(this.arr1);
結合上面計算方式，我們其他的贏棋方式一樣可以這樣統計來計算。
// 點擊下棋方法
play(e){
if(this.isEnd) return;
if(this.arr[e] == '1' || this.arr[e] == '-1'){
console.log('該處已經有棋了');
return false;
}
// 針對數組內的數據修改，請使用splice方法生效數據綁定變更
this.arr.splice(e,1,this.holder);
// 橫向贏方法
this.compute(e, 1, this.arr1);
this.compute(e, -1, this.arr1);
this.getResult(this.arr1);
// 豎向贏方法
this.compute(e, 15, this.arr1);
this.compute(e, -15, this.arr1);
this.getResult(this.arr1);
//右斜贏方法
this.compute(e, 14, this.arr1);
this.compute(e, -14, this.arr1);
this.getResult(this.arr1);
// 左斜贏方法
this.compute(e, 16, this.arr1);
this.compute(e, -16, this.arr1);
this.getResult(this.arr1);
// 交換走棋
this.holder = this.holder == '1' ? '-1' : '1';
下面看看效果。
到這里結束了嗎?不，還沒結束，這里還存在一些bug問題，比如說我們橫向的時候是通過計算兩棋子之間是否存在+1和-1的關系，但是如果兩個棋子是14，15呢?這時候是已經換行了，顯然是不能成立的，但是計算結果這種方式是成立的。所以我們要解決掉這個問題，包括斜向。
五、優化計算方法
其實無非兩種結果，一種就是換行了，+1的時候換行到第一列數值了，-1的時候換行到最后一列數值了，那么我們把第一列和最后一列單獨拉出來，進行比較。
- 是否在+1、-14，+16的數值是否在第一列存在，如果存在就不進行累計。
- 是否在-1、+14、-16的數值是否在最后一列存在，如果存在就不進行累計。
- 這里為什么沒有+15和-15呢，因為豎向不存在這個問題。
下面我們來用代碼實現。
// id: 為原id+d, d: 為計算方式。
scree(id,d){
if((d == 1 && this.colOne.indexOf(id) > -1)
|| (d == -1 && this.colEnd.indexOf(id) > -1)
|| (d == 14 && this.colEnd.indexOf(id) > -1)
|| (d == -14 && this.colOne.indexOf(id) > -1)
|| (d == 16 && this.colOne.indexOf(id) > -1)
|| (d == -16 && this.colEnd.indexOf(id) > -1)){
return false;
}
return true;
},
最后，我們在計算判斷的時候加上這個判斷條件即可 this.scree(id+d,d)。
compute(id,d,arr){
id = parseInt(id);
if(this.arr[id + d] && this.arr[id + d] == this.holder && this.scree(id+d,d)){
arr.push(id);
this.compute(id + d, d, arr);
} else{
arr.push(id);
}
},
最終的效果
源碼地址：
https://gitee.com/yango520/gobang
總結
該方法是使用div+css+js實現的雙人對戰游戲，在使用css的時候發現相比web端的屬性，還是少了很多，比如繪制棋盤的時候想用::before和::after選擇器來繪制，但是發現當前還沒有這個屬性，還有想繪制一個好看有弧度高光的棋子，想使用內陰影實現，但是目前也還并不支持內陰影。不過相信后續會更新，這樣web前端開發上手HarmonyOS JSAPI就容易多了。
