Spiellogik

  • 4 Minuten

In dieser Lerneinheit erfahren Sie, wie das Spiel „Vier gewinnt“ funktioniert und welche Blazor-Konstrukte Sie kennen müssen, um ein Spiel erstellen zu können.

Vier gewinnt

Das Ziel des Spiels „Vier gewinnt“ besteht darin, vor Ihren Gegner*innen vier Spielsteine horizontal, vertikal oder diagonal in einer Reihe zu platzieren. Bei der Implementierung dieses Spiels müssen Sie einige Dinge berücksichtigen. Es ist beispielsweise wichtig, die Position Ihrer Spielsteine sowie der Spielsteine Ihrer Gegner*innen im Auge zu behalten, um die Gewinner*innen ermitteln zu können. Beim Programmieren empfiehlt sich die Verwendung einer Spielschleife. Diese umfasst mehrere Aktionen, die wiederholt werden müssen, bis die Gewinner bestimmt werden können. Ungefähr so wie hier gezeigt:

  1. Zu Beginn wird der reset-Zustand verwendet. Dies bedeutet beispielsweise, dass ein leeres Spielbrett ohne Spielsteine vorliegt.
  2. Der Benutzer platziert ein Spielstück.
  3. Der Gegner platziert ein Spielstück.
  4. Die Gewinner*innen müssen ermittelt werden:
    1. Wenn es Gewinner gibt, wird dieser deklariert und das Spiel beendet bzw. neu gestartet.
    2. Wenn es keinen Gewinner gibt, wird Schritt 2 wiederholt.

Verwendung von „State“ im Code

Was bedeutet eigentlich „State“? Es handelt es sich bei „State“ (Zustand) um die Geschehnisse im Spiel (z. B. Punktestand und Position von Spielsteinen).

Bei der Spieleentwicklung empfiehlt es sich, das State-Element von der Benutzeroberfläche getrennt zu halten, da dies Änderungen erleichtert und Ihr Code neben anderen Vorteilen einfacher zu lesen ist.

Im Kontext von Blazor bedeutet dies, dass der Zustand und die Logik im Zusammenhang mit dem State-Element eigene C#-Klassen aufweisen sollten:

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

Die State-Klasse enthält Informationen darüber, wer das Spiel spielt, wie viele Spielrunden gespielt wurden, wenn das Spiel noch aktiv ist usw.

Sie können eine Instanz dieser State-Klasse in Ihren Blazor-Komponenten verwenden, um ein Brett zu zeichnen und andere Aktionen auszuführen, während das Spiel voranschreitet.

Zurücksetzen des Spielzustands zu OnInitialized

In Blazor gibt es eine Methode, die aufgerufen wird, wenn die Komponente initialisiert wird, bevor etwas anderes geschieht. Diese Methode eignet sich für Code, der das Spiel in einen Reset-Zustand versetzt, sodass das Spielbrett und die Spieler erstellt und die Spielstände (von vorherigen Spielsitzungen) bei Bedarf zurückgesetzt werden.

Die Methode, die diese Initialisierung der Komponente behandelt, heißt OnInitialized.

Eine OnInitialized-Methode, mit der das Zurücksetzen des Spielzustands behandelt wird, kann etwa wie folgt aussehen:

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

Zwar liegt es an Ihnen, was Sie hier einfügen, aber dieser Code sollte Ihnen einen ersten Eindruck vermitteln.

Verarbeiten von Spielerinteraktionen mithilfe von Ereignissen

Wenn Sie oder Ihre Gegner*innen einen Spielzug vornehmen, müssen Sie diese Interaktion erfassen. Sie codieren Benutzerinteraktionen als Ereignisse, auf die Ihr Spiel bzw. Ihre App reagieren soll.

Sie können beispielsweise eine Schaltfläche auswählen oder einen Drag-and-Drop-Vorgang ausführen, um einen Spielstein zu verschieben.

Dies kann im Code wie folgt aussehen:

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

Im obigen Code gibt das @onclick-Direktive-Attribut einen Handler für das click-Ereignis an, d. h. ein Benutzer hat dieses Element ausgewählt. Das Ereignis wird vom Code () => PlayPiece(0) behandelt, der die Funktion PlayPiece(0) aufruft.

Ändern des Zustands

Eine Aktion, die im Spiel ausgeführt wird, sollte sich auf den Spielzustand auswirken. Im vorherigen Beispiel, in dem Sie PlayPiece() aufrufen, sollten Sie den Zustand ändern, um anzugeben, dass diese Position des Spielbretts jetzt von einem Spielstein belegt ist. Das bedeutet, dass Sie in Anbetracht der Beispielklasse State eine Möglichkeit benötigen, Spielsteine darzustellen. Beispiel:

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

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

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