Kildekode til bordtennisspil: Sunset Rallys filer, fysik og kampagne
Et 3D-bordtennisspil til browseren, åbnet fil for fil: hvor fysikken, scoringen, kampagnen og stederne ligger, og hvad du ændrer først.
Hvis du har brug for kildekode til bordtennis, som du kan hoste og ændre, er Sunset Rally et færdigt 3D-bordtennisspil til browseren med en kampagne på ni kampe, tre CPU-modstandere, et workshop og det fulde TypeScript-projekt, til 39 USD på listepris. Spilmappen er allerede bygget og ikke minificeret, så du kan uploade den først og læse koden senere.
Sportsspil er sværere at tilpasse, end de ser ud, for det sjove sidder i fysikken og styringen, ikke i menuerne. Denne guide viser, hvor hver af dem ligger i Sunset Rally-projektet, hvad du trygt kan ændre, og hvad udgaven udelader.
Sådan spiller bordtennisspillet
Kampene går til syv point mod en CPU-modstander. Spillerne flytter markøren eller trækker for at styre bat'en, og slagene sker automatisk. Et skub op giver mere kraft, bevægelse til siden placerer bolden, et træk nedad spiller et drop shot, og en bold, der står højt, er der til at blive smashet.
En valgfri assist, som spillerne kan slå til og fra under en kamp, hjælper bat'en med at finde boldens højde. Det betyder noget for en offentlig side: en førstegangsspiller på en telefon kan stadig returnere bolden.
Der er tre CPU-modstandere med hver sin stil: tålmodige Capi, legesyge Nori og præcise Miso, hver på Easy, Normal eller Hard. Training mode (træningstilstand) giver dig en partner, der returnerer hver bold. Efter en kamp viser et replay det afgørende point igen.
Hvad kildekoden til bordtennisspil-pakken indeholder
- En færdig game/-mappe, allerede bygget og ikke minificeret.
- TypeScript-udviklerkilden med dens Vite-opsætning og spillets assets, i source/.
- Illustrerede manualer på engelsk og portugisisk med rigtige skærmbilleder.
- Skrifttyper og lydfiler, der følger med spillet.
- Noter om tredjepartslicenser og et changelog.
Stakken er TypeScript, Three.js r184, Vite og WebGL2. Filerne omfatter HTML, CSS, JavaScript, TypeScript og JSON. Grænsefladen findes på 14 sprog: engelsk, portugisisk, spansk, fransk, tysk, italiensk, hollandsk, polsk, tyrkisk, russisk, indonesisk, japansk, koreansk og forenklet kinesisk. Manualerne findes kun på engelsk og portugisisk.
Indholdet omkring kampene er også en del af pakken: en Sunset Circuit med ni kampe i tre etaper, tre steder (Sunset-haven, Sakura-haven og Seaside-caféen) om morgenen, eftermiddagen, natten eller i regnvejr, og et workshop, hvor mønter fra sejre køber bat-farver, gummibelægninger, former, greb, træsorter, kantbånd, klistermærker og bold- og bordstile.
Hvor tingene ligger i koden
Manualen kobler hver del af spillet til en fil. Dette er listen at have åben, mens du arbejder:
- Campaign.ts: de ni kampagnekampe og deres stjernemål.
- Places.ts: hvordan hvert sted ser ud.
- physics.ts: bold- og bat-fysikken.
- match.ts: scoring og kampregler.
- i18n.ts: engelsk og portugisisk grænsefladetekst; de andre sprog ligger i locales-mappen.
- styles.css: styling af menuer og skærme.
Hver kampagnekamp har op til tre stjerner: vind, ram tre hjørner og spil en rally på ti slag. Det giver 27 stjerner, og når hvert sted er ryddet, vinder man en værkstedspræmie. Fordi stjernebetingelserne ligger i én kampagnefil, kan du gøre kampagnen lettere eller sværere uden at lede i koden.
Det skal du ændre først i en bordtennisskabelon
Vi foreslår denne rækkefølge, fra lav risiko til høj risiko.
- Grænsefladetekst og spillets navn, i i18n.ts og locales-mappen.
- Farver og skærme, i styles.css.
- Værkstedsstile for bats, bolde og borde, så udstyret bærer dit brand.
- Stedernes grafik, i Places.ts.
- Kampagnekampe og stjernemål, i Campaign.ts.
- Fysik og scoring, i physics.ts og match.ts, kun hvis du har brug for en anden fornemmelse.
Manualen tilføjer tre regler, det er værd at følge. Hold oplåsnings-ID'er, item-ID'er og gemme-nøgler stabile, ellers mister spillerne det, de har optjent. Tag en sikkerhedskopi, før du går i gang. Ændr én funktion ad gangen, så du ved, hvilken redigering der gav hvad.
White label er tilladt: dit navn og logo, eller din kundes, kan erstatte vores.
Bygge igen, hosting og indlejring
For at spille skal intet bygges. Upload indholdet af game/ til en hvilken som helst HTTP(S)-host, der serverer statiske filer, behold de relative stier, og åbn adressen. Der kræves ingen PHP, database eller konto.
For at ændre kildekoden skal du bruge Node.js (24 LTS anbefales) og npm. Ret TypeScript, byg igen med Vite, og erstat den hostede game/-mappe med det nye output.
Browseren skal understøtte JavaScript, ES-moduler og WebGL2. Touch- og musestyring understøttes begge, og kontrollerne tilpasser sig skærmstørrelsen. Ydelsen afhænger af browseren og enheden, så test på de telefoner, dine spillere bruger.
- Upload game/ til en testmappe på din host.
- Spil én kamp i en desktopbrowser og én på en telefon.
- Lav dine tekst- og stilændringer i source/, og byg igen.
- Erstat hele testmappen, og spil igen.
- Flyt den til den endelige adresse.
Hvad udgaven ikke inkluderer
Udgaven spilles mod CPU'en: kampagne, frit spil og træning. Online multiplayer, online-rum, online-ranglister og skykonti er ikke en del af pakken, og der er ingen tospillertilstand. Der er ingen reklame-SDK'er eller konti, og native apps og hosting er ikke inkluderet.
Fremskridt bliver i spillerens browser: kampagnestjerner, resultater, statistik, replays og værkstedsgenstande. Ingen server eller konto bruges, så der er intet at vedligeholde efter lancering.
Har du brug for en online-tilstand, en portal-SDK, en version til appbutikken eller installation på din server, er det en særskilt ydelse, der prissættes pr. projekt.
Bed om et tilbud på skræddersyet arbejde
Licens, support og pris i ét afsnit
Ét køb giver en evigvarende, ikke-eksklusiv licens til ét slutprodukt, dit eller én kundes, som spillerne må bruge gratis eller med reklameindtægter. Du må ændre koden, grafikken og lyden i det produkt, men du må ikke videresælge eller dele skabelonen, dens kildekode eller dens assets alene. Support varer 6 måneder, eller 12 med tillægget ved kassen, og dækker installation og brug af filerne samt rettelse af reproducerbare fejl; tilpasning, hosting og SDK- eller portalintegration tilbydes særskilt. Listeprisen er 39 USD; indtil 30. november 2026 giver en Black Friday-kampagne 15 % rabat på alle skabeloner, så Sunset Rally koster 33,15 USD, og fra 1. december vender priserne tilbage til listepris.
Ofte stillede spørgsmål
Skal jeg bygge noget for at bruge dette bordtennisspil?
Nej. Mappen game/ er allerede bygget. Upload dens indhold til en statisk webhost, og åbn adressen. Node.js og npm er kun nødvendige, hvis du ændrer TypeScript og bygger igen.
Findes der en tospiller- eller online-tilstand?
Nej. Udgaven spilles mod CPU'en i kampagnen, frie kampe og træning.
Kan jeg ændre kampagnen og stjernemålene?
Ja. Kampe og stjernebetingelser ligger i Campaign.ts. Byg igen bagefter med Node.js.
Kan jeg ændre, hvordan bolden opfører sig?
Ja. Fysikken ligger i physics.ts, og scoringsreglerne i match.ts. Ændr én ting ad gangen, og test mod hver modstander.
Virker det på telefoner?
Ja, med touchstyring, der tilpasser sig skærmen. WebGL2 kræves, og ydelsen afhænger af enheden, så test de telefoner, du sigter mod.
Hvor gemmes fremskridt?
I spillerens browser. Ingen server eller konto bruges.
Andre sportsskabeloner at sammenligne
Hvis du bygger et sportshjørne til en side, passer to andre skabeloner godt ved siden af Sunset Rally. Velvet Pool er et 8-ball-billardspil med en CPU-modstander og lokal to-spiller, skrevet i ren JavaScript med WebGL2, til 39 USD på listepris. Puttide er et 3D-minigolfspil med 30 huller, bygget på Three.js og Rapier, til 39 USD på listepris. Begge har 14 grænsefladesprog.
Sunset Rally passer til portaler og sider, der vil have et sportsspil med korte kampe, studier, der leverer et brandet spil til én kunde, og udviklere, der vil have et læsbart TypeScript- og Three.js-projekt at lære af eller udvide. Har du brug for to spillere på samme enhed, har Velvet Pool den tilstand, og Sunset Rally har den ikke.
Se Velvet Pool, 8-ball-spillet
Se Puttide, 3D-minigolfspillet
Køber du to eller flere skabeloner i samme bestilling, falder prisen pr. licens: 5 % rabat for to, 10 % for tre, 15 % for fire og 20 % for fem eller flere.