Logika gry

  • 4 min

W tej jednostce omówimy koncepcje, takie jak sposób działania gry "Connect Four" i jakie konstrukcje Blazor musisz znać, aby stworzyć grę.

Połącz cztery

Celem gry "Connect Four" jest ułożenie czterech pionków w rzędzie poziomo, pionowo lub po przekątnej, zanim zrobi to przeciwnik. Kwestie, które należy wziąć pod uwagę podczas implementowania tej gry, to śledzenie bieżącego stanu elementów gry, przeciwników i sprawdzenie zwycięzcy. Jest to przydatne podczas programowania, aby myśleć o pętli gry, zestaw akcji, które należy powtórzyć, dopóki nie będzie można zadeklarować zwycięzcy. Coś takiego:

  1. Zacznij od stanu "zresetowany", tj. czystej tablicy bez elementów gry.
  2. Użytkownik stawia pionek.
  3. Przeciwnik umieszcza element gry.
  4. Sprawdź zwycięzcę:
    1. Jeśli jest zwycięzca, zadeklaruj zwycięzcę i koniec gry lub uruchom ponownie grę.
    2. Jeśli nie ma zwycięzcy, powtórz krok 2.

Reprezentowanie stanu w kodzie

Po pierwsze, co to jest stan? Stan w grach to co wydarzyło się w grze, ile masz punktów, gdzie są rozmieszczone miejsca w grze i tak dalej.

Ważna wskazówka dotycząca zarządzania stanem w tworzeniu gier to zachowanie oddzielności stanu od interfejsu użytkownika, co ułatwia modyfikacje i sprawia, że kod jest łatwiejszy do odczytania, przynosząc inne korzyści.

W kontekście platformy Blazor oznacza to, że stan i logika wokół stanu powinny znajdować się we własnej klasie języka C#, w następujący sposób:

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

Klasa State zawiera informacje o tym, kto gra w grę, ile rund gry zostało rozegranych, jeśli gra jest nadal aktywna i tak dalej.

Możesz użyć wystąpienia tej klasy State w komponentach Blazor, aby narysować planszę i wykonać inne akcje w miarę postępu gry.

Zresetuj stan gry w OnInitialized

W środowisku Blazor istnieje metoda, która jest wywoływana, gdy składnik jest inicjowany, zanim cokolwiek innego się stanie. Ta metoda jest dobrym miejscem, aby umieścić kod, który pomaga przywrócić grę do stanu "reset", na przykład tworzenie tablicy i graczy oraz resetowanie wszelkich wyników, jeśli to konieczne, po poprzednich sesjach gry.

Metoda, która obsługuje tę inicjację składnika, jest nazywana OnInitialized.

Metoda OnInitialized, która obsługuje resetowanie stanu gry, może wyglądać mniej więcej tak:

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

Dokładnie to, co dzieje się tutaj, to do Ciebie, ale ten kod powinien dać Ci pomysł.

Obsługa interakcji gracza przy użyciu zdarzeń

Gdy ty lub twoi przeciwnicy wykonacie ruch, musisz uchwycić tę interakcję. Zakodujesz interakcje użytkowników jako zdarzenia, na które powinna odpowiadać twoja gra/aplikacja.

Możesz na przykład wybrać przycisk lub wykonać ruch przeciągania i upuszczania, aby przenieść element gry.

Oto, jak to może wyglądać w kodzie:

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

W powyższym kodzie atrybut dyrektywy @onclick określa procedurę obsługi zdarzenia click, tj. użytkownik wybrał ten element. Zdarzenie jest obsługiwane przez kod () => PlayPiece(0), który wywołuje funkcję PlayPiece(0).

Zmienianie stanu

Akcja, która ma miejsce w grze, powinna wpływać na stan gry. W poprzednim przykładzie, w którym wywołujemy PlayPiece(), należy zmienić stan, aby wskazać, że ten fragment planszy jest teraz zajęty przez element. Oznacza to, że biorąc pod uwagę nasz przykład State klasy, potrzebujemy sposobu reprezentowania elementów gry, w następujący sposób:

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

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

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