Lógica del juego

En esta unidad, tratamos conceptos como cómo funciona el juego "Conecta Cuatro" y qué construcciones de Blazor necesita conocer para desarrollar un juego.

Conecta Cuatro

La idea con el juego "Conectar cuatro" es para que usted establezca cuatro piezas de juego en una fila horizontal, vertical o diagonalmente antes de que su oponente lo haga. Las cosas que debes tener en cuenta al implementar este juego es realizar un seguimiento del estado actual de las piezas del juego, tus oponentes y comprobar si hay un ganador. Es útil cuando se programa, pensar en un bucle de juego, un conjunto de acciones que necesitas repetir hasta que puedas declarar un ganador. Algo parecido a esto:

1. Comience con un estado de "restablecimiento", es decir, un tablero limpio sin piezas de juego.
2. El usuario coloca una pieza de juego.
3. El oponente coloca una pieza de juego.
4. Compruebe si hay un ganador:
   1. Si hay un ganador, declare al ganador y termine el juego, o reinicie el juego.
   2. Si no hay ganador, repita el paso 2.

Representación del estado en el código

En primer lugar, ¿qué es el estado? El estado en los juegos es lo que ha sucedido en el juego, cuántos puntos tiene, dónde se colocan sus piezas de juego, etc.

Una guía importante cuando se trata de estado en el desarrollo de juegos es mantener el estado separado de la interfaz de usuario, ya que hace que las modificaciones sean más fáciles de leer y el código sea más fácil de leer entre otras ventajas.

En el contexto de Blazor, esto significa que el estado y la lógica alrededor del estado deben estar en su propia clase de C#, de la siguiente manera:

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

La State clase contiene información sobre quién está jugando el juego, cuántas rondas de juego se han jugado, si el juego sigue activo, etc.

Puedes usar una instancia de esta State clase en los componentes de Blazor para dibujar un tablero y llevar a cabo otras acciones a medida que avanza el juego.

Restablecer el estado del juego en OnInitialized

En Blazor, hay un método al que se llama cuando se inicializa el componente, antes de que ocurra nada más. Este método es un buen lugar para colocar código que ayuda a colocar el juego en un estado de "restablecimiento", como crear el tablero, los jugadores y restablecer las puntuaciones si es necesario en sesiones de juego anteriores.

El método que controla esta inicialización del componente se denomina OnInitialized.

Un OnInitialized método que controla el restablecimiento del estado del juego podría tener un aspecto similar al siguiente:

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

Exactamente lo que pongas aquí depende de ti, pero este código debería darte una idea.

Control de las interacciones del jugador mediante eventos

Cuando usted o sus oponentes hacen un movimiento, debe capturar esta interacción. Codificas las interacciones del usuario como eventos a los que debe responder tu juego o aplicación.

Por ejemplo, puede seleccionar un botón o realizar un movimiento de arrastrar y soltar para mover una pieza de juego.

Este es el aspecto que puede tener en el código:

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

En el código anterior, el @onclick atributo de directiva especifica un controlador para el click evento, es decir, un usuario seleccionó este elemento. El código () => PlayPiece(0) controla el evento que invoca la función PlayPiece(0).

Cambio del estado

Una acción que sucede en el juego debe afectar tu estado del juego. En el ejemplo anterior en el que se invoca PlayPiece(), deberíamos cambiar el estado para indicar que esta parte del tablero ahora está ocupada por una pieza. Esto significa que, dada nuestra clase de ejemplo State , necesitamos una manera de representar piezas de juego, algo parecido a esto:

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

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

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