Kod źródłowy gry HTML5: zajrzeliśmy do prawdziwej paczki

Kod źródłowy gry HTML5 może oznaczać trzy różne rzeczy: gotową wersję do wgrania, pliki programisty do edycji albo projekt, który otwiera się tylko w jednym konkretnym edytorze. Szablon gry HTML5 z kodem źródłowym z naszego sklepu to dwie pierwsze rzeczy razem, jako zwykłe pliki webowe, a ten poradnik otwiera prawdziwe paczki, by pokazać, jak to wygląda.

Sprzedajemy te szablony, więc proszę czytać to jako wycieczkę po naszych własnych paczkach, a nie neutralny przegląd rynku. Przeszliśmy przez kilka edycji, głównie Velvet Pool, Puttide i Sunset Rally, przeczytaliśmy ich publiczne podręczniki i warunki sklepu i zapisaliśmy, co jest w pudełku, czego potrzeba do uruchomienia i czego tam nie ma. Każdy podręcznik jest podlinkowany ze strony produktu, więc każdą linię można sprawdzić przed zapłatą.

Co może znaczyć „kod źródłowy gry HTML5”

Sprzedawcy używają słów „kod źródłowy” luźno. Trzy pytania pozwalają ustalić, co naprawdę jest sprzedawane.

Wersja gotowa, źródło dla programisty czy jedno i drugie?

Wersja gotowa (build) to ukończona gra tak, jak ładuje ją przeglądarka: index.html, skrypty, obrazy i pliki dźwiękowe. Można ją hostować bez zmian. Źródło dla programisty to wersja przeznaczona do edycji przez ludzi, z plikami podzielonymi według zadań. Paczka z samą wersją gotową da się wgrać, ale niewygodnie zmieniać. Paczka z samym źródłem może wymagać narzędzi, zanim w ogóle ruszy. Edycje w tym poradniku mają jedno i drugie w jednym pliku ZIP: zwykle folder game/ do publikacji i folder source/ do edycji (w Ricopop game/ samo jest źródłem).

Czytelny czy zminifikowany?

Minifikacja ściska skrypty do kilku gęstych linii z krótkimi nazwami, co przyspiesza pobieranie i fatalnie się czyta. Zaciemnianie idzie dalej i celowo miesza nazwy. Żadne nie szkodzi działającej stronie. Oba szkodzą, jeśli kod kupiono po to, by go zmieniać. Przed zapłatą proszę otworzyć jeden skrypt dema w narzędziach deweloperskich przeglądarki i sprawdzić, czy dałoby się go śledzić.

Zwykłe pliki czy projekt edytora?

Niektóre szablony przychodzą jako projekt dla konkretnego edytora gier i otwiera je tylko ten edytor. Inne to zwykłe pliki webowe, które otworzy każdy edytor kodu. Edycje w tym poradniku należą do drugiego rodzaju: HTML, CSS, JavaScript i JSON, w niektórych z TypeScriptem.

Przeglądaj szablony

Co jest w paczce Polar Games

Weźmy Velvet Pool, naszą edycję bilarda 8-ball. Jej podręcznik opisuje cztery foldery w pliku ZIP:

• game/ to edycja gotowa do wgrania i jedyny folder, który się publikuje.
• source/ to ta sama gra jako edytowalna edycja dla programisty, z README, plikiem package.json i testami.
• documentation/ zawiera ilustrowany podręcznik i jego obrazy.
• THIRD-PARTY-LICENSES/ zawiera teksty licencji czcionek i podsumowanie README.txt.

W Państwa bibliotece ta sama paczka jest oferowana jako dwa pobrania: kompletna paczka (źródło i podręcznik) albo sama gra, gotowa do hostowania.

game/ i source/ mają ten sam układ. W przypadku Velvet Pool podręcznik każe edytować pliki w source/ i kopiować zmienione do tej samej ścieżki w game/. Nic nie jest po drodze kompilowane.

Zobacz edycję Velvet Pool

Wewnątrz Velvet Pool: mapa plików

Mapa plików to najtańszy sposób oceny bazy kodu przed zakupem. Oto ta z podręcznika Velvet Pool, ze ścieżkami względem source/ lub game/:

• src/core/physics.js: symulacja bil, rotacji i odbić od band.
• src/core/rules.js: zasady 8-ball i decyzje o faulach.
• src/core/ai.js: jak komputer wybiera uderzenie.
• src/game/controls.js: celowanie, siła i rotacja.
• src/game/progress.js: osiągnięcia, sukna, kije i punktacja meczów.
• src/game/i18n.js: tekst w 14 językach.
• src/game/localRecords.js: lokalna historia wyników.
• src/game/audio.js: efekty dźwiękowe i odtwarzanie muzyki.
• css/style.css i css/fonts.css: motyw, układ responsywny i deklaracje czcionek.
• assets/: grafika, dźwięk i czcionki, z podfolderem logo/.

Proszę zauważyć podział. Zasady, fizyka i komputer są w src/core. Sterowanie, zapisy, teksty i dźwięk są w src/game. Podręcznik prosi o zmienianie jednej funkcji naraz, a ten układ to umożliwia: poprawka odbicia od bandy i poprawka tłumaczenia dotykają różnych plików.

Podręcznik stwierdza też, że kod w source/src i game/src to zwykły, sformatowany JavaScript, bez plików zminifikowanych ani połączonych w paczki. Velvet Pool to czysty JavaScript na WebGL2 i nie używa żadnej biblioteki kodu, także Three.js. Dziennik zmian to potwierdza: wersja 1.0.1 podzieliła długie jednoliniowe ciągi znaków w dźwięku, tłumaczeniach i shaderach na czytelne linie, bez zmiany zachowania.

Puttide: ten sam układ plus biblioteki

Puttide, nasza edycja minigolfa 3D, używa tych samych czterech folderów i dodaje jedno: dwie biblioteki podmiotów trzecich, których gra potrzebuje. Three.js r186 (MIT) i Rapier 3D 0.21.0 (Apache-2.0) znajdują się w lib/three/ i lib/rapier/, a mapa importów w index.html mówi przeglądarce, gdzie ich szukać. FAQ Puttide stwierdza, że nic nie jest ładowane z CDN, więc gra potrzebuje tylko Państwa własnego hostingu. Podręcznik dodaje, że pliki bibliotek są sformatowane tak, by dało się je czytać, bez zmian w zachowaniu.

Jego mapa plików, znowu względem source/ lub game/:

• src/course/courses.js: kolejność torów i wymagania odblokowania.
• src/course/holes.js: geometria, par i przeszkody toru Ruins. pier.js, ice.js, lava.js i sky.js zawierają pozostałe cztery.
• src/sim/constants.js: strojenie fizyki.
• src/game/economy.js: definicje i ceny piłek, śladów i strojów.
• src/ui/i18n.js i trzy kolejne pliki słowników: tekst językowy.
• css/style.css: kolory interfejsu, czcionki i style responsywne.
• fonts/ i music/: czcionki webowe z licencjami i dwa utwory muzyczne.

Przepis z podręcznika na nowy dołek: powielić definicję w odpowiednim pliku toru, nadać unikalny id, ustawić par oraz pozycje startu i dołka, dodać go do toru, a następnie dodać jego nazwę i wskazówkę do słowników językowych. Taki przepis proszę przeczytać przed zakupem. Jeśli wygląda na pracę, którą Państwo potrafią wykonać, paczka do Państwa pasuje.

Zobacz edycję Puttide

Gdy źródło wymaga etapu budowania

„Bez etapu budowania” jest prawdą o niektórych edycjach, a o innych nie, więc proszę sprawdzać edycję, a nie sklep. Oto pięć naszych obok siebie, z cenami katalogowymi. Nasz sklep obecnie pokazuje 10% obniżki od ceny katalogowej, ofertę studio direct na stronie każdego produktu: Velvet Pool pokazuje na przykład 35,10 USD zamiast 39 USD.

• Velvet Pool, cena katalogowa 39 USD: zwykłe moduły JavaScript na WebGL2. Edycja w source/, kopiowanie do game/. Node.js 20+ tylko do opcjonalnych testów.
• Puttide, 39 USD: zwykłe moduły JavaScript z Three.js i Rapier w lib/. Bez etapu budowania. Node.js jest opcjonalny i tylko do zarządzania wersjami bibliotek.
• Ricopop, 39 USD: zwykły HTML, CSS i moduły JavaScript, a game/ samo jest źródłem. Opcjonalne narzędzia dla programisty (Node.js 20+): lokalny serwer, sprawdzanie poziomów i testy.
• Pinloop, 24 USD: TypeScript z Vite. Folder game/ zawiera czytelny JavaScript i CSS. Node.js 22.12+ i npm tylko do edycji i ponownego budowania źródła.
• Sunset Rally, 39 USD: TypeScript z Three.js r184 i Vite. Folder game/ jest już zbudowany i niezminifikowany. Node.js tylko jeśli budują Państwo ponownie.

Dla Sunset Rally podręcznik zaleca Node.js 24 LTS. W source/ uruchamia się npm ci, npm run typecheck i npm run build, a następnie publikuje wyłącznie zawartość dist/. Prosi też, by przy ponownym budowaniu zachować wyłączone minify i cssMinify, ponieważ dostarczone środowisko wykonawcze jest sformatowane do czytania. Wgrywa się wynik, nigdy node_modules/.

Zobacz edycję Sunset Rally

Hostowanie: co w praktyce znaczy „statyczny”

Hosting statyczny oznacza, że serwer tylko udostępnia pliki. Podręczniki Velvet Pool i Puttide podają całą instalację w trzech krokach:

1. Rozpakować ZIP.
2. Wgrać wszystko z game/ do folderu na swojej stronie, na przykład public_html/velvet-pool/, przez FTP lub menedżer plików hostingu, zachowując podfoldery.
3. Otworzyć ten adres w przeglądarce.

Nie ma tu npm, terminala, etapu budowania, PHP, bazy danych ani konta. Co według tych samych podręczników potrafi przeszkodzić:

• Nie klikać dwukrotnie index.html. Przeglądarki blokują moduły gry w file://. Do testu lokalnego proszę uruchomić python -m http.server 8765 w game/ i otworzyć http://localhost:8765/.
• Serwer musi wysyłać pliki .js z typem MIME JavaScript, a .wasm jako application/wasm. Zły typ MIME objawia się błędem odrzuconego modułu.
• Przy publicznym hostingu używać HTTPS.
• Zapisy należą do pochodzenia przeglądarki (protokół, host i port). Przeniesienie gry na inną domenę oznacza, że gracze zaczynają od zera.
• Świeże załadowanie strony nadal wymaga Państwa hostingu, więc to nie jest instalowalna aplikacja offline.

Gdzie są logo, kolory, zasady i tłumaczenia

Każdy podręcznik ma sekcję o dostosowaniu, a jej zakres różni się między edycjami. Oto, co mówi każdy z nich.

Velvet Pool

• Logo i marka: wymienić pliki w assets/logo/ i dostosować odpowiadające im wymiary w CSS.
• Style sukna i kija: ich definicje są w progress.js. Identyfikatory przedmiotów proszę zachować stabilne, by zapisane kosmetyki nadal działały.
• Zachowanie komputera w ai.js, fizyka w physics.js. Po zmianie zasad lub fizyki proszę uruchomić testy 8-ball.
• Tłumaczenia: src/game/i18n.js, z listą języków w LANGS.

Puttide

• Kolory i czcionki: css/style.css.
• Fizyka: src/sim/constants.js. Ceny kosmetyków: src/game/economy.js, z zachowaniem istniejących identyfikatorów.
• Muzyka: skopiować licencjonowany plik do music/ i zaktualizować mapowanie utworów w src/audio/audio.js.
• Dołki, par i odblokowania: opisane wyżej pliki torów.

Gridspark i Sunset Rally

W Gridspark, według FAQ jego strony, tekst interfejsu jest w src/locales.js, stałe zasad i paleta w src/config.js, a zasady układanki w game.js, board.js, generator.js i shapes.js. W Sunset Rally mecze kampanii i warunki gwiazdek są w Campaign.ts, lokacje w Places.ts, fizyka w physics.ts, a punktacja w match.ts. Jego teksty angielskie i portugalskie są w src/i18n.ts, pozostałe 12 języków w src/locales/.

Proszę zauważyć, co podręczniki pomijają. Podręcznik Puttide obejmuje kolory, fizykę, dołki, ceny i muzykę, ale nie ma kroku wymiany logo, a podręcznik Sunset Rally nie ma osobnej sekcji o marce. Jeśli marka jest pierwszą rzeczą, którą będą Państwo zmieniać, proszę zapytać przed zakupem.

Zobacz edycję Gridspark

Testy automatyczne: co sprawdzają, a czego nie

Folder source/ gry Velvet Pool zawiera zestaw testów. Przy Node.js 20 lub nowszym wystarczy otworzyć terminal w source/ i uruchomić npm test, co jest tym samym co node tests/run.js. Nie trzeba instalować zależności. Według podręcznika zestaw sprawdza fizykę, zasady 8-ball, mecze z komputerem i spójność kluczy tłumaczeń, a nie zastępuje testów w przeglądarkach i na prawdziwych urządzeniach.

Sprawdzanie kluczy tłumaczeń to rodzaj testu, jakiego potrzebuje gra z 14 językami: dodać klucz w jednym języku, zapomnieć o innym, a człowiek może nie zauważyć tego przez tygodnie.

Nie każda edycja ma testy. Podręcznik Puttide nie opisuje żadnych, tylko kontrole ręczne. Pinloop i Beep Out wymieniają npm test wśród poleceń dla programisty, a narzędzia Ricopop zawierają sprawdzanie poziomów.

Licencja, informacje podmiotów trzecich i dziennik zmian

Zgodnie z warunkami sklepu każdy zakup daje bezterminową, niewyłączną licencję na używanie edycji w jednym produkcie końcowym, Państwa lub jednego klienta. Wolno zmieniać kod, grafikę i dźwięk w jej obrębie, a gracze mogą korzystać bezpłatnie lub w modelu opartym na reklamach. Nie wolno odsprzedawać, udostępniać ani rozpowszechniać szablonu, jego źródła ani zasobów samodzielnie, jako szablonu, zestawu lub paczki zasobów, ani w ramach innego produktu przeznaczonego dla programistów. Licencja nie wygasa z końcem wsparcia.

Elementy podmiotów trzecich zachowują własne licencje, a ich informacje zachowuje się razem z produktem. W Velvet Pool oznacza to dwie czcionki, Manrope i Fraunces, na licencji SIL Open Font License 1.1, z tekstami w THIRD-PARTY-LICENSES/ i obok czcionek. W Puttide lista dodaje Three.js (MIT), Rapier (Apache-2.0) oraz czcionki Rubik i Fredoka (OFL 1.1).

Dziennik zmian pokazuje, jak dba się o paczkę. Velvet Pool 1.0.1 (18 października 2026) podzielił długie ciągi znaków na czytelne linie i zebrał informacje licencyjne w jednym płaskim folderze. Wersja 1.1.0 (22 października 2026) wprowadziła interfejs w 14 językach. Te wpisy są na stronie produktu. Warunki mówią, że aktualizacje tej samej edycji pojawiają się w Państwa bibliotece po opublikowaniu, bez obietnicy aktualizacji w ustalonym okresie.

Jak w godzinę przeczytać kod kupionej gry

To proponowany plan, a nie obiecany czas. Opiera się na układzie Velvet Pool i korzysta wyłącznie z tego, co daje paczka.

1. Minuty 0–10: rozpakować ZIP, przejrzeć README w source/ i mapę plików z podręcznika. Otworzyć index.html i zobaczyć, jakie skrypty i arkusze stylów ładuje.
2. Minuty 10–20: uruchomić npm test w source/ (Node.js 20+), by mieć zielony punkt wyjścia.
3. Minuty 20–35: czytać src/core przed src/game. Zacząć od rules.js, potem ai.js, potem physics.js. To jest sama gra. Sterowanie, postęp, teksty i dźwięk to instalacja wokół niej.
4. Minuty 35–40: zanotować, że identyfikatory przedmiotów i klucze zapisów muszą pozostać stabilne, inaczej gracze tracą zapisane kosmetyki.
5. Minuty 40–55: wprowadzić jedną małą zmianę, na przykład definicję sukna w progress.js. Skopiować plik do tej samej ścieżki w game/, udostępnić game/ przez python -m http.server 8765 i obejrzeć wynik. Nigdy nie otwierać przez file://.
6. Minuty 55–60: uruchomić testy ponownie.

Moduły ES nazywają to, czego potrzebują, w liniach importu, więc łańcuch można śledzić od pierwszego skryptu ładowanego przez stronę. Dlatego edycję ze zwykłymi plikami da się czytać w tym tempie.

Pytania do zadania przed zakupem kodu źródłowego

• Czy mogę przeczytać podręcznik i zagrać w demo przed zapłatą? W naszych edycjach oba są podlinkowane ze strony produktu.
• Czy jest wersja gotowa do hostowania i osobne źródło dla programisty?
• Czy kod jest czytelny, czy zminifikowany? Proszę otworzyć jeden skrypt i zobaczyć.
• Czy potrzebuję Node.js, npm, PHP lub bazy danych i w jakich wersjach?
• Czy gra ładuje cokolwiek z CDN lub innej strony?
• Jakie biblioteki podmiotów trzecich są w środku i na jakich licencjach?
• W ilu projektach mogę jej użyć i czy wolno ją rozpowszechniać?
• Jak długo trwa wsparcie i co obejmuje? Nasze to 6 miesięcy albo 12 z przedłużeniem wybranym przy składaniu zamówienia, obejmujące pytania o instalację i używanie plików oraz powtarzalne błędy.
• Czego brakuje?
• Czy jest dziennik zmian i niedawne wydanie?
• Jaka jest zasada zwrotu? U nas: szablony są produktami cyfrowymi, więc zwracamy zakup tylko wtedy, gdy szablon nie został jeszcze pobrany albo ma wadę, której nie potrafimy usunąć. O zwrot prosi się, pisząc do studia i podając numer licencji.

Czego te edycje nie zawierają

Niektóre edycje dodają opcjonalne dodatki. Ricopop i Zabum zawierają jednoplikową tablicę wyników w PHP, domyślnie wyłączoną. To zwykła, wspólna lista wyników, która przechowuje wyniki w pliku, a nie odporny na oszustwa ranking ani gra wieloosobowa na żywo.

Wsparcie obejmuje pytania dotyczące instalacji i używania dostarczonych plików oraz usuwanie powtarzalnych błędów w dostarczonej grze. To granica i lepiej znać ją pierwszego dnia.

FAQ

Czym różni się folder game od folderu source?

game/ to wersja gotowa, którą wgrywa się na hosting. source/ to edytowalna edycja dla programisty tej samej gry. W Velvet Pool i Puttide mają ten sam układ, więc plik edytowany w source/ kopiuje się do tej samej ścieżki w game/. W edycjach w TypeScript, takich jak Sunset Rally, source/ to projekt, który się buduje ponownie, a publikuje się nowy wynik.

Czy potrzebuję npm lub Node.js, żeby używać gry?

Nie do hostowania. Node.js pojawia się tylko przy opcjonalnych testach w Velvet Pool (20 lub nowszy) albo przy ponownym budowaniu edycji w TypeScript, takich jak Sunset Rally (zalecany 24 LTS) i Pinloop (22.12 lub nowszy).

Czy kod źródłowy jest zminifikowany?

Nie w omawianych tu edycjach. Velvet Pool i Puttide to zwykły, sformatowany JavaScript, a wersja 1.0.1 obu podzieliła długie jednoliniowe ciągi znaków na czytelne linie. Środowisko wykonawcze Sunset Rally jest dostarczane sformatowane, z wyłączoną minifikacją.

Czy mogę jednym zakupem obsłużyć kilka projektów lub klientów?

Licencja obejmuje jeden produkt końcowy, Państwa lub jednego klienta. Drugi produkt jest poza nią.

Czy mogę odsprzedawać lub udostępniać kod źródłowy?

Nie: ani samodzielnie, ani jako szablon, zestaw lub paczkę zasobów, ani w ramach innego produktu przeznaczonego dla programistów. Wolno zmieniać kod, grafikę i dźwięk w obrębie własnego produktu końcowego.

Czy mogę przeczytać podręcznik przed zakupem?

Tak. Strona każdego produktu linkuje do jego podręcznika i grywalnego dema tej samej edycji.

Proszę otworzyć paczkę, zanim kupią Państwo jakąkolwiek

Proszę wybrać edycję, otworzyć jej podręcznik ze strony produktu, zagrać w demo i przeczytać mapę plików pod kątem pytań powyżej. Jeśli podręcznik na nie odpowiada, paczka też powinna. Jeśli nie, proszę napisać do studia przed zapłatą.

Przeglądaj wszystkie szablony