El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Desar i carregar l’estat del joc és una funcionalitat essencial per a molts jocs, ja que permet als jugadors continuar la seva partida més endavant sense perdre el progrés. En aquest tema aprendràs com implementar sistemes de desat i càrrega d’estat utilitzant JavaScript i Phaser.

Conceptes clau

Estat del joc: Conjunt de dades que representen la situació actual del joc (puntuació, posició dels personatges, nivell, etc.).
Serialització: Procés de convertir l’estat del joc en un format que es pugui guardar (normalment JSON).
Emmagatzematge local (localStorage): Mètode per guardar dades de manera persistent al navegador de l’usuari.
Desar: Guardar l’estat actual del joc.
Carregar: Recuperar l’estat guardat i restaurar-lo al joc.

Què cal desar?

Abans de començar a programar, identifica quines dades són importants per restaurar la partida. Alguns exemples habituals:

Dada a desar	Exemple de valor
Puntuació	1500
Nivell actual	3
Posició del jugador	{x: 120, y: 300}
Vides restants	2
Estat dels enemics	[{x: 50, y: 100, viu: true}, ...]

Serialitzar l’estat del joc

Per desar l’estat, cal convertir les dades a un format que es pugui guardar. El més habitual és utilitzar JSON.

Exemple de serialització

// Exemple d'estat del joc
const gameState = {
  score: 1500,
  level: 3,
  player: { x: 120, y: 300, lives: 2 },
  enemies: [
    { x: 50, y: 100, alive: true },
    { x: 200, y: 150, alive: false }
  ]
};

// Convertim l'estat a una cadena JSON
const serializedState = JSON.stringify(gameState);

Explicació:
JSON.stringify() converteix l’objecte gameState en una cadena de text que es pot guardar fàcilment.

Desar l’estat amb localStorage

El navegador proporciona l’objecte localStorage per guardar dades de manera persistent.

Exemple de desat

// Guardem l'estat serialitzat sota la clau 'myGameSave'
localStorage.setItem('myGameSave', serializedState);

Explicació:
localStorage.setItem(clau, valor) desa el valor sota la clau especificada. Les dades es mantenen encara que l’usuari tanqui el navegador.

Carregar l’estat del joc

Per carregar l’estat, cal recuperar la cadena guardada i convertir-la de nou a un objecte.

Exemple de càrrega

// Recuperem la cadena JSON
const savedState = localStorage.getItem('myGameSave');

if (savedState) {
  // Convertim la cadena a objecte
  const gameState = JSON.parse(savedState);
  // Ara pots utilitzar gameState per restaurar el joc
}

Explicació:

localStorage.getItem(clau) retorna la cadena guardada o null si no existeix.
JSON.parse() converteix la cadena JSON a un objecte JavaScript.

Integració amb Phaser

Normalment, desar i carregar l’estat es fa en resposta a accions de l’usuari (per exemple, prémer un botó de “Desar” o “Carregar”).

Exemple pràctic: Botons de desar i carregar

class MyGameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'MyGameScene' });
    this.score = 0;
    this.player = { x: 100, y: 200, lives: 3 };
  }

  create() {
    // Botó de desar
    this.saveButton = this.add.text(10, 10, 'Desar', { fill: '#0f0' })
      .setInteractive()
      .on('pointerdown', () => this.saveGame());

    // Botó de carregar
    this.loadButton = this.add.text(10, 40, 'Carregar', { fill: '#0f0' })
      .setInteractive()
      .on('pointerdown', () => this.loadGame());
  }

  saveGame() {
    const gameState = {
      score: this.score,
      player: this.player
    };
    localStorage.setItem('myGameSave', JSON.stringify(gameState));
    console.log('Joc desat!');
  }

  loadGame() {
    const savedState = localStorage.getItem('myGameSave');
    if (savedState) {
      const gameState = JSON.parse(savedState);
      this.score = gameState.score;
      this.player = gameState.player;
      console.log('Joc carregat!', gameState);
      // Aquí pots actualitzar la posició del jugador, etc.
    } else {
      console.log('No hi ha cap partida desada.');
    }
  }
}

Explicació detallada:

Es creen dos botons de text: un per desar i un per carregar.
Quan es prem un botó, es crida la funció corresponent.
saveGame() serialitza i desa l’estat.
loadGame() recupera i restaura l’estat.

Exercicis pràctics

Exercici 1: Desa i carrega la puntuació

Enunciat:
Afegeix funcionalitat per desar i carregar només la puntuació del joc utilitzant localStorage.

Solució:

// Desa la puntuació
localStorage.setItem('score', this.score);

// Carrega la puntuació
const savedScore = localStorage.getItem('score');
if (savedScore) {
  this.score = parseInt(savedScore, 10);
}

Consell:
Assegura’t de convertir la puntuació a nombre amb parseInt quan la carreguis.

Exercici 2: Desa i carrega la posició del jugador

Enunciat:
Desa la posició del jugador (x, y) i carrega-la quan l’usuari ho demani.

Solució:

// Desa la posició
const playerPos = { x: this.player.x, y: this.player.y };
localStorage.setItem('playerPos', JSON.stringify(playerPos));

// Carrega la posició
const savedPos = localStorage.getItem('playerPos');
if (savedPos) {
  const pos = JSON.parse(savedPos);
  this.player.x = pos.x;
  this.player.y = pos.y;
}

Error comú:
Oblidar convertir la cadena JSON a objecte amb JSON.parse().

Consells i bones pràctiques

No desis objectes complexos de Phaser (com sprites o escenes), només dades primitives o objectes simples.
Gestiona errors: Comprova sempre si hi ha dades abans de carregar-les.
Actualitza l’estat visual: Després de carregar, assegura’t d’actualitzar la posició dels elements al joc.
Evita desar dades sensibles al localStorage, ja que són accessibles des del navegador.

Resum

En aquesta secció has après:

Què significa desar i carregar l’estat del joc.
Com serialitzar i desar dades amb localStorage.
Com carregar i restaurar l’estat del joc.
Com integrar aquesta funcionalitat a un projecte Phaser.
Bones pràctiques i exercicis per consolidar els coneixements.

Amb aquests coneixements, podràs oferir als jugadors la possibilitat de continuar la seva partida en qualsevol moment, millorant l’experiència de joc i la professionalitat dels teus projectes.

Pròxim pas:
A la següent secció aprendràs sobre funcionalitats avançades de joc, com efectes de partícules i animacions, per fer els teus jocs encara més atractius!

Desar i carregar l’estat del joc

Conceptes clau

Què cal desar?

Serialitzar l’estat del joc

Exemple de serialització

Desar l’estat amb localStorage

Exemple de desat

Carregar l’estat del joc

Exemple de càrrega

Integració amb Phaser

Exemple pràctic: Botons de desar i carregar

Exercicis pràctics

Exercici 1: Desa i carrega la puntuació

Exercici 2: Desa i carrega la posició del jugador

Consells i bones pràctiques

Resum

Phaser - Desenvolupament de jocs amb JavaScript

Mòdul 1: Introducció al desenvolupament de jocs i Phaser

Mòdul 2: Fonaments de Phaser

Mòdul 3: Sprites i animació

Mòdul 4: Física i interactivitat en el joc

Mòdul 5: Món del joc i càmera

Mòdul 6: Àudio i interfície d’usuari

Mòdul 7: Arquitectura del joc i gestió d’estats

Mòdul 8: Funcionalitats avançades de joc

Mòdul 9: Desplegament i optimització

Mòdul 10: Projecte final