Broncode van een tafeltennisspel: bestanden, fysica en campagne
Een 3D-pingpongspel voor de browser, bestand voor bestand: waar de fysica, scoring, campagne en locaties zitten, en wat je als eerste aanpast.
Als je broncode van een tafeltennisspel nodig hebt die je kunt hosten en aanpassen, dan is Sunset Rally een af 3D-pingpongspel voor de browser, met een campagne van negen wedstrijden, drie cpu-tegenstanders, een werkplaats en het volledige TypeScript-project, voor $39 van de lijstprijs. De spelmap is al gebouwd en niet geminificeerd, dus je kunt hem eerst uploaden en later lezen.
Sportspellen zijn moeilijker aan te passen dan ze lijken, omdat het plezier in de fysica en de besturing zit, niet in de menu's. Deze gids laat zien waar elk daarvan in het Sunset Rally-project staat, wat je veilig kunt veranderen en wat deze editie niet bevat.
Zo speelt het pingpongspel
Wedstrijden gaan tot zeven punten tegen een cpu-tegenstander. Spelers bewegen de aanwijzer of slepen om het batje te besturen, en de slagen gebeuren automatisch. Omhoog duwen geeft kracht, opzij bewegen plaatst de bal, naar beneden trekken speelt een dropshot, en een bal die hoog blijft liggen, is er om te smashen.
Een optionele assist, die spelers tijdens een wedstrijd aan en uit kunnen zetten, helpt het batje de hoogte van de bal te vinden. Dat is belangrijk voor een publieke site: een speler die voor het eerst op een telefoon speelt, kan de bal dan nog terugslaan.
Er zijn drie cpu-tegenstanders met eigen stijlen: het geduldige Capi, het speelse Nori en het precieze Miso, elk op Easy, Normal of Hard. De trainingsmodus geeft je een partner die elke bal terugslaat. Na een wedstrijd toont een herhaling het beslissende punt nog eens.
Wat het pakket broncode van het tafeltennisspel bevat
- Een kant-en-klare map game/, al gebouwd en niet geminificeerd.
- De TypeScript-broncode voor ontwikkelaars met de Vite-instelling en de spelbestanden, in source/.
- Geïllustreerde handleidingen in het Engels en Portugees met echte screenshots.
- Lettertypen en audiobestanden die bij het spel zijn gebundeld.
- Licentievermeldingen van derden en een changelog.
De stack is TypeScript, Three.js r184, Vite en WebGL2. De bestanden zijn HTML, CSS, JavaScript, TypeScript en JSON. De interface komt in 14 talen: Engels, Portugees, Spaans, Frans, Duits, Italiaans, Nederlands, Pools, Turks, Russisch, Indonesisch, Japans, Koreaans en vereenvoudigd Chinees. De handleidingen zijn alleen in het Engels en Portugees.
Ook de inhoud rond de wedstrijden hoort bij het pakket: een Sunset Circuit van negen wedstrijden in drie fases, drie locaties (de Sunset-tuin, de Sakura-tuin en het Seaside café) in de ochtend, de middag, de nacht of de regen, en een werkplaats waar munten uit gewonnen wedstrijden batjeskleuren, rubbers, vormen, handgrepen, houtsoorten, randtape, stickers en stijlen voor bal en tafel kopen.
Waar dingen in de code staan
De handleiding koppelt elk onderdeel van het spel aan een bestand. Dit is de lijst om open te houden terwijl je werkt:
- Campaign.ts: de negen campagnewedstrijden en hun sterdoelen.
- Places.ts: hoe elke locatie eruitziet.
- physics.ts: de fysica van de bal en het batje.
- match.ts: de scoring- en wedstrijdregels.
- i18n.ts: de Engelse en Portugese interfacetekst; de andere talen staan in de map locales.
- styles.css: de opmaak van menu's en schermen.
Elke campagnewedstrijd heeft maximaal drie sterren: winnen, drie hoeken raken en een rally van tien slagen spelen. Dat zijn 27 sterren, en het vrijspelen van elke locatie levert een prijs in de werkplaats op. Omdat de sterrenvoorwaarden in één campagnebestand staan, kun je een campagne makkelijker of moeilijker maken zonder door de code te zoeken.
Wat je als eerste aanpast in een pingpongtemplate
We stellen deze volgorde voor, van laag naar hoog risico.
- Interfacetekst en de spelnaam, in i18n.ts en de map locales.
- Kleuren en schermen, in styles.css.
- Werkplaatsstijlen voor batjes, ballen en tafels, zodat de uitrusting je merk draagt.
- Visuals van de locaties, in Places.ts.
- Campagnewedstrijden en sterdoelen, in Campaign.ts.
- Fysica en scoring, in physics.ts en match.ts, alleen als je een ander gevoel wilt.
De handleiding noemt drie regels die het waard zijn om te volgen. Houd ontgrendel-ID's, item-ID's en opslagsleutels stabiel, of spelers verliezen wat ze hebben verdiend. Maak vooraf een back-up. Verander één functie tegelijk, zodat je weet welke wijziging wat veroorzaakte.
Witlabel is toegestaan: je naam en je logo, of die van je klant, mogen het onze vervangen.
Opnieuw bouwen, hosten en insluiten
Om te spelen hoeft er niets gebouwd te worden. Upload de inhoud van game/ naar elke HTTP(S)-host die statische bestanden serveert, behoud de relatieve paden en open het adres. Er is geen PHP, database of account nodig.
Om de broncode te wijzigen, heb je Node.js (24 LTS wordt aanbevolen) en npm nodig. Bewerk de TypeScript, bouw opnieuw met Vite en vervang de gehoste map game/ door de nieuwe uitvoer.
De browser heeft JavaScript, ES-modules en WebGL2 nodig. Aanraakbesturing en muisbesturing worden allebei ondersteund, en de besturing past zich aan de schermgrootte aan. De prestaties hangen af van de browser en het apparaat, dus test op de telefoons die je spelers gebruiken.
- Upload game/ naar een testmap op je host.
- Speel één wedstrijd in een desktopbrowser en één op een telefoon.
- Doe je tekst- en stijlwijzigingen in source/ en bouw opnieuw.
- Vervang de hele testmap en speel opnieuw.
- Verhuis hem naar het definitieve adres.
Wat deze editie niet bevat
Deze editie wordt gespeeld tegen de cpu: campagne, vrije wedstrijd en training. Online multiplayer, online kamers, online ranglijsten en cloudaccounts zitten niet in het pakket, en er is geen modus voor twee spelers. Er zijn geen advertentie-SDK's of accounts, en native apps en hosting zijn niet inbegrepen.
De voortgang blijft in de browser van de speler: campagnesterren, resultaten, statistieken, herhalingen en werkplaatsitems. Er wordt geen server of account gebruikt, dus er is na de lancering niets te onderhouden.
Heb je een online modus, een portal-SDK, een versie voor een app-winkel of installatie op je eigen server nodig, dan is dat een aparte dienst, per project geofferd.
Vraag een offerte aan voor maatwerk
Licentie, support en prijs in één alinea
Eén aankoop geeft een eeuwigdurende, niet-exclusieve licentie voor één eindproduct, van jou of van één klant, dat spelers gratis of met advertentie-inkomsten mogen gebruiken. Je mag de code, kunst en audio binnen dat product wijzigen, maar je mag de template, de broncode of de assets niet afzonderlijk doorverkopen of delen. Support loopt 6 maanden, of 12 met de extensie bij het afrekenen, en omvat het installeren en gebruiken van de bestanden en het oplossen van reproduceerbare fouten; maatwerk, hosting en SDK- of portalintegratie worden apart geofferd. De lijstprijs is $39. Tot 30 november 2026 geldt een Black Friday-actie van 15% op elke template, dus Sunset Rally kost $33,15. Vanaf 1 december gaan de prijzen terug naar de lijstprijs.
Veelgestelde vragen
Moet ik iets bouwen om dit pingpongspel te gebruiken?
Nee. De map game/ is al gebouwd. Upload de inhoud naar een statische webhost en open het adres. Node.js en npm zijn alleen nodig als je de TypeScript wijzigt en opnieuw bouwt.
Is er een modus voor twee spelers of online?
Nee. Deze editie wordt in de campagne, vrije wedstrijden en training tegen de cpu gespeeld.
Kan ik de campagne en de sterdoelen aanpassen?
Ja. Wedstrijden en sterrenvoorwaarden staan in Campaign.ts. Bouw daarna opnieuw met Node.js.
Kan ik veranderen hoe de bal zich gedraagt?
Ja. De fysica staat in physics.ts en de scoringregels in match.ts. Wijzig één ding tegelijk en test tegen elke tegenstander.
Werkt het op telefoons?
Ja, met aanraakbesturing die zich aan het scherm aanpast. WebGL2 is vereist, en de prestaties hangen af van het apparaat, dus test op de telefoons waarop je mikt.
Waar wordt de voortgang opgeslagen?
In de browser van de speler. Er wordt geen server of account gebruikt.
Andere sporttemplates om mee te vergelijken
Bouw je een sporthoek voor een site, dan passen twee andere templates goed naast Sunset Rally. Velvet Pool is een 8-ball-biljartspel met een cpu-tegenstander en lokaal twee spelers, geschreven in gewone JavaScript met WebGL2, $39 van de lijstprijs. Puttide is een 3D-minigolfspel met 30 holes, gebouwd op Three.js en Rapier, $39 van de lijstprijs. Beide hebben 14 interfacetalen.
Sunset Rally past bij portals en sites die een sportspel met korte wedstrijden willen, bij studio's die een gebrandd spel voor één klant leveren, en bij ontwikkelaars die een leesbaar TypeScript- en Three.js-project willen om van te leren of uit te breiden. Heb je twee spelers op hetzelfde apparaat nodig, dan heeft Velvet Pool die modus en Sunset Rally niet.
Bekijk Velvet Pool, het 8-ball-spel
Bekijk Puttide, het 3D-minigolfspel
Wie twee of meer templates in dezelfde bestelling koopt, krijgt een lagere prijs per licentie: 5% korting voor twee, 10% voor drie, 15% voor vier en 20% voor vijf of meer.