Blazor開發小遊戲？趁熱打鐵上！！！

Blazor開發小遊戲？趁熱打鐵上！！！

Blazor上線1天了，開發上手真舒服，再上一個工具+幾個小遊戲吧。

最後更新 2023/6/23 下午11:50
沙漠尽头的狼
預計閱讀 10 分鐘
分類
Blazor
標籤
.NET C# Blazor Dotnet9

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

網站使用Blazor重構上線一天了，用Blazor開發是真便捷，空閒時間查查GPT和GitHub，又上線了一個正規表達式線上驗證工具和幾個線上小遊戲，比如井字棋遊戲、踩地雷等。

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

1. 新增線上小工具

1.1. 正規表達式線上驗證工具

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

這個範例示範了如何使用Blazor Server開發一個簡單的正規表達式線上驗證工具。使用者可以輸入正規表達式和測試字串，並點擊「測試」按鈕以測試正規表達式是否匹配測試字串。此外，這個範例還提供了10幾個常用的正規表達式測試，使用者可以點擊連結載入測試資料並自動填入正規表達式和測試字串。

上圖的標註簡單說明：

  1. 常用正規表達式：點擊自動在下方填入對應的正規表達式（標註2）、測試文字（標註3），點擊【測試】（標註4）即可驗證
  2. 正規表達式：填入需要使用的正規表達式
  3. 測試文字區域：將需要驗證提取的字串填寫在這裡
  4. 【測試】按鈕：點擊應用上面的正規表達式（標註2）並提取測試文字區域（標註3）內容，將匹配結果顯示在下方（標註5）
  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

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

此遊戲高度還原早期Windows版本踩地雷，代碼較多，抄自開源專案：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
繼續探索

延伸閱讀

更多文章
同分類 / 同標籤 2023/6/23

Dotnet9網站回歸Blazor重構，訪問速度飛快，互動也更便利了！

本來站長本著體驗.NET 8 Blazor Web App，在Razor Pages中添加了Razor元件，但目前該混合模式Razor元件無法互動，頁面還出現了重新連線灰化UI，乾脆直接用Blazor Server重構，經過幾天的奮戰，網站前台已經用Blazor Server完全取代Razor Pages，煩人的重新連線也解決了，現在訪問網站飛快，不知道是不是錯覺，個人感覺很好。

繼續閱讀
同分類 / 同標籤 2024/2/29

Winform中也可以這樣做資料展示

在做winform開發的過程中，經常需要做資料展示的功能，之前一直使用的是gridcontrol控制項，今天想透過一個範例，跟大家介紹一下如何在winform blazor hybrid中使用ant design blazor中的table元件做資料展示。

繼續閱讀
同分類 / 同標籤 2024/2/29

Winform的介面也可以變好看？

前幾天跟大家介紹了在winform中使用blazor hybrid，而且還說配上blazor的UI可以讓我們的winform程式設計的更加好看，接下來我想以一個在winform blazor hybrid中繪圖的範例來進行說明，希望對你有所幫助。

繼續閱讀
友情連結
林德熙 YouZack WTM 工具小站 可乐不加冰 加菲的部落格 Furion 懒得勤快 迷恋自留地 52ABP dotnet全栈開發 程序设计实验室 江湖人士 King-AbpVnext-Pro