C# 08.使用 Blazor 构建井字棋游戏

让我们使用Blazor，C＃和.NET Core构建经典的儿童游戏！

环境要求：

我们需要下载最新版的 Visual Studio 2019，并将其更新到最新版（比如16.6版本）

创建项目：

• 打开Visual Studio 2019,文件->新建->项目

• 选择C# - Web,然后选择Blazor应用

• 命名我们的项目：BlazorWasmTicTacToe，然后下一步

• 选择Blazor WebAssembly App，点击创建

• 我们可以看到新建好的项目文件如图

• 点击运行可以看到，Blazor 的 hello world 界面

---

对象模型：

写代码之前，我们要确定一下我们这个游戏所要用到的对象：

• 棋盘：一个九宫格的棋盘
• 棋子：我们可以用X和O表示

对象代码：

• 首先，需要声明枚举对象，来表示棋子和棋子的状态
• 右键项目名称，添加一个新的文件夹：Enums

• 新建一个枚举类：PieceStyle，表示棋子的状态：X、O、空白

 public enum PieceStyle
    {
        X,
        O,
        Blank
    }

• 新建一个枚举类：EvaluationDirection，表示获胜的棋子状态，横竖斜连成一线

public enum EvaluationDirection
    {
        Up,
        UpRight,
        Right,
        DownRight
    }

• 接下来，在项目下新建一个 Models 文件夹，放置我们的模型
• 首先新建一个表示棋盘的类，注意要引入我们的枚举类using BlazorWasmTicTacToe.Enums;

 public class GamePiece
    {
        public PieceStyle Style;

        public GamePiece()
        {
            Style = PieceStyle.Blank;
        }
    }

• 其次新建一个表示棋子获胜的类，注意要引入我们的枚举类using BlazorWasmTicTacToe.Enums;

public class WinningPlay
    {
        public List<string> WinningMoves { get; set; }
        public EvaluationDirection WinningDirection { get; set; }
        public PieceStyle WinningStyle { get; set; }
    }

• 最后新建一个表示棋子的类，注意要引入我们的枚举类using BlazorWasmTicTacToe.Enums;

public class GameBoard
    {
        public GamePiece[,] Board { get; set; }

        public PieceStyle CurrentTurn = PieceStyle.X;

        public bool GameComplete => GetWinner() != null || IsADraw();


        public GameBoard()
        {
            Reset();
        }

• 注意，在构造方法里面，我们放了一个**Reset()**方法，这个方法是初始化棋盘时，清空棋盘上的棋子

public void Reset()
        {
            Board = new GamePiece[3, 3];

            //将棋子转换成空白
            for (int i = 0; i <= 2; i++)
            {
                for (int j = 0; j <= 2; j++)
                {
                    Board[i, j] = new GamePiece();
                }
            }
        }

• **SwitchTurns()**判断下棋的轮次

private void SwitchTurns()
        {
            //This is equivalent to: if currently X's turn, 
            // make it O's turn, and vice-versa
            CurrentTurn = CurrentTurn == PieceStyle.X ? PieceStyle.O : PieceStyle.X;
        }

• **PieceClicked(int x, int y)**判断落棋的位置和状态

public void PieceClicked(int x, int y)
        {
            //If the game is complete, do nothing
            if (GameComplete) { return; }

            //If the space is not already claimed...
            GamePiece clickedSpace = Board[x, y];
            if (clickedSpace.Style == PieceStyle.Blank)
            {
                //Set the marker to the current turn marker (X or O), then make it the other player's turn
                clickedSpace.Style = CurrentTurn;
                SwitchTurns();
            }
        }

• 在page文件夹下，新建一个razor文件，作为我们井字棋的前端页面

@page "/tictactoe"
@using BlazorWasmTicTacToe.Models;

<h1>井字棋游戏</h1>

@code { GameBoard board = new GameBoard(); }


@if (!board.GameComplete)
{
<h2>@board.CurrentTurn's Turn!</h2> }
else
{
<h2>@board.GetGameCompleteMessage() <button class="btn btn-success" @onclick="@(() => board.Reset())">Reset</button></h2>}

<div class="board">
    @for (int i = 0; i < 3; i++)
    {
<div class="column">
    @for (int j = 0; j < 3; j++)
    {
        int x = i;
        int y = j;
<div class="gamepiece
     @board.Board[i,j].Style.ToString().ToLower()" @onclick="@(() => board.PieceClicked(x,y))"
     style="@(board.IsGamePieceAWinningPiece(i, j)? "opacity: 0.6" : "")"></div>}
</div>}
</div>

---

游戏界面：

完整代码请到GitHub仓库下载：

井字棋游戏^[1]

---

今天给大家分享了如何使用 Blazor 构建井字棋游戏；大家都学会了吗？