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

HOME

La depuració i les proves són etapes essencials en el desenvolupament de qualsevol joc. Aquest procés t’ajuda a identificar i corregir errors, assegurar-te que el joc funciona com s’espera i millorar l’experiència de l’usuari. En aquesta secció aprendràs tècniques i eines per depurar i provar els teus jocs creats amb Phaser.

Què és la depuració?

La depuració és el procés d’identificar, analitzar i corregir errors (bugs) en el teu codi. Els errors poden ser de diversos tipus:

Errors de sintaxi: Problemes amb l’escriptura del codi (per exemple, parèntesis mal tancats).
Errors de lògica: El codi s’executa sense errors, però el comportament no és el desitjat.
Errors d’execució: El codi falla durant l’execució (per exemple, accedir a una propietat d’un objecte indefinit).

Eines de depuració

Eines bàsiques

Eina	Descripció
Console del navegador	Permet veure errors, avisos i missatges personalitzats amb `console.log()`
Breakpoints	Aturen l’execució del codi en un punt específic per inspeccionar variables
Inspector d’elements	Permet veure i modificar el DOM i les propietats dels objectes en temps real

Eines específiques per Phaser

Phaser Dev Tools: Extensions per a navegadors que faciliten la inspecció d’escenes, objectes i estats del joc.
Debug Graphics: Utilitza objectes gràfics per dibuixar col·lisions, àrees d’interacció, etc.

Tècniques de depuració

3.1. Ús de `console.log()`

Pots imprimir informació útil a la consola per seguir el flux del teu codi o veure el valor de variables:

function update() {
  console.log('Posició del jugador:', player.x, player.y);
}

Explicació:
Aquesta línia mostrarà la posició del jugador cada vegada que s’actualitzi el joc, ajudant-te a veure si es mou correctament.

3.2. Breakpoints i inspecció de variables

Obre les DevTools del navegador (F12 o clic dret → "Inspecciona").
Ves a la pestanya "Sources" i busca el teu fitxer JavaScript.
Fes clic al número de línia on vols aturar l’execució (breakpoint).
Quan el codi arribi a aquest punt, podràs inspeccionar l’estat de totes les variables.

3.3. Debug Graphics a Phaser

Phaser permet dibuixar gràficament àrees de col·lisió o altres elements útils per depurar:

const debugGraphics = this.add.graphics();
this.physics.world.createDebugGraphic();

this.physics.world.drawDebug = true;

Explicació:
Això mostrarà visualment les àrees de col·lisió dels objectes, facilitant la detecció de problemes amb la física.

Proves (Testing)

Les proves asseguren que el teu joc funciona com s’espera i que els canvis no introdueixen nous errors.

Tipus de proves

Tipus de prova	Descripció
Prova manual	Jugar al joc i comprovar manualment que tot funciona
Prova automatitzada	Escriure scripts que comproven funcionalitats específiques
Prova d’usuari (beta)	Altres persones juguen i informen d’errors o problemes

Exemple de prova manual

Comprova que el jugador es mou correctament amb les tecles.
Verifica que la puntuació augmenta quan reculls un objecte.
Assegura’t que el joc acaba quan el jugador perd totes les vides.

Exemple de prova automatitzada amb Jasmine

Encara que Phaser no inclou proves automatitzades per defecte, pots utilitzar frameworks com Jasmine per escriure tests:

describe('Jugador', function() {
  it('hauria de començar amb 3 vides', function() {
    expect(player.lives).toBe(3);
  });
});

Explicació:
Aquesta prova comprova que el jugador comença amb 3 vides. Si el valor no és correcte, la prova fallarà.

Exercicis pràctics

Exercici 1: Depuració amb `console.log()`

Enunciat:
Afegeix una línia de codi al teu joc perquè imprimeixi la puntuació actual a la consola cada cop que el jugador reculli un objecte.

Solució:

function recollirObjecte(player, objecte) {
  puntuacio += 10;
  console.log('Puntuació actual:', puntuacio);
  objecte.destroy();
}

Consell:
Si no veus el missatge a la consola, assegura’t que la funció s’està cridant correctament.

Exercici 2: Utilitzar Debug Graphics

Enunciat:
Activa el mode de depuració gràfica per veure les àrees de col·lisió dels teus objectes.

Solució:

const debugGraphics = this.add.graphics();
this.physics.world.createDebugGraphic();
this.physics.world.drawDebug = true;

Error comú:
Oblidar afegir el codi dins del mètode create() de l’escena. Assegura’t d’afegir-lo després d’inicialitzar la física.

Exercici 3: Prova manual

Enunciat:
Fes una llista de 3 accions que vols provar manualment al teu joc i comprova que funcionen correctament.

Solució d’exemple:

El jugador pot saltar prement la barra espaiadora.
Els enemics desapareixen quan són tocats pel jugador.
El joc mostra el missatge “Game Over” quan el jugador perd totes les vides.

Resum i consells finals

La depuració i les proves són fonamentals per garantir la qualitat del teu joc.
Utilitza la consola, breakpoints i eines de depuració gràfica per identificar i solucionar errors.
Prova manualment totes les funcionalitats i, si pots, escriu proves automatitzades per a les parts més crítiques.
No tinguis por de demanar a altres persones que provin el teu joc: sovint detectaran errors que tu no veus.

Pròxim pas:
Ara que saps com depurar i provar el teu joc, ja estàs preparat per desplegar-lo i compartir-lo amb el món!

Depuració i proves

Què és la depuració?

Eines de depuració

Eines bàsiques

Eines específiques per Phaser

Tècniques de depuració

3.1. Ús de `console.log()`

3.2. Breakpoints i inspecció de variables

3.3. Debug Graphics a Phaser

Proves (Testing)

Tipus de proves

Exemple de prova manual

Exemple de prova automatitzada amb Jasmine

Exercicis pràctics

Exercici 1: Depuració amb `console.log()`

Exercici 2: Utilitzar Debug Graphics

Exercici 3: Prova manual

Resum i consells finals

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

Depuració i proves

Què és la depuració?

Eines de depuració

Eines bàsiques

Eines específiques per Phaser

Tècniques de depuració

3.1. Ús de console.log()

3.2. Breakpoints i inspecció de variables

3.3. Debug Graphics a Phaser

Proves (Testing)

Tipus de proves

Exemple de prova manual

Exemple de prova automatitzada amb Jasmine

Exercicis pràctics

Exercici 1: Depuració amb console.log()

Exercici 2: Utilitzar Debug Graphics

Exercici 3: Prova manual

Resum i consells finals

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

3.1. Ús de `console.log()`

Exercici 1: Depuració amb `console.log()`