ブレイザーは小さなゲームを開発する？熱いうちに鉄を!!!

こんにちは、私は砂漠の果ての狼です。

网站使用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

プレイヤーはボード上のマスをクリックしてチェスをすることができるシンプルなチェスゲームです。ゲームは、プレイヤーが勝ったか引き分けたかを確認し、ゲーム終了時にメッセージを表示します。“Start New Game”ボタンをクリックしてゲームを再開できます。

コードは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. 最後の言葉だ

繰り返しますが、サイトの小さなゲームはテストのためだけで、サーバーモードはゲーム機能の開発をお勧めしません。

誰もが必要なツール歓迎メッセージ、ウェブマスターは追加を検討します。

今日はこれを共有し、皆さんの健康を祈ります。

Webサイトhttps//dotnet9.com/
Webサイトソースhttps//github.com/dotnet9/Dotnet9
.NET版本： .NET 8.0.0-preview.5.23280.8
WeChat技術グループ：ウェブマスター WeChat（codewf）を追加し、“グループに入る”2つの単語をメモしてください
QQ技術グループ：77 1992，30 0

ブレイザーは小さなゲームを開発する？熱いうちに鉄を!!!

1. オンラインガジェットの追加

1.1.正規表現のオンライン検証ツール

2. オンラインミニゲーム。

2.1.数字を当てるゲーム

2.2.井の字チェスゲーム

2.3.オンライン地雷除去ゲーム

3. 最後の言葉だ

延伸阅读

Dotnet9ウェブサイトはBlazorリファクタリングに戻り、アクセス速度が速く、インタラクションが便利です。

なぜ私のブログはBlazorに戻るのか？

Winformでもデータを表示できます。

Winformのインターフェースも良く見えますか？