Stormbreak Royale
Een real-time Pokémon battle royale voor de browser, mobile first, in de stijl van Black/White.
Speel: https://stormbreak.app
Er zijn drie modi:
- Battle Royale: 12 trainers, wie als laatste overblijft wint.
- 1 vs 1: een duel in een stadion, best of 3: online, tegen de CPU of met een vriend.
- Raid: alleen of samen tegen één enorme eindbaas.
Op het home-scherm kies je eerst de modus en dan hoe je speelt: online, solo/CPU of met vrienden.
Na een korte uitleg vul je je naam in en kies je: solo tegen bots, of samen met vrienden. Je kiest een trainer en één partner-Pokémon uit een roster van 24 (te filteren op rol en op melee/ranged); in de wereld vang je er nog twee bij (max. 3). Daarna word je gedropt op een grote kaart met in totaal 12 trainers. Je Pokémon loopt achter je aan en vecht in real time. Versla en vang wilde Pokémon, raap Master Balls en items op en blijf binnen de zone. Wie als laatste trainer overblijft, wint.
Spelen
npm install
npm run dev # http://localhost:5173 (ook bereikbaar via je LAN voor je telefoon)
npm run build # type-check + productie-build naar dist/
Vercel herkent het project automatisch als Vite-app (build: npm run build, output: dist).
Besturing
| Actie | Mobiel | Toetsenbord |
|---|
| Lopen | Joystick: tik ergens op de linkerhelft | WASD / pijltjes, of houd de rechtermuisknop vast (lopen naar de cursor) |
| Aanval 1 | Tik = automatisch richten, vasthouden = blijven aanvallen, slepen = zelf richten, loslaten = vuren | Linkermuisknop (vasthouden = blijven schieten) |
| Aanval 2 / 3 / ultimate | Idem op de andere knoppen | Q / E / R, gericht op je cursor |
| Pokémon wisselen | Tik op een Pokémon in je team (linksboven) | F |
| Vangen (verzwakte wilde Pokémon) | VANG!-knop | Spatie |
| Master Ball / Potion / Revive | Itemknoppen | 1 / 2 / 3 |
| Pauze / game verlaten | ❚❚-knop of de terugknop van je telefoon (vraagt eerst om bevestiging) | Esc |
- Eigen toetsen: Opties → Besturing. Tik op een actie en druk op de nieuwe toets; een toets die al in gebruik is, wisselt van plek. Esc pauzeert altijd en de pijltjes lopen altijd ook. Aanval 1 kan naast de linkermuisknop ook een toets krijgen. Bewaard in de browser (
keys.ts).
- Controller (ook handhelds zoals de AYN Thor): linkerstick lopen, rechterstick richten, A / X / Y aanval 1-3, RT of RB ultimate, B vangen, LB wissel, D-pad items, Start pauze, Select scorebord, LT chat. In menu's: D-pad of stick navigeert, A kiest, B terug, LB/RB tabbladen (
pad.ts).
- Tweede scherm (
/duo/, bijvoorbeeld het onderscherm van de AYN Thor): kaart, baas of score, je team (tik = wissel), items, scorebord, pauze en de chat. Verbindt vanzelf met het spel in dezelfde browser; installeerbaar als eigen app ("Stormbreak Duo") op duo.stormbreak.app (eigen origin, dus los van de hoofdapp; een verborgen frame duo-bridge.html op www geeft de berichten door, want een BroadcastChannel werkt alleen binnen één origin). Opties → Tweede scherm probeert het via de browser op het andere scherm te zetten (duo.ts, ui/duoView.ts).
- Geluid via mediaspeler (Opties): stuurt al het geluid via een
<audio>-element met media session in plaats van direct naar de speakers. Standaard uit; Auto = aan zolang een tweede scherm verbonden is. Op de AYN Thor hielp het niet: Chrome dempt daar al het geluid zodra beide schermen een Chrome-venster hebben.
- Moeilijkheid (Makkelijk / Normaal / Moeilijk) bij solo, tegen de CPU en in je eigen lobby: hoe scherp de bots, de CPU of de baas spelen en hoeveel schade je van ze krijgt (×0,7 / ×1 / ×1,3). PvE-rankingpunten tellen half (makkelijk) of 1,5× (moeilijk). Openbare lobby's spelen altijd normaal (
data/difficulty.ts).
Samen spelen
Zit je naast iemand? Dan heb je zo een potje:
- Speler 1 vult in het hoofdmenu een naam in, kiest een modus, tikt Met vrienden en dan Potje maken. Er verschijnt een code van 4 tekens en een QR-code.
- Speler 2 tikt bij een modus op Met vrienden en typt de code bij Meedoen, of scant de QR-code met de camera. De link opent de game en doet meteen mee.
- In de lobby kiest iedereen een trainer en Pokémon met Team kiezen en tikt op Klaar. Je ziet bij iedereen of die klaar is, en je kunt chatten (ook met snelle knoppen).
- De host kiest bovenin de lobby de modus (Battle Royale, 1 vs 1 of Raid) en de wereld. De anderen zien die keuze meteen. 1 vs 1 kan alleen met precies 2 spelers.
- Zodra iedereen klaar is, tikt de host Start! Iedereen ziet 8 seconden een laadscherm met tips en start dan tegelijk. De lege plekken (tot 12) worden bots.
In het potje zelf kun je ook chatten via de 💬-knop (op desktop: Enter).
Na afloop ga je terug naar de lobby voor een rematch, of kijk je mee tot het potje klaar is. Valt iemand weg, dan neemt een bot die trainer over.
Hoe het technisch werkt: de telefoons praten rechtstreeks met elkaar via WebRTC; PeerJS helpt ze alleen elkaar te vinden. Er is dus geen eigen gameserver nodig.
- De host rekent het hele potje uit: bots, wilde Pokémon, schade, de storm en in een raid de baas en zijn aanvallen. Hij stuurt 20× per seconde de stand naar de anderen, met de effecten, geluiden en banners die zij moeten zien.
- Je eigen trainer beweegt lokaal, zodat lopen direct aanvoelt.
- Elke speler krijgt alleen details van wat in de buurt is, plus het minimum van de rest (positie, of iemand nog leeft, legendarische Pokémon voor de minimap). Dat is ~30 KB/s per medespeler. Getest met 8 spelers tegelijk; een potje kan er 12 hebben.
- De host moet de game open houden. Gaat het scherm van de host op slot, dan staat het potje stil.
Je naam en een willekeurige speler-id worden op je toestel bewaard (src/profile.ts). Een account/inlog kan dat later vervangen.
Lokaal testen zonder internet: start een eigen PeerJS-server (npx peer --port 9000) en open de game met ?peer=127.0.0.1:9000.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
