寫這個五子棋游戲，其實主要目的是想嘗試一下微軟新作Blazor。Blazor對於那些搞.NET的程序員，又想做一些前端工作，真的挺友好，不用一句JS就可搞定前端交互，美哉。現在已經有很流行的前端框架，如vue、react、angular等，微軟出這個blazor框架，目前觀測下來，在國外還滿火的，國內就沒什么聲響了，一方面.net在國內影響本來也不大，另一方面搞.net的也怕被微軟又給坑了，所以都是一種觀望狀態。
扯遠了，回到正題，五子棋游戲，本質上還是個二維數組，值0表示空位，1表示黑子，2表示白子。
int[,] chess = new int[19,19];
chess[1,1] = 1;//黑子
chess[1,1] = 2;//白子
所有操作也是對這個二維數組進行搜索或賦值。實踐起來差不多有四步。
畫棋盤棋子
棋盤棋子由純CSS編寫，棋盤由 19x19個 div 組成。每個div的:after :before 構成橫豎兩條線條居中。棋子就是一個圓，加點徑向漸變、陰影，看起來也差不多了。
如何判贏
當用戶在棋盤落子后，其實就是 int[x,y] = 1。基於此坐標，在橫豎撇揦4個方向上，找是否有五個及以上的連子。如果找到就判贏，此局結束。下邊以橫向為例。
//橫方向
var i = 1;//向兩邊搜索次數
var score = 1;//搜到的連子
var rightValid = true;//是否還能往右搜索
var leftValid = true;//是否還能往左搜索
while (i <= 5)
{
var right = cell + i;//往右
var left = cell - i;//往左
if (rightValid && right < 19)//如果還能往右且沒超出邊界
{
if (chess[row, right] == chesspiece)//如果是連子
{
score++;//加1
if (score >= 5) //如果已經超過4個了，就判贏
return true;
}
else //碰到空位或敵方棋子，中斷搜索
rightValid = false;
}
if (leftValid && left >= 0) //如果還能往左且沒超出邊界
{
if (chess[row, left] == chesspiece)
{
score++; //加1
if (score >= 5)
return true;
}
else //碰到空位或敵方棋子，中斷搜索
leftValid = false;
}
i++;
}
如何實現電腦走棋
走棋采用了遍歷計分方式，即計算每一個空位的分數，計算規則如下，分數由高到底。
- 能走死對方
- 能走出活4連子(左右無檔子)
- 能走出33
- 能走出死4連子(其中一邊被檔住)
- 能走出活3連子
- 能走出死3連子(其中一邊被檔住)
- 能走出2連子
策略
- 斜線分數權重會高於直線。
- 計算空位分數時，也會計算一個敵方在此位置的分數，如果敵方分數高於己方，會優先搶占該位置
這里對分數的計算，還需繼續調優。策略部分還應該加上跳子等情況。有時間再弄吧。
其他處理，
如戰場清理、誰先手等細節，這些都較為簡單。
chess = new int[19,19];//重新實例化一下，即可清除棋盤所有棋子。
演示地址及源碼
演示地址 ： https://ut32.com/gobang/game
Github庫 ： https://github.com/ut32/gobang/