blazor開發小遊戲？趁熱打鐵上!!!

大家好，我是沙漠盡頭的狼。

网站使用Blazor重构上线一天了，用Blazor开发是真便捷，空闲时间查查gpt和github，又上线一个正则表达式在线验证工具和几个在线小游戏，比如井字棋游戏、扫雷等。

下面簡單居間一下，看大家有沒有興趣或建議。

1. 新增在線小工具

1.1.正則表達式在線驗證工具

在線訪問：https://dotnet9.com/tools/regextester

這個示例演示了如何使用blazor server開發一個簡單的正則表達式在線驗證工具。用戶可以輸入正則表達式和測試字符串並單擊“測試”按鈕以測試正則表達式是否匹配測試字符串。此外，這個示例還提供了10幾個常用的正則表達式測試，用戶可以單擊連結加載測試數據並自動填充正則表達式和測試字符串。

上圖的標註簡單說明：

常用正則表達式：點擊自動在下方填充對應的正則表達式（標註2）、測試文本（標註3），點擊【測試】（標註4）即可驗證
正則表達式：填寫需要使用的正則表達式
測試文本區域：將需要驗證提取的字符串填寫在這裡
【測試】按鈕：點擊應用上面的正則表達式（標註2）並提取測試文本區域（標註3）內容，將匹配結果顯示在下方（標註5）
顯示匹配的結果

代碼一共123行，裡面有常用的正則表達式，簡單吧：

@page "/tools/regextester"
@using System.Text.RegularExpressions

<PageTitle>@_title</PageTitle>

<MApp>
    <h2 style="margin-bottom: 30px; margin-top: 10px; text-align: center;">@_title</h2>


    <h3>常用正则表达式测试</h3>

    <p>
        @foreach (var item in _regexPatterns)
        {
            <MButton Color="lime" Class="ma-2" OnClick='() => LoadTest(item.Pattern)'>@item.Name</MButton>
        }
    </p>

    <div>
        <MTextField Label="正则表达式" Type="string" TValue="string" @bind-Value="_regexPattern"/>
    </div>

    <div>
        <MTextarea BackgroundColor="grey lighten-2" Solo
                   Color="orange orange-darken-4" TValue="string" @bind-Value="_testString"
                   Label="测试字符串" Rows="8" style="font-size:12px;" RowHeight="15" AutoGrow/>
    </div>

    <div>
        <MButton Color="success" class="ma-2" OnClick="TestRegex">测试</MButton>
    </div>

    <div>
        @if (string.IsNullOrEmpty(_regexPattern) || string.IsNullOrEmpty(_testString))
        {
            <p>请输入正则表达式和测试字符串并单击“测试”按钮。</p>
        }
        else
        {
            <p>匹配结果: </p>
            <ul>
                @foreach (var match in _matches)
                {
                    <li>@match</li>
                }
            </ul>
        }
    </div>
</MApp>

@code {
        private const string? _title = "工具箱-正则表达式在线验证工具";
    private string? _regexPattern;
    private string? _testString;

    private string? _defaultString = @"下面是一些测试实例:
    history: v1.0 正则表达式测试工具上线
    v1.1 2023-06-23 刚刚上线
    1. 截至目前为止，最长域名后缀 .cancerresearch
    demo@qq.com
    dotnet9-9@vip.qq.com
    dotnet9-9@gmail.com
    demo@live.com
    127.0.0.1
    http://dotnet9.com/
    510112199901013592
    https://dotnet9.com/
    123456789012345
    18628035382
    13493532389
    川AAA008
    京B45698
    14:22:19";

    private readonly List<RegexItem> _regexPatterns = new()
    {
        new("匹配邮箱", @"\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}"),
        new("匹配中文", @"[\u4e00-\u9fa5]+"),
        new("匹配双字节字符（包含汉字）", @"[^\x00-\xff]+"),
        new("匹配时间（时:分:秒）", @"([01]?\d|2[0-3]):[0-5]?\d:[0-5]?\d"),
        new("匹配IP（IPV4）", @"\d{0,3}\.\d{0,3}\.\d{0,3}\.\d{0,3}"),
        new("匹配身份证", @"\d{17}[0-9Xx]|\d{15}"),
        new("匹配日期（年-月-日）", @"(([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29)"),
        new("匹配正整数", @"[1-9]\d*"),
        new("匹配负整数", @"-[1-9]\d*"),
        new("匹配手机号", @"(13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8}"),
        new("匹配车牌号", @"(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))")
    };

    private readonly List<string> _matches = new();

    private void TestRegex()
    {
        if (string.IsNullOrWhiteSpace(_regexPattern) || string.IsNullOrWhiteSpace(_testString))
        {
            return;
        }
        try
        {
            var regex = new Regex(_regexPattern);
            var match = regex.Match(_testString);
            _matches.Clear();
            while (match.Success)
            {
                _matches.Add(match.Value);
                match = match.NextMatch();
            }
        }
        catch
        {
            _matches.Clear();
        }
    }

    private void LoadTest(string pattern)
    {
        _regexPattern = pattern;
        _testString = _defaultString;
    }

    record RegexItem(string Name, string Pattern);

}

2. 上線在線小遊戲

這裡先說明，站長上線小遊戲，只是為了測試網站伺服器壓力，如果開發小遊戲，建議用客戶端模式（wasm），畢竟前者壓力在伺服器，後者在用戶那裡。

2.1.猜數字遊戲

在線訪問：https://dotnet9.com/games/guessing-numbers

遊戲開始時，會生成一個1到100之間的隨機數字作為目標數字。玩家需要通過輸入數字來猜測目標數字，系統會根據玩家的猜測給出相應的提示。如果玩家猜對了，遊戲結束，顯示恭喜信息，並提供開始新遊戲的按鈕。

這個遊戲簡單，代碼幾十行：

@page "/games/guessing-numbers"

<PageTitle>@_title</PageTitle>

<MApp>
    <h2 style="margin-bottom: 30px; margin-top: 10px; text-align: center;">@_title</h2>

    @if (_isGameOver)
    {
        <p>@_message</p>
        <p>游戏结束！</p>
        <p>
            <MButton Color="lime" Class="ma-2" OnClick='StartNewGame'>开始新游戏</MButton>
        </p>
    }
    else
    {
        <p>猜一个1到100之间的数字：</p>
        <p>
            <MTextField Label="数字" Type="string" TValue="int" @bind-Value="_guess"/>
        </p>
        <p>
            <MButton Color="success" class="ma-2" OnClick="CheckGuess">猜！</MButton>
        </p>
        <p>@_message</p>
    }
</MApp>


@code {
    readonly string? _title = "猜数字游戏";
    private int _targetNumber;
    private int _guess;
    private string? _message;
    private bool _isGameOver;

    protected override void OnInitialized()
    {
        StartNewGame();
    }

    private void StartNewGame()
    {
        var random = new Random();
        _targetNumber = random.Next(1, 101);
        _guess = 0;
        _message = "";
        _isGameOver = false;
    }

    private void CheckGuess()
    {
        if (_guess == _targetNumber)
        {
            _message = "恭喜你猜对了！";
            _isGameOver = true;
        }
        else if (_guess < _targetNumber)
        {
            _message = "猜小了！";
        }
        else
        {
            _message = "猜大了！";
        }
    }

}

2.2.井字棋遊戲

在線訪問：https://dotnet9.com/games/tictactoe

一個簡單的井字棋遊戲，玩家可以點擊棋盤上的方格來下棋。遊戲會檢查是否有玩家獲勝或者平局，並在遊戲結束時顯示相應的消息。玩家可以點擊“開始新遊戲”按鈕來重新開始遊戲。

代碼117行：

@page "/games/tictactoe"

<PageTitle>@_title</PageTitle>

<MApp>
    <h2 style="margin-bottom: 30px; margin-top: 10px; text-align: center;">@_title</h2>

    @if (_isGameOver)
    {
        <p>@_message</p>
        <p>游戏结束！</p>
        <MButton Color="lime" Class="ma-2" OnClick='StartNewGame'>开始新游戏</MButton>
    }
    else
    {
        <div style="text-align: center;">
            @for (var i = 0; i < 3; i++)
            {
                <div>
                    @for (var j = 0; j < 3; j++)
                    {
                        var i1 = i * 3 + j;
                        <MButton Color="lime" OnClick='() => MakeMove(i1)' Disabled='IsCellDisabled(i1)'>@_board[i1]</MButton>
                    }
                </div>
            }
        </div>
        <p>@_message</p>
    }
</MApp>

@code {
    readonly string? _title = "井字棋游戏";
    private string?[] _board = new string[9];
    private string _currentPlayer = "X";
    private string? _message;
    private bool _isGameOver;

    private void MakeMove(int index)
    {
        if (_board[index] != null || _isGameOver)
        {
            return;
        }
        _board[index] = _currentPlayer;
        if (CheckWin(_currentPlayer))
        {
            _message = $"玩家 {_currentPlayer} 获胜！";
            _isGameOver = true;
        }
        else if (_board.All(cell => cell != null))
        {
            _message = "平局！";
            _isGameOver = true;
        }
        else
        {
            _currentPlayer = _currentPlayer == "X" ? "O" : "X";
            if (_currentPlayer == "O")
            {
                MakeComputerMove();
            }
        }
    }

    private void MakeComputerMove()
    {
    // 简单的随机选择一个可用的方格来下棋
        var availableMoves = Enumerable.Range(0, 9).Where(i => _board[i] == null).ToList();
        var random = new Random();
        var randomIndex = random.Next(availableMoves.Count);
        var computerMove = availableMoves[randomIndex];
        _board[computerMove] = _currentPlayer;

        if (CheckWin(_currentPlayer))
        {
            _message = $"电脑获胜！";
            _isGameOver = true;
        }
        else if (_board.All(cell => cell != null))
        {
            _message = "平局！";
            _isGameOver = true;
        }
        else
        {
            _currentPlayer = _currentPlayer == "X" ? "O" : "X";
        }
    }

    private bool CheckWin(string player)
    {
    // 检查所有可能的获胜组合
        return (_board[0] == player && _board[1] == player && _board[2] == player) ||
               (_board[3] == player && _board[4] == player && _board[5] == player) ||
               (_board[6] == player && _board[7] == player && _board[8] == player) ||
               (_board[0] == player && _board[3] == player && _board[6] == player) ||
               (_board[1] == player && _board[4] == player && _board[7] == player) ||
               (_board[2] == player && _board[5] == player && _board[8] == player) ||
               (_board[0] == player && _board[4] == player && _board[8] == player) ||
               (_board[2] == player && _board[4] == player && _board[6] == player);
    }

    private bool IsCellDisabled(int index)
    {
        return _isGameOver || _board[index] != null;
    }

    private void StartNewGame()
    {
        _board = new string[9];
        _currentPlayer = "X";
        _message = null;
        _isGameOver = false;
    }

}

2.3.在線掃雷遊戲

在線訪問：https://dotnet9.com/games/minesweeper

在這個示例中，玩家需要點擊方格來揭開它們。如果玩家踩到地雷，遊戲結束。如果玩家揭開的方格周圍有地雷，方格上會顯示相應的數字，表示周圍的地雷數量。如果玩家成功揭開所有沒有地雷的方格，遊戲勝利。

此游戏高度还原早期Window版本扫雷，代码较多，抄自开源项目：https://github.com/jarDotNet/BlazorMinesweeper，如果对代码感兴趣可查看该开源项目，或阅读 Dotnet9网站关于扫雷部分代码：

3. 最後的話

再說一次哦，網站的小遊戲只是為了測試，server模式不建議開發遊戲類功能，這個交給client模式吧。

大家有什麼工具需求歡迎留言，站長有空會考慮加上。

今天分享到這，祝大家端午安康。

網站地址：https://dotnet9.com/
網站源碼：https://github.com/dotnet9/Dotnet9
.NET版本： .NET 8.0.0-preview.5.23280.8
微信技術群：添加站長微信（codewf），一定要備註【入群】2個字
qq技術群：771992300

blazor開發小遊戲？趁熱打鐵上!!!

1. 新增在線小工具

1.1.正則表達式在線驗證工具

2. 上線在線小遊戲

2.1.猜數字遊戲

2.2.井字棋遊戲

2.3.在線掃雷遊戲

3. 最後的話

延伸阅读

dotnet9網站回歸blazor重構，訪問速度飛快，交互也更便利了!

我的博客網站為什麼又回歸blazor了

winform中也可以這樣做數據展示

winform的界面也可以變好看？