Studiu de caz03 / 19
Mezha
Joc de strategie în browser · demo
Mezha este jocul meu de browser, acum un demo jucabil. Pământul este ascuns în ceață, muncitorii îl explorează celulă cu celulă, iar cifrele de pe pământul explorat arată câte bârloguri și comori sunt în jur. Din ce găsești crești regatul, iar scopul este să refaci vechile sanctuare.
- Rol
- Singur · game design și cod
- Perioadă
- oct. 2026 – prezent
- Context
- Proiect personal
- Format
- Browser · desktop și mobil
- Next.js 16
- React 19
- TypeScript
- Canvas 2D
- Node.js
- ws
- Cloudflare Tunnel
- Vercel
Sarcina
Am vrut să văd cât de departe poate merge un joc pe canvas într-o aplicație Next.js obișnuită. Simularea rulează în timp real cu zeci de unități, harta trebuie să rămână clară la 44 × 30 de hexagoane, iar același motor trebuie să meargă și singur în browser, și pe un server pentru mai mulți jucători.
- O hartă clară, cu ceață, cifre și granițe
- O economie și dușmani care țin interesul într-o partidă lungă
- Joc online fără să rescriu motorul
Ce am construit
Lumea și economia
- O hartă hexagonală de până la 44 × 30 cu râuri, dealuri și munți, trei niveluri de cunoaștere a terenului și o minihartă.
- Căutarea drumului pentru unități peste râuri, drumuri și poduri.
- Anotimpuri care schimbă economia: iarna casele și castelul ard lemne.
- Niveluri ale castelului de la cătun la cetate, lanțuri de meșteșuguri pentru scânduri, pâine și haine, și o piață.
Dușmanii și armata
- Bârloguri de goblini care cresc în timp, lupi iarna, tâlhari, troli, dezertori din forturi vechi și un dragon.
- Trupe cu grade, ziduri cu porți și un clopot de alarmă care face din săteni o miliție.
Jocul împreună
- Între două și șase regate pe aceeași hartă: fiecare pentru el sau pe echipe, de la 1 contra 1 la 3 contra 3 și 2 contra 2 contra 2.
- Un server de joc pe Node.js și ws decide totul și ține camerele. Browserul reproduce jocul din instantanee, iar fiecare echipă vede doar ce a explorat.
- Un script de gazdă deschide un tunel Cloudflare și pune adresa serverului în linkul de invitație.
Grafica și verificările
- Toată grafica este desenată din cod pe un singur canvas, cu zoom, mutarea hărții, mouse și atingere.
- Un ghid cu meniu lateral și căutare explică fiecare clădire, dușman și regulă.
- Teste automate în headless Chrome pun castelul, explorează, construiesc, luptă și salvează capturi de ecran. Un test de rețea joacă o partidă în două file.
Rezultat
- de linii TypeScript
- 46k
- regate pe aceeași hartă online
- 2–6
- moduri de joc
- 3
Jocul este un demo și continuă să crească. Modul pentru un jucător rulează complet în browser la linkul de mai sus; jocul online are nevoie de serverul de joc. Codul este privat și îl pot arăta la cerere.