Lógica del juego

  • 4 minutos

En esta unidad, tratamos conceptos como el funcionamiento del juego "Conecta 4" y qué construcciones de Blazor necesita conocer para producir un juego.

Conecta 4

El objetivo del juego "Conecta 4" es colocar cuatro piezas de juego en una fila horizontal, vertical o diagonal antes de que lo haga su oponente. Los aspectos que debe tener en cuenta al implementar este juego es realizar un seguimiento del estado actual de las piezas del juego y los oponentes, y comprobar si hay un ganador. Al programar, resulta útil pensar en un bucle de juego, un conjunto de acciones que debe repetir hasta que pueda declarar un ganador. Algo como esto:

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

Representación del estado en el código

Antes que nada, ¿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 en lo que respecta al estado en el desarrollo de juegos es mantener el estado independiente de la interfaz de usuario, ya que facilita las modificaciones y la lectura del código, 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 clase State contiene información sobre quién juega, cuántas rondas se han jugado, si el juego sigue activo, etc.

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

Restablecimiento del 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 ayude a poner el juego en un estado de "restablecimiento", como crear el tablero, los jugadores y restablecer las puntuaciones si es necesario de sesiones de juego anteriores.

El evento que controla esta inicialización del componente se denomina OnInitialized.

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

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

Lo que se incluya aquí depende de usted, pero este código debería darle una idea.

Control de las interacciones de los jugadores mediante eventos

Cuando usted o sus oponentes hacen un movimiento, debe capturar esta interacción. Las interacciones de los usuarios se codifican como eventos a los que debe responder el juego o la aplicación.

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

A continuación se muestra 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 atributo de directiva @onclick especifica un controlador para el evento click, es decir, un usuario seleccionó este elemento. El evento se controla mediante este código () => PlayPiece(0), que invoca la función PlayPiece(0).

Cambio de estado

Una acción que se produce en el juego debe afectar al 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 las piezas del juego, algo así:

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

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

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