Kod źródłowy gry w ping ponga: pliki, fizyka i kampania
Gra 3D w ping ponga do przeglądarki, otwarta plik po pliku: gdzie są fizyka, punktacja, kampania i miejsca oraz co zmienić najpierw.
Jeśli potrzebujesz kodu źródłowego gry w ping ponga, który możesz hostować i zmieniać, Sunset Rally to gotowa trójwymiarowa gra w ping ponga do przeglądarki, z kampanią dziewięciu meczów, trzema rywalami sterowanymi przez CPU, warsztatem i pełnym projektem TypeScript, w cenie katalogowej 39 USD. Folder gry jest już zbudowany i niezminifikowany, więc możesz najpierw go wgrać, a czytać kod później.
Gry sportowe trudniej dostosować, niż się wydaje, bo zabawa tkwi w fizyce i sterowaniu, a nie w menu. Ten przewodnik pokazuje, gdzie każda z tych rzeczy leży w projekcie Sunset Rally, co możesz bezpiecznie zmienić i czego ta edycja nie obejmuje.
Jak gra w ping ponga działa
Mecze toczą się do siedmiu punktów przeciwko rywalowi z CPU. Gracze przesuwają wskaźnik albo przeciągają palcem, by sterować rakietką, a uderzenia są automatyczne. Ruch w górę dodaje siły, ruch na boki ustawia piłeczkę, ciągnięcie w dół wykonuje krótkie zagranie, a piłeczka uniesiona wysoko prosi się o smecz.
Opcjonalne wspomaganie, które gracze mogą włączać i wyłączać w trakcie meczu, pomaga rakietce trafić na wysokość piłeczki. To ważne dla publicznej strony: gracz na telefonie, który gra pierwszy raz, może nadal odbić piłeczkę.
Jest trzech rywali CPU, każdy z własnym stylem: Capi stawia na cierpliwość, Nori na zabawę, a Miso na precyzję. Grają na poziomach Easy (łatwy), Normal (normalny) albo Hard (trudny). Tryb treningowy (Training) daje partnera, który odbija każdą piłeczkę. Po meczu powtórka pokazuje ponownie punkt decydujący.
Co zawiera kod źródłowy gry w ping ponga
- Gotowy do wgrania folder game/, już zbudowany i niezminifikowany.
- Źródło dla programistów w TypeScript z konfiguracją Vite i zasobami gry, w source/.
- Ilustrowane podręczniki po angielsku i portugalsku z prawdziwymi zrzutami ekranu.
- Czcionki i pliki audio dołączone do gry.
- Informacje o licencjach komponentów zewnętrznych i lista zmian.
Stos to TypeScript, Three.js r184, Vite i WebGL2. Pliki to HTML, CSS, JavaScript, TypeScript i JSON. Interfejs występuje w 14 językach: angielskim, portugalskim, hiszpańskim, francuskim, niemieckim, włoskim, holenderskim, polskim, tureckim, rosyjskim, indonezyjskim, japońskim, koreańskim i chińskim uproszczonym. Podręczniki są tylko po angielsku i portugalsku.
Treść wokół meczów też jest w pakiecie: Sunset Circuit (okrążenie Sunset) z dziewięcioma meczami w trzech etapach, trzy miejsca, czyli Sunset garden (ogród Sunset), Sakura garden (ogród Sakura) i Seaside café (kawiarnia nad morzem), o poranku, popołudniu, w nocy lub podczas deszczu, oraz warsztat, w którym monety z wygranych kupują kolory rakietek, gumy, kształty, rączki, rodzaje drewna, taśmy na krawędzi, naklejki oraz style piłeczek i stołów.
Gdzie co leży w kodzie
Podręcznik przypisuje każdą część gry do pliku. To lista, którą warto mieć otwartą podczas pracy:
- Campaign.ts: dziewięć meczów kampanii i cele gwiazdek.
- Places.ts: wygląd każdego miejsca.
- physics.ts: fizyka piłeczki i rakietki.
- match.ts: punktacja i zasady meczu.
- i18n.ts: teksty interfejsu po angielsku i portugalsku; pozostałe języki są w folderze locales.
- styles.css: stylizacja menu i ekranów.
Każdy mecz kampanii ma do trzech gwiazdek: wygraj, traf w trzy rogi i rozegraj wymianę dziesięciu uderzeń. To daje 27 gwiazdek, a ukończenie każdego miejsca przynosi nagrodę z warsztatu. Ponieważ warunki gwiazdek są w jednym pliku kampanii, możesz uczynić kampanię łatwiejszą albo trudniejszą bez szukania po kodzie.
Co zmienić najpierw w szablonie gry w ping ponga
Proponujemy taką kolejność, od małego ryzyka do dużego.
- Teksty interfejsu i nazwę gry, w i18n.ts i folderze locales.
- Kolory i ekrany, w styles.css.
- Style warsztatu dla rakietek, piłeczek i stołów, tak by sprzęt niósł Twoją markę.
- Wygląd miejsc, w Places.ts.
- Mecze kampanii i cele gwiazdek, w Campaign.ts.
- Fizykę i punktację, w physics.ts i match.ts, tylko jeśli potrzebujesz innego odczucia.
Podręcznik dodaje trzy zasady warte przestrzegania. Zachowuj stałe identyfikatory odblokowań, identyfikatory przedmiotów i klucze zapisu, bo inaczej gracze stracą to, co zdobyli. Zrób kopię zapasową przed startem. Zmieniaj jedną funkcję naraz, żebyś wiedział, która edycja co spowodowała.
White label jest dozwolona: Twoja nazwa i logo albo logo klienta mogą zastąpić nasze.
Przebudowa, hosting i osadzanie
Do grania nic nie trzeba budować. Wgraj zawartość game/ na dowolny hosting HTTP(S), który serwuje pliki statyczne, zachowaj względne ścieżki i otwórz adres. Nie potrzeba PHP, bazy danych ani konta.
Do zmiany źródła potrzebujesz Node.js (zalecany 24 LTS) i npm. Edytuj TypeScript, przebuduj przez Vite i podmień hostowany folder game/ nowym wynikiem.
Przeglądarka potrzebuje JavaScript, modułów ES i WebGL2. Obsługiwane jest sterowanie dotykowe i myszą, a elementy sterowania dopasowują się do wielkości ekranu. Wydajność zależy od przeglądarki i urządzenia, więc testuj na telefonach, z których korzystają gracze.
- Wgraj game/ do folderu testowego na swoim hostingu.
- Rozegraj jeden mecz w przeglądarce na komputerze i jeden na telefonie.
- Wprowadź zmiany tekstów i stylów w source/ i przebuduj.
- Podmień cały folder testowy i zagraj ponownie.
- Przenieś grę pod ostateczny adres.
Czego ta edycja nie obejmuje
W tej edycji gra się przeciwko CPU: kampania, mecz swobodny i trening. Gra online, pokoje online, rankingi online i konta w chmurze nie należą do pakietu, a nie ma trybu dla dwóch graczy. Nie ma SDK reklam ani kont, a aplikacje natywne i hosting nie są w zestawie.
Postępy zostają w przeglądarce gracza: gwiazdki kampanii, wyniki, statystyki, powtórki i przedmioty z warsztatu. Nie używa się serwera ani konta, więc po starcie nie ma czego utrzymywać.
Jeśli potrzebujesz trybu online, SDK portalu, wersji do sklepu z aplikacjami albo instalacji na swoim serwerze, to osobna usługa wyceniana za każdy projekt.
Poproś o wycenę prac na zamówienie
Licencja, wsparcie i cena w jednym akapicie
Jeden zakup daje wieczną, niewyłączną licencję na jeden produkt końcowy, Twój albo jednego klienta, z którego gracze mogą korzystać za darmo albo z monetyzacją reklamową. Kod, grafikę i dźwięk w ramach tego produktu możesz zmieniać, ale nie wolno odsprzedawać ani udostępniać szablonu, jego kodu źródłowego ani zasobów osobno. Wsparcie trwa 6 miesięcy, a 12 miesięcy przy rozszerzeniu wykupionym przy zakupie, i obejmuje instalację, korzystanie z plików oraz naprawianie powtarzalnych błędów; personalizacja, hosting i integracje SDK lub portalu są wyceniane osobno. Cena katalogowa to 39 USD; do 30 listopada 2026 promocja Black Friday obniża każdy szablon o 15%, więc Sunset Rally kosztuje 33,15 USD, a od 1 grudnia ceny wracają do katalogowych.
Najczęściej zadawane pytania
Czy muszę coś budować, żeby użyć tej gry w ping ponga?
Nie. Folder game/ jest już zbudowany. Wgraj jego zawartość na statyczny hosting i otwórz adres. Node.js i npm są potrzebne tylko wtedy, gdy zmieniasz TypeScript i przebudowujesz grę.
Czy jest tryb dla dwóch graczy albo tryb online?
Nie. W tej edycji gra się przeciwko CPU w kampanii, meczach swobodnych i treningu.
Czy mogę zmienić kampanię i cele gwiazdek?
Tak. Mecze i warunki gwiazdek są w Campaign.ts. Potem przebuduj grę przez Node.js.
Czy mogę zmienić zachowanie piłeczki?
Tak. Fizyka jest w physics.ts, a zasady punktacji w match.ts. Zmieniaj jedną rzecz naraz i testuj przeciwko każdemu rywalowi.
Czy działa na telefonach?
Tak, z dotykowym sterowaniem, które dopasowuje się do ekranu. Wymagany jest WebGL2, a wydajność zależy od urządzenia, więc przetestuj telefony, na które celujesz.
Gdzie zapisywane są postępy?
W przeglądarce gracza. Nie używa się serwera ani konta.
Inne szablony sportowe do porównania
Jeśli budujesz kącik sportowy na stronie, dwa inne szablony dobrze pasują obok Sunset Rally. Velvet Pool to bilard 8-ball z przeciwnikiem CPU i lokalnym trybem dwóch graczy, napisany w czystym JavaScript na WebGL2, w cenie katalogowej 39 USD. Puttide to trójwymiarowy mini golf z 30 dołkami, zbudowany na Three.js i Rapier, w cenie katalogowej 39 USD. Obie mają 14 języków interfejsu.
Sunset Rally pasuje do portali i stron, które chcą grę sportową z krótkimi meczami, do studiów dostarczających markową grę jednemu klientowi oraz do programistów, którzy chcą czytelnego projektu TypeScript i Three.js do nauki albo rozbudowy. Jeśli potrzebujesz dwóch graczy na jednym urządzeniu, Velvet Pool ma ten tryb, a Sunset Rally nie.
Zobacz Velvet Pool, grę 8-ball
Zobacz Puttide, trójwymiarowy mini golf
Kupując dwa lub więcej szablonów w jednym zamówieniu, obniżasz cenę każdej licencji: 5% zniżki za dwa, 10% za trzy, 15% za cztery i 20% za pięć lub więcej.