基于Blazor写一个简单的五子棋游戏

写这个五子棋游戏，其实主要目的是想尝试一下微软新作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连子
• 能走出2连子

策略

• 斜线分数权重会高于直线。
• 计算空位分数时，也会计算一个敌方在此位置的分数，如果敌方分数高于己方，会优先抢占该位置

这里对分数的计算，还需继续调优。策略部分还应该加上跳子等情况。有时间再弄吧。

其他处理，

如战场清理、谁先手等细节，这些都较为简单。

   chess = new int[19,19];//重新实例化一下，即可清除棋盘所有棋子。

演示地址及源码

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

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