游戏逻辑

  • 4 分钟

在本单元中，我们将介绍四子棋游戏的工作原理以及制作游戏需要了解的 Blazor 构造。

四子棋

“连接四”游戏的目的是让你在对手之前将四个棋子水平、垂直或斜线排成一排。 在实施这个游戏时，你需要考虑的一些事项包括跟踪你当前的棋子状态、对手状态，以及检查是否有获胜者。 编程时，考虑到游戏循环（game loop）是非常有用的，这是一组需要重复的操作，直到可以宣布获胜者。 如下所示：

  1. 从“重置”状态开始，即没有游戏棋子的空白棋盘。
  2. 用户放置游戏棋子。
  3. 对手放置一个游戏棋子。
  4. 检查是否存在胜者：
    1. 如果有赢家，声明赢家和结束游戏，或重启游戏。
    2. 如果没有获胜者，请重复步骤 2。

表示代码中的状态

首先，什么是状态？ 游戏中的状态是指游戏中的事件、你拥有的积分数、你的游戏位置设置等。

当涉及到游戏开发中的状态时，一个重要的指导是将状态与 UI 分开，因为它使修改变得更容易，代码更易于阅读其他优势。

在 Blazor 的上下文中，这意味着围绕状态的状态和逻辑应位于其自己的 C# 类中，如下所示：

class State
{
    Player [] players;
    int gameRoundsPlayed;
    bool gameOver;

    State()
    {
        players = new Players[]
        {
            new Player() { Name= "Player", Points = 0 },
            new Player() { Name= "Opponent", Points = 0 }
        };
        gameRoundsPlayed = 0;
        gameOver = false;
    }

    void ResetGame() 
    {
        gameOver = false;
        players[0].Points = 0;
        players[1].Points = 0;
    }

    void EndGame()
    {
        gameOver = true;
        gameRoundsPlayed++;
        // award winner..
    } 
}

该 State 类包含有关谁正在玩游戏、游戏已玩多少轮、游戏是否仍然处于活动状态等的信息。

可以在 Blazor 组件中使用此类 State 的实例来绘制棋盘，并在游戏进行时执行其他操作。

在 OnInitialized 中重置游戏状态

在 Blazor 中，有一种方法会在组件初始化时被调用，该方法是在其他任何事件发生之前调用的。 此方法是放置代码的一个好地方，有助于将游戏置于“重置”状态，例如创建棋盘、玩家，以及在需要时重置之前游戏会话的任何分数。

用于处理该组件初始化的方法称为OnInitialized。

OnInitialized处理重置游戏状态的方法可能如下所示：

void OnInitialized() 
{
    state.ResetGame();
}

确切地说，此处的内容由你决定，但此代码应该为你提供一个想法。

使用事件处理玩家交互

当你或你的对手做出移动时，你需要记录这种交互。 将用户交互编码为游戏/应用应响应的事件。

例如，可以选择一个按钮或执行拖放动作来移动游戏棋子。

代码中的内容如下所示：

<span title="Click to play a piece" @onclick="() => PlayPiece(0)">🔽</span>

在上面的代码中，@onclick 指令属性为 click 事件指定了一个处理程序，即用户选择了此元素。 该事件由调用函数PlayPiece(0)的代码() => PlayPiece(0)处理。

更改状态

游戏中发生的动作应该影响你的游戏状态。 在前面调用 PlayPiece() 的示例中，我们应该更改状态，以表明棋盘的这一块已被棋子占据。 这意味着，鉴于我们的示例 State 类，我们需要一种方法来表示游戏片段，如下所示：

class State 
{
    // other code omitted
    Piece [] pieces;

    State()
    {
        pieces = new Piece[25]; // 5x5 board
    }

    void PlayPiece(int position)
    {
        pieces[position] = true; // true = occupied
    }
}