基于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连子
  • 能走出死3连子(其中一边被档住)
  • 能走出2连子

策略

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

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

其他处理,

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

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

演示地址及源码

演示地址 : https://ut32.com/gobang/game

Github库 : https://github.com/ut32/gobang/

posted @ 2020-03-03 15:16  CreekCloud  阅读(2046)  评论(22编辑  收藏