Pacific Rim, sense Pacific i sense Rim

Joc multijugador real time tipus escape room

Comment

Inspiration

Ens agraden els escape rooms i els jocs cooperatius on la comunicació és tan important com la destresa. Volíem recrear aquella sensació de “jo veig una cosa i tu una altra”, fent que ambdós jugadors s'hagin de coordinar, repartir-se rols i prendre decisions ràpides.

També ens venia de gust fer un projecte amb realtime de veritat (sincronització de jocs, xat i veu) i aprendre com es construeix una experiència multijugador de principi a fi.

What it does

És un joc tipus escape room en el que 2 jugadors han de col·laborar per escapar del castell.

Els jugadors han d'introduir el seu nom i esperar a que un altre jugador es connecti per tal d'unir-los en una sessió de joc. Una vegada iniciada la sessió, els jugadors han de resoldre puzzles/proves per tal de desbloquejar les portes i avançar per les diferents sales.

El joc està dissenyat amb proves asimètriques: sovint un jugador té l'acció (resoldre / controlar) i l'altre té la informació (pistes / visió completa). Això obliga a parlar, descriure el que veus i posar-se d'acord.

Inclou:

  • Mapa de sales (4 sales) que es van desbloquejant en ordre.
  • Proves cooperatives per obrir cada porta:
    • Candau (codi de 3 dígits): un jugador introdueix el codi i l'altre rep la pista (figures/polígons o un grid d'imatges).
    • Laberint: un jugador es mou per la graella mentre l'altre veu les parets i l'ajuda a arribar al final.
    • Pong cooperatiu: cada jugador controla una pala diferent i han d'aconseguir una ratxa de rebots per superar la prova.
  • Comptador de temps de la partida i pantalla final en completar el joc.
  • Xat en temps real: text + xat de veu entre els dos jugadors per coordinar-se.

How we built it

El frontend està desenvolupat amb React + Vite i el backend amb Flask.

Temps real i sincronització

  • Hem fet servir Flask-SocketIO al backend i socket.io-client al frontend per:
    • emparellar els dos jugadors (quan hi ha 2 connectats),
    • enviar missatges de xat,
    • sincronitzar estat de les proves (posicions al laberint, estat del pong, desbloqueig de sales, final de partida).

Proves

  • Laberint: generació determinista amb una seed comuna i control de posició sincronitzat.
  • Candau: el backend genera un codi aleatori i el joc reparteix la pista i la interfície de “resolució” segons rol.
  • Pong: un client simula la pilota i el marcador, i l'altre envia la pala; tot es propaga per sockets.

Xat de veu

  • La veu va per WebRTC (àudio P2P) amb un sistema de signaling via Socket.IO per establir la connexió.

Challenges we ran into

  • Sincronització en temps real: evitar desync i que cada prova es vegi coherent des dels dos navegadors.
  • Disseny asimètric: crear proves on cada rol tingui informació/accions diferents, però que continuïn sent justes i divertides.
  • WebRTC i permisos: gestionar l'accés al micròfon i les restriccions d'autoplay del navegador, i fer una neteja correcta de connexions i streams.
  • Acabar-ho en temps de hackathon: retallar a l'essencial i fer que el flux “login → partida → final” fos robust.
  • El fet que no teniem ni idea de fer jocs :)

Accomplishments that we're proud of

Hem aconseguit desenvolupar un joc multijugador, sent la primera vegada que fem un joc.

A més:

  • Hem integrat 3 tipus de proves amb mecàniques diferents (lògica/observació, navegació, reflexos).
  • Hem aconseguit que la col·laboració sigui necessària gràcies a la informació asimètrica.
  • Hem afegit xat de text i veu dins la mateixa UI.

El resultat final és sorprenentment usable, pels constraints de temps i de coneixements que teniem.

What we learned

  • Com modelar un joc multijugador en temps real amb Socket.IO (events, broadcast, estat compartit).
  • Conceptes bàsics de WebRTC (peer connection, ICE candidates) i el paper del servidor com a signaling.
  • Disseny de puzzles cooperatius: com repartir informació i accions perquè la comunicació importi.
  • Com fer servir React i Vite per fer interfícies web.

What's next for Pacific Rim, sense Pacific i sense Rim

  • Afegir sales i proves noves (més varietat i dificultat progressiva).
  • Millorar el matchmaking: sales privades/codis de sala.
  • Fer-lo “llest per producció”: desplegament, configuració d'origens/CORS.
  • Afegir el rol de moderador, que pugui observar en temps real el progrés dels jugadors i escoltar el xat.

How to play (local)

  1. Backend: a backend/, executa ./run.sh (o python app.py) i comprova que escolta a http://localhost:5000.
  2. Frontend: a front/xuklis/, executa npm run dev i obre l'URL de Vite.
  3. Obre dues pestanyes o dos navegadors, posa dos noms diferents, i quan aparegui la partida:
    • obre el Chat per parlar (text/veu),
    • entra a les sales i col·laboreu per desbloquejar-les fins escapar del castell.

Built With

Share this project:

Updates