게임 논리

4분

이 단원에서는 "Connect Four" 게임의 작동 방식과 게임을 제작하기 위해 알아야 할 Blazor의 구조와 같은 개념을 다룹니다.

Connect Four

"Connect Four" 게임은 상대편보다 먼저 가로, 세로 또는 대각선으로 행에 네 개의 게임 조각을 배치하는 것입니다. 이 게임을 구현할 때 고려해야 할 사항은 게임 조각의 현재 상태와 상대편을 추적하고 승자를 확인하는 것입니다. 승자를 선언할 때까지 반복해야 하는 작업 집합인 게임 루프를 생각하도록 프로그래밍할 때 유용합니다. 예를 들면 다음과 같습니다.

"초기화" 상태(즉, 게임 조각없이 비어있는 보드)로 시작합니다.
사용자가 게임 조각을 배치합니다.
상대는 게임 조각을 배치합니다.
우승자를 확인합니다.
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
    }
}

계속