Diario di sviluppo 6

Scena

Concludiamo questo primo giro di descrizioni del codice con la descrizione della classe finale che descrive la scena di Test.

import Cella from '../game/ground/cella'
import Pos from '../game/utils/pos';
import Hero from '../game/entity/hero';

export default class TestScene extends Phaser.Scene {
  board: Cella[][] = [];
  hero: Hero | undefined;
  stato: number = 0;

Oltre agli import degli oggetti che utiliziamo, vado a definire come membri la matrice di Celle che rappresenta la board (scacchiera), l'eroe (hero) e lo stato del gioco.

Il gioco al momento ha tre stati:

preload() { }

update() { }

Due metodi che devono essere implementati per via che abbiamo esteso la classe Scene.
Quando viene istanziata la classe il primo metodo chiamato dove verranno caricate le risorse della scena.
L'update é il metodo chiamato ogni tick, per aggiornare gli oggetti che devono essere aggiornati.

Create

Altro metodo obbligatorio per la scena, questo metodo viene chiamato dopo l'eventuale caricamento risorse.

Qui andiamo a creare tutto il campo di battaglia e inizializiamo tutte quello che deve essere inizializzato.

create() {
    this.board = [];
    for (let x = 1; x <= 24; x++) {
      this.board[x] = [];
      for (let y = 1; y <= 24; y++) {
        this.board[x][y] = new Cella(((x + y) % 2), new Pos(x, y), this);
        this.board[x][y].square.setInteractive();
        //assegno gli eventi alle celle
        this.board[x][y].square.on("pointerover", this.gestioneMappaOver, this);
        this.board[x][y].square.on("pointerout", this.gestioneMappaOut, this);
        this.board[x][y].square.on("pointerdown", this.gestioneMappaClick, this);
      }
    }
    this.setDeployCell();
    this.stato = 0;
    this.hero = new Hero(1, new Pos(-100, -100), this);
  }

Quindi come appena detto inizializzo la scacchiera andando a registrare come listener tre eventi:

Poi viene chiamata la funzione che va a settare alcune celle come deploy, finisco con il settare lo stato a 0 e creo l'eroe.

setDeployCell() {
    //settare le celle per posizionamento
    for (let x = 20; x <= 24; x++) {
      for (let y = 1; y <= 24; y++) {
        this.board[y][x].setDeploy();
      }
    }
  }

Questo metodo va a settare le ultime 4 righe come Deploy.
Una cella in stato Deploy vuol dire che se cliccata l'eroe ci si posiziona.

Eventi del mouse

Di seguito andiamo ad analizzare tre metodi con i quali andiamo a gestire gli eventi del mouse.

gestioneMappaOver(event: any) {
    if (this.stato == 2) {
      let x = (Math.ceil(Math.abs(event.x) / 24)) - 1;
      let y = (Math.ceil(Math.abs(event.y) / 24)) - 1;
      this.board[x][y].seleziona();
    }
  }

Questo metodo gestisce l'evento Mouse Over, che va a settare la cella come selezionata, questo accade solo nello stato 2.

gestioneMappaOut(event: any) {
    if (this.stato == 2) {
      let x = (Math.ceil(Math.abs(event.x) / 24)) - 1;
      let y = (Math.ceil(Math.abs(event.y) / 24)) - 1;
      this.board[x][y].deseleziona();
    }
  }

Qui viene gestito il Mouse out (quando il mouse abbandona la cella), che va a togliere la selezione alla cella.

  gestioneMappaClick(event: any) {
    // recupero le coordinate della cella che manda l'evento
    let x = (Math.ceil(Math.abs(event.x) / 24)) - 1;
    let y = (Math.ceil(Math.abs(event.y) / 24)) - 1;

    console.log(this.stato)
    switch (this.stato) {
      case 0:
        if (this.board[x][y].deploy) {
          this.stato = 1;
          for (let x = 20; x <= 24; x++) {
            for (let y = 1; y <= 24; y++) {
              this.board[y][x].unsetDeploy();
            }
          }
          this.hero?.setPos(this.board[x][y].getPos());
        }
        break;
      case 1:
        let H: any = this.hero?.getPos();
        let C: any = this.board[x][y].getPos();
        if (H.x == C.x && H.y == C.y) {
          this.hero?.getListMoveArea().forEach((D: Pos) => {
            this.board[x + D.x][y + D.y].seleziona();
          })
          this.stato = 2;
        }
        break;
      case 2:
        for (let x = 1; x <= 24; x++) {
          for (let y = 1; y <= 24; y++) {
            this.board[y][x].deseleziona();
          }
        }
        this.hero?.setPos(this.board[x][y].getPos());
        this.stato = 3;
        break;
    }
  }

Questo metodo gestisce il click che in base al valore di stato.

In stato uguale a zero, l'eroe é stato posizionato, viene tolto lo stato deploy dalle celle.

In stato uguale a uno, avvia la fase di movimento dell'eroe, andando ad accendere celle intorno, portanto lo stato a 2

In stato uguale a due, l'eroe si sposta in quella cella e resetta tutte le celle.

conclusione

Al momento lo sviluppo si é fermato qui, danto una base a questo "progetto".

Dal prossimo post iniziamo sistemare le cose per arrivare alla meccanica che ho intenzione di realizzare.

Pubblicato