Aplicacions amb Flutter, Dart i Flame

Detectem les tirades dels jugadors

Com a primer pas per fer una versió per a dos jugadors, ens cal detectar les tirades, gestionar a qui li toca i anar posant les fitxes a lloc.

En la casella, posarem el contenidor dins d'un detector d'accions que, quan es premi sobre una casella, executarà la funció posaFitxa; que definirem a la pantalla principal.

casella.dart

import 'package:flutter/material.dart';
import 'package:tres_linia/components/fitxa.dart';
import 'package:tres_linia/core/colors.dart';

class Casella extends StatefulWidget {
  final int posX;
  final int posY;
  final int estAct;
  final Function() posaFitxa;
  const Casella({super.key, required this.posX, required this.posY, 
    required this.estAct, required this.posaFitxa});

  @override
  State<Casella> createState() => _CasellaState();
}

class _CasellaState extends State<Casella> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 30, bottom: 20, left: 8, right: 8),
      child: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: ColorsApp.component,
          borderRadius: BorderRadius.circular(20)
        ),
        child: Padding(
          padding: const EdgeInsets.all(25.0),
          child: GestureDetector(
            onTap: () {
              setState(() {
                widget.posaFitxa();
              });
            },
            child: Fitxa(estatAct: widget.estAct)
          )
        )
      ),
    );
  }
}

A la pantalla principal definirem aquesta funció. Primerament, hem de crear la variable jugadorActual que recorda a quin jugador li toca tirar. La inicialitzem a 1 perquè volem que sempre comenci aquest jugador. També inicialitzem el taulell buit.

Quan creem la casella, hem d'especificar la funció posaFitxa. Aquesta comprovarà que la casella està lliure (si no, no es pot tirar en aquell lloc) i hi posarà una fitxa del jugador actual. Tot seguit, passarà el torn al jugador següent.

pant_principal.dart

import 'package:flutter/material.dart';
import 'package:tres_linia/components/casella.dart';

class PantPral extends StatefulWidget {
  const PantPral({super.key});

  @override
  State<PantPral> createState() => _PantPralState();
}

class _PantPralState extends State<PantPral> {
  List<List<int>> estatCaselles = [[0, 0, 0], [0, 0, 0], [0, 0, 0]];
  int jugadorActual = 1;  // Comença el jugador 1
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 20,
        ),
        for(int i = 0; i < 3; i++) filera(i),
        Expanded(child: Text(" "))
      ],
    );
  }

  Row filera(int pY) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        for(int i = 0; i < 3; i++) Casella(posX: i, posY: pY, estAct: estatCaselles[pY][i],
          posaFitxa: () {
            setState(() {
              if(estatCaselles[pY][i] == 0) {
                estatCaselles[pY][i] = jugadorActual;
                if(jugadorActual == 1) {
                    jugadorActual = 2;
                } else {
                  jugadorActual = 1;
                }
              }
            });
          },
        ),
      ],
    );
  }
}

Amb això, dos jugadors ja podrien jugar al tres en línia; sempre que s'autogestionin a qui li toca tirar i controlin qui guanya. També caldria alguna forma de reiniciar el joc quan acaba la partida. En la propera versió farem que sigui l'aplicació qui s'encarregui de tot això.

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.