Programem un joc de cartes multijugador
Sou aficionats als jocs de cartes? Tant si us passeu hores jugant amb la família com si no, la baralla espanyola de 48 cartes (o 40 si no es conten els 8 i 9) repartits en 4 colls (pals): or, copes, espases i garrots (bastos). Simbolitzen el poder de les armes, els diners i les begudes (1).
Aquests jocs mai passen de moda, i com que no tenim cartes al centre (i plou molt…), hem decidit implementar un joc via navegador web multijugador. Sabem que hi ha molts jocs
(mus, brisca, botifarra…), però per evitar excessives complicacions, implementarem el famós joc del Cinquillo.
No el coneixeu? https://es.wikipedia.org/wiki/Cinquillo_(juego)
No sabeu com es juga? https://www.youtube.com/watch?v=yMvv7vDc854
Nota: Jugarem amb la baralla de 48 cartes i modalitats de 2, 3 o 4 jugadors.
Repartirem 24, 16 o 12 cartes per jugador (segons el número de jugadors).
Si tenim moltes cartes, millor representar-les en dues fileres.
Les característiques que ha de tenir la nostra implementació del joc són les següents:
Definiu una estructura de codi de servidor i de client. Com que la càrrega de recursos és mínima (no hi ha gràfics 3D, ni una CPU processant…), la major part del codi s’executarà des del servidor.
Al ser multijugador (els clients web interactuen alhora), cal un sistema d’enviament d’informació entre el servidor i la resta de clients.
Finalment, la interfície de joc ha de ser agradable, i si se li pot donar animacions senzilles a les cartes, millor que millor!
Fixeu-vos que aquests requisits són diferents dels que estem acostumats. Per això, heu d’estudiar i fer servir les següents llibreries:
Node.js : Servidor fet en JS. Es pot combinar amb Express.
Socket.io: Llibreria per transmetre informació via WebSockets.
Phaser 4: Llibreria en JS per crear videojocs, us ajudarà amb el tema d’animacions de cartes, etc.
Molt bé, a partir d’aquí com ha de funcionar la lògica del programa? Veiem-ho com un diagrama d’activitats per fases:
El servidor arranca i està atent a rebre noves connexions dels clients.
Els clients es van connectant a una sala d’espera (es demana un Nick). La sala pot ser molt bàsica, o amb un xat integrat, etc.
Un jugador crearà una “Nova partida”, i la resta s’unirà a la partida. Quan tothom estigui a punt, el jugador que ha creat la partida, premerà el botó d’Iniciar partida (el nombre de jugadors sempre és entre 2 i 4).
El servidor “treu els jugadors” de la sala d’espera i crea una nova partida entre ells.
Es segueixen les regles del joc. El repartiment inicial de cartes el fa el servidor i és qui vetllarà perquè les accions dels jugadors siguin legals.
El servidor ha de dir sempre a qui li toca jugar.
També pot permetre continuar el xat només entre els participants de la partida.
En finalitzar una partida, s’obté un guanyador (el sistema ho registra), i retorna a tots els jugadors a la sala d’espera.
Si hi ha algun jugador que es desconnecta de la partida, aquesta s’acaba i la resta de jugadors tornen a la sala d’espera (després es pot “penalitzar” o no al jugador fugat).
Hi ha molts detalls que no s’expliquen en aquest últim projecte, i volem que sigui així per tal de donar-vos autonomia i us esforceu al màxim. Demostrem el que sabem, treballem en equip i que guanyi el millor! 🙂
Per poder complir els terminis d’entrega hem decidit dividir en quatre equips. Cada equip s’encarregarà del disseny, programació, documentació i posada en marxa d’una versió del cinquillo en línia.
Com en el projecte anterior, hem decidit emprar una filosofia de desenvolupament àgil i treballar utilitzant la metodologia SCRUM.
Parts del projecte:
Control de versions
Crear un repositori a Github i compartir-lo amb l’equip docent
Crear un repositori local i vincular-lo amb el remot
Servidor web
Crear una màquina virtual amb un servidor web Node.js
Executar l’aplicació en el servidor
Aplicació (servidor)
Gestionar la connexió i informació dels sockets entre clients.
Gestionar la sala d’espera. Afegir un xat bàsic. Permetre crear noves partides i destruir-les. Permetre “treure” i “restaurar” els clients de la sala d’espera.
Gestionar una partida. Iniciar el repartiment de cartes. Enviar i rebre la informació dels clients. Comprovar que els moviments siguin legals. Avaluar la lògica del joc. Detectar el fi d’una partida i un guanyador.
(Extra) Registrar usuaris i desar historial d’activitat, partides jugades, partides guanyades…
Aplicació (client)
Frameworks i llibreries client:
És obligatori fer servir websockets amb Node.js i Socket.io.
És recomanable fer servir un motor de joc amb Phaser 3.
Podeu fer servir un framework JS avançat (Vue, Angular…).
Opcional: Implementar Tests unitaris amb Jest.
Interfícies web
Treballar amb la Sala d’Espera, i del motor de joc del Cinquillo. Han de ser Responsive i ham de complir amb criteris d’accessibilitat (nivell A) i d’usabilitat web.
Cal generar animacions CSS3 pel moviment de les cartes (manual o Phaser).
Podeu fer servir un framework CSS treballat (Bootstrap, Tailwind, Bulma…) a partir de regles SCSS.
Accions bàsiques a implementar
Permetre connectar, desconnectar, enviar missatge al xat (Sala d’espera).
Permetre accions de Crear partida, Unir a partida, Iniciar partida.
Implementació de la part lògica del client en el joc. En 1a fase sense interfície gràfica, i en 2a fase amb mode gràfic.
Documentació
Planificació
Requisits
Tests de funcionament
Millores
Diagrama d’estats
Diagrama de casos d’ús
Documentar el codi amb format Dockbloc
Etapes:
Etapa 1
Hauríeu de tenir:
Servidor web funcionant i amb accés a una sala d’espera (v1).
Clients que es connecten a la sala d’espera i ja poden parlar entre ells.
Planificació del projecte.
Diagrama de casos d’ús.
Anàlisi de requisits.
Crear un repositori a Github i vincular el repositori local.
Etapa 2
Hauríeu de tenir:
Sala d’espera (v2) amb funcionalitats de les partides implementades.
Motor del cinquillo (v1): es veuen els jugadors , però encara no es pot jugar a una partida.
Etapa 3
Hauríeu de tenir:
Motor del cinquillo (v2): regles de joc implementades.
Comunicació feta entre clients i servidor. Es pot jugar a una partida.
Es renderitza correctament la interfície del joc amb el client web.
Afegir la funcionalitat de xat durant una partida.
Altres millores que hagueu pogut afegir 🙂
Etapa 4
Hauríeu de tenir:
Acabar de perfilar el motor del cinquillo (v3): gestionar desconnexions, guanyadors, etc.
Proves de funcionament
Generar automàticament la documentació del codi
Implementar les correccions
Mètode d’entrega:
Control periòdic del projecte a l’aula.
Entrega de la documentació en format PDF.
Entrega del codi compartint el repositori de Github.
Prova final de funcionament.