遊戲邏輯

  • 4 分鐘

在本單元中，我們將討論「四子棋」遊戲的運作方式，以及您需要知道哪些 Blazor 建構才能產生遊戲。

四子棋

「四子棋」遊戲的概念是讓您以水平、垂直或對角列配置四個遊戲棋子，然後換您的對手配置棋子。 實作此遊戲時需要考慮的事項是追蹤您目前的遊戲棋子狀態、您的對手，以及檢查勝出者。 當程式設計來思考遊戲迴圈時，您需要重複的一組動作，直到您可以宣告贏家為止，才很有用。 就像這樣：

  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
    }
}