寫這個五子棋遊戲，其實主要目的是想嘗試一下微軟新作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];//重新例項化一下，即可清除棋盤所有棋子。
 

演示地址及原始碼

演示地址 ： http://chess.ut32.com/

Github庫 ： https://github.com/ut32/chess/