Källkod till bordtennisspel: Sunset Rallys filer, fysik och kampanj
En 3D-pingis för webbläsaren, öppnad fil för fil: var fysiken, poängen, kampanjen och platserna finns och vad du ändrar först.
Behöver du källkod till bordtennisspel som du kan lägga ut och ändra? Sunset Rally är ett färdigt 3D-pingisspel för webbläsaren med en kampanj på nio matcher, tre CPU-motståndare, en verkstad och hela TypeScript-projektet, för 39 USD i listpris. Spelmappen är redan byggd och oförminskad, så du kan ladda upp den först och läsa koden senare.
Sportspel är svårare att anpassa än de ser ut, eftersom det roliga sitter i fysiken och kontrollerna, inte i menyerna. Den här guiden visar var var och en av dem finns i Sunset Rally-projektet, vad du kan ändra säkert och vad den här utgåvan utelämnar.
Så spelas pingisspelet
Matcherna går till sju poäng mot en CPU-motståndare. Spelarna flyttar pekaren eller drar för att styra racketen, och träffarna sker automatiskt. Dras uppåt ger det extra kraft, rörelse åt sidan placerar bollen, dras nedåt spelas ett dropp-slag, och en boll som ligger högt finns där för att smashas.
En valfri assistans, som spelarna kan slå på och av under en match, hjälper racketen att hitta bollens höjd. Det spelar roll för en publik sajt: en förstagångsspelare på en telefon kan ändå returnera bollen.
Det finns tre CPU-motståndare med egna stilar: den tålmodiga Capi, den lekfulla Nori och den precisa Miso, var och en på Easy, Normal eller Hard (lätt, normal eller svår). Träningsläge (training mode) ger dig en partner som returnerar varje boll. Efter en match visar en repris den avgörande poängen igen.
Vad paketet med källkod till bordtennisspel innehåller
- En färdig spelmapp game/, redan byggd och oförminskad.
- TypeScript-källkoden för utvecklare med sin Vite-konfiguration och spelets tillgångar, i source/.
- Illustrerade manualer på engelska och portugisiska med riktiga skärmbilder.
- Typsnitt och ljudfiler som följer med spelet.
- Licensnotiser för tredjepartskomponenter och en ändringslogg.
Stacken är TypeScript, Three.js r184, Vite och WebGL2. Filerna omfattar HTML, CSS, JavaScript, TypeScript och JSON. Gränssnittet finns på 14 språk: engelska, portugisiska, spanska, franska, tyska, italienska, nederländska, polska, turkiska, ryska, indonesiska, japanska, koreanska och förenklad kinesiska. Manualerna finns bara på engelska och portugisiska.
Innehållet runt matcherna ingår också i paketet: en Sunset Circuit med nio matcher i tre etapper, tre platser (Sunset-trädgården, Sakura-trädgården och Seaside-caféet) på morgonen, eftermiddagen, natten eller i regn, och en verkstad där mynt från vinster köper racketfärger, gummin, former, handtag, träslag, kanttejp, klistermärken samt stilar för bollar och bord.
Var sakerna finns i koden
Manualen kopplar varje del av spelet till en fil. Det här är listan att ha öppen när du arbetar:
- Campaign.ts: de nio kampanjmatcherna och deras stjärnmål.
- Places.ts: hur varje plats ser ut.
- physics.ts: boll- och racketfysiken.
- match.ts: poäng- och matchregler.
- i18n.ts: engelska och portugisiska gränssnittstexter. De övriga språken finns i mappen locales.
- styles.css: utformningen av menyer och skärmar.
Varje kampanjmatch har upp till tre stjärnor: vinn, träffa tre hörn och spela en rally på tio slag. Det blir 27 stjärnor, och att klara varje plats ger ett pris i verkstaden. Eftersom stjärnvillkoren ligger i en kampanjfil kan du göra kampanjen lättare eller svårare utan att leta i koden.
Vad du ändrar först i en mall för bordtennis
Vi föreslår den här ordningen, från låg risk till hög risk.
- Gränssnittstext och spelnamn, i i18n.ts och mappen locales.
- Färger och skärmar, i styles.css.
- Verkstadens stilar för racketar, bollar och bord, så att utrustningen bär ditt varumärke.
- Platsernas utseende, i Places.ts.
- Kampanjmatcher och stjärnmål, i Campaign.ts.
- Fysik och poäng, i physics.ts och match.ts, bara om du behöver en annan känsla.
Manualen lägger till tre regler som är värda att följa. Behåll upplåsnings-ID:n, objekt-ID:n och sparnycklar stabila, annars förlorar spelarna det de tjänat. Säkerhetskopiera innan du börjar. Ändra en funktion i taget, så att du vet vilken redigering som gav vilket resultat.
White label är tillåtet: ditt namn och din logotyp, eller din kunds, kan ersätta vår.
Bygg om, lägg ut och bädda in
För att spela behöver inget byggas. Ladda upp innehållet i game/ till valfri HTTP(S)-hosting som serverar statiska filer, behåll de relativa sökvägarna och öppna adressen. Ingen PHP, databas eller konto behövs.
För att ändra källkoden behöver du Node.js (24 LTS rekommenderas) och npm. Redigera TypeScript, bygg om med Vite och ersätt den utlagda mappen game/ med det nya resultatet.
Webbläsaren behöver JavaScript, ES-moduler och WebGL2. Både beröring och mus stöds, och kontrollerna anpassar sig efter skärmstorleken. Prestandan beror på webbläsare och enhet, så testa på de telefoner dina spelare använder.
- Ladda upp game/ till en testmapp på din hosting.
- Spela en match i en webbläsare på dator och en på telefon.
- Gör dina text- och stiländringar i source/ och bygg om.
- Ersätt hela testmappen och spela igen.
- Flytta den till den slutgiltiga adressen.
Vad den här utgåvan inte innehåller
Den här utgåvan spelas mot CPU:n: kampanj, fri match och träning. Onlinemultiplayer, onlinerum, onlineledartavlor och molnkonton ingår inte i paketet, och det finns inget läge för två spelare. Det finns inga annons-SDK:er eller konton, och native-appar och hosting ingår inte.
Framstegen stannar i spelarens webbläsare: kampanjstjärnor, resultat, statistik, reprisar och verkstadsföremål. Ingen server eller något konto används, så det finns inget att underhålla efter lansering.
Behöver du ett onlineläge, en portal-SDK, en version för appbutiker eller installation på din server är det en separat tjänst som offereras per projekt.
Begär en offert för skräddarsytt arbete
Licens, support och pris i ett stycke
Ett köp ger en evig, icke-exklusiv licens för en slutprodukt, din eller en kunds, som spelarna får använda gratis eller med annonsintäkter. Du får ändra koden, grafiken och ljudet inom den produkten, men du får inte sälja eller dela mallen, dess källkod eller dess tillgångar för sig. Supporten gäller i 6 månader, eller 12 med tillägget i kassan, och omfattar installation och användning av filerna samt rättning av reproducerbara fel. Anpassning, hosting och integration med SDK eller portal offereras separat. Listpriset är 39 USD. Till och med 30 november 2026 ger en Black Friday-kampanj 15 % rabatt på varje mall, så Sunset Rally kostar 33,15 USD. Från 1 december återgår priserna till listpris.
Vanliga frågor
Behöver jag bygga något för att använda pingisspelet?
Nej. Mappen game/ är redan byggd. Ladda upp innehållet till en statisk webbhosting och öppna adressen. Node.js och npm behövs bara om du ändrar TypeScript och bygger om.
Finns det ett läge för två spelare eller ett onlineläge?
Nej. Den här utgåvan spelas mot CPU:n i kampanjen, i fria matcher och i träning.
Kan jag ändra kampanjen och stjärnmålen?
Ja. Matcher och stjärnvillkor finns i Campaign.ts. Bygg om med Node.js efteråt.
Kan jag ändra hur bollen beter sig?
Ja. Fysiken finns i physics.ts och poängreglerna i match.ts. Ändra en sak i taget och testa mot varje motståndare.
Fungerar det på telefoner?
Ja, med beröringskontroller som anpassar sig efter skärmen. WebGL2 krävs, och prestandan beror på enheten, så testa på de telefoner du riktar dig till.
Var sparas framstegen?
I spelarens webbläsare. Ingen server eller något konto används.
Andra sportmallar att jämföra med
Om du bygger ett sporthörn på en sajt passar två andra mallar bra bredvid Sunset Rally. Velvet Pool är ett 8-bollsspel i biljard med en CPU-motståndare och två spelare lokalt, skrivet i vanlig JavaScript med WebGL2, 39 USD i listpris. Puttide är ett 3D-minigolfspel med 30 hål, byggt på Three.js och Rapier, 39 USD i listpris. Båda har 14 gränssnittsspråk.
Sunset Rally passar portaler och sajter som vill ha ett sportspel med korta matcher, studior som levererar ett varumärkt spel till en kund och utvecklare som vill ha ett läsbart TypeScript- och Three.js-projekt att lära av eller bygga vidare på. Behöver du två spelare på samma enhet har Velvet Pool det läget, och Sunset Rally har det inte.
Köper du två eller fler mallar i samma order sänks priset på varje licens: 5 % rabatt för två, 10 % för tre, 15 % för fyra och 20 % för fem eller fler.