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

HOME

En aquesta secció aprendràs a preparar el teu ordinador per començar a desenvolupar jocs amb Phaser i JavaScript. Seguint aquests passos, podràs crear, executar i provar els teus propis projectes de manera eficient.

Requisits previs

Abans de començar, assegura’t de tenir:

Coneixements bàsics de JavaScript (no cal ser expert, però sí entendre variables, funcions i estructures bàsiques).
Un ordinador amb accés a Internet.
Un editor de codi (com Visual Studio Code, Sublime Text, Atom, etc.).
Un navegador web modern (Google Chrome, Firefox, Edge...).

Instal·lació de les eines necessàries

2.1. Editor de codi

Visual Studio Code (VS Code) és una de les opcions més populars i recomanades.

Passos per instal·lar VS Code:

Ves a https://code.visualstudio.com/
Descarrega la versió per al teu sistema operatiu (Windows, macOS o Linux).
Segueix les instruccions d’instal·lació.

Altres editors populars: | Editor | Web | Característiques clau | |------------------|------------------------------------------|--------------------------------------| | Sublime Text | https://www.sublimetext.com/ | Lleuger, ràpid, personalitzable | | Atom | https://atom.io/ | Codi obert, extensible | | WebStorm | https://www.jetbrains.com/webstorm/ | Professional, moltes funcionalitats |

2.2. Navegador web

Qualsevol navegador modern serveix, però Google Chrome és molt recomanat per les seves eines de desenvolupador.

2.3. Node.js i npm (opcional però recomanat)

Node.js permet utilitzar eines modernes de desenvolupament i gestionar dependències.

Instal·lació:

Ves a https://nodejs.org/
Descarrega la versió LTS (Long Term Support).
Instal·la seguint les instruccions.

Comprova la instal·lació obrint una terminal i escrivint:

node -v
npm -v

Això hauria de mostrar la versió instal·lada de Node.js i npm.

Crear l’estructura bàsica del projecte

3.1. Crear una carpeta per al projecte

Crea una nova carpeta al teu ordinador, per exemple: primer-joc-phaser.
Obre aquesta carpeta amb el teu editor de codi.

3.2. Afegir els fitxers bàsics

Crea els següents fitxers dins la carpeta:

Nom del fitxer	Descripció
`index.html`	Punt d’entrada del joc (fitxer HTML)
`main.js`	Codi JavaScript principal
`assets/`	Carpeta per a imatges, sons, etc.

Exemple d’estructura:

primer-joc-phaser/
│
├── index.html
├── main.js
└── assets/

Afegir Phaser al projecte

Hi ha dues maneres principals d’afegir Phaser:

4.1. Mitjançant CDN (la més senzilla per començar)

Afegeix la següent línia dins la secció <head> del teu index.html:

<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>

4.2. Mitjançant npm (per a projectes més avançats)

Si vols utilitzar Node.js i npm:

Obre una terminal dins la carpeta del projecte.
Executa:
```
npm init -y
npm install phaser
```
Importa Phaser al teu fitxer JavaScript:
```
import Phaser from 'phaser';
```

Nota: Aquesta opció requereix configurar un sistema de bundling (com Webpack o Parcel). Si ets principiant, comença amb la versió CDN.

Exemple de fitxer `index.html` bàsic

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>El meu primer joc amb Phaser</title>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

Explicació:

Es carrega Phaser des del CDN.
Es carrega el fitxer main.js on escriuràs el teu codi de joc.

Provar el teu projecte localment

Opció 1: Obrir directament l’`index.html`

Fes doble clic a l’index.html per obrir-lo al navegador.
Limitació: Algunes funcionalitats (com carregar fitxers externs) poden no funcionar per restriccions de seguretat.

Opció 2: Utilitzar un servidor local (recomanat)

Amb VS Code:

Instal·la l’extensió Live Server.
Fes clic dret a l’index.html i selecciona “Open with Live Server”.

Amb Node.js:

Instal·la un servidor simple:
```
npm install -g http-server
```
Executa:
```
http-server
```
Obre l’adreça que et mostra la terminal (normalment http://localhost:8080).

Exercici pràctic

Enunciat

Crea una carpeta anomenada primer-joc-phaser.
Afegeix-hi els fitxers index.html i main.js.
Carrega Phaser mitjançant CDN a l’index.html.
Mostra un missatge per consola des de main.js per comprovar que tot funciona.

Solució

index.html

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>El meu primer joc amb Phaser</title>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

console.log('Tot preparat per començar amb Phaser!');

Comprova: Obre la consola del navegador (F12) i verifica que apareix el missatge.

Errors comuns i consells

Error habitual	Solució
No es veu el missatge a la consola	Assegura’t que el fitxer `main.js` està ben referenciat a l’`index.html` i que el navegador està obert a la carpeta correcta.
Error de càrrega de Phaser	Comprova que la URL del CDN és correcta.
No troba el fitxer `main.js`	Comprova que el fitxer existeix i està a la mateixa carpeta que l’`index.html`.

Resum

Has après a instal·lar les eines bàsiques per desenvolupar amb Phaser.
Has creat l’estructura mínima d’un projecte.
Saps com afegir Phaser al teu projecte i executar-lo localment.
Has fet una primera prova per assegurar que tot funciona.

Ara ja estàs preparat per començar a crear el teu primer joc amb Phaser!
En el següent tema, aprendràs a crear el teu primer projecte amb Phaser i a veure els primers resultats a la pantalla.

Configuració del teu entorn de desenvolupament

Requisits previs

Instal·lació de les eines necessàries

2.1. Editor de codi

2.2. Navegador web

2.3. Node.js i npm (opcional però recomanat)

Crear l’estructura bàsica del projecte

3.1. Crear una carpeta per al projecte

3.2. Afegir els fitxers bàsics

Afegir Phaser al projecte

4.1. Mitjançant CDN (la més senzilla per començar)

4.2. Mitjançant npm (per a projectes més avançats)

Exemple de fitxer `index.html` bàsic

Provar el teu projecte localment

Opció 1: Obrir directament l’`index.html`

Opció 2: Utilitzar un servidor local (recomanat)

Amb VS Code:

Amb Node.js:

Exercici pràctic

Enunciat

Solució

Errors comuns i consells

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

Configuració del teu entorn de desenvolupament

Requisits previs

Instal·lació de les eines necessàries

2.1. Editor de codi

2.2. Navegador web

2.3. Node.js i npm (opcional però recomanat)

Crear l’estructura bàsica del projecte

3.1. Crear una carpeta per al projecte

3.2. Afegir els fitxers bàsics

Afegir Phaser al projecte

4.1. Mitjançant CDN (la més senzilla per començar)

4.2. Mitjançant npm (per a projectes més avançats)

Exemple de fitxer index.html bàsic

Provar el teu projecte localment

Opció 1: Obrir directament l’index.html

Opció 2: Utilitzar un servidor local (recomanat)

Amb VS Code:

Amb Node.js:

Exercici pràctic

Enunciat

Solució

Errors comuns i consells

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

Exemple de fitxer `index.html` bàsic

Opció 1: Obrir directament l’`index.html`