HTML5 遊戲原始碼：打開一個真實套件看內容

HTML5 遊戲原始碼可能指三種不同的東西：一個可以直接上傳的建置版本、你要編輯的開發者檔案，或是只能在某個特定編輯器中開啟的專案。我們市集上的 HTML5 遊戲範本（附原始碼）同時包含前兩者，以一般網頁檔案的形式提供。本指南會打開真實的套件，讓你看看它實際是什麼樣子。

我們賣的就是這些範本，所以請把這篇當成我們自家套件的導覽來讀，而不是對市場的中立調查。我們看過幾個版本，主要是 Velvet Pool、Puttide 與 Sunset Rally，閱讀了它們公開的手冊與商店條款，並記下盒子裡有什麼、執行它需要什麼，以及沒有什麼。每本手冊都連結在項目頁面上，所以你付款前可以逐行核對。

「HTML5 遊戲原始碼」可能是什麼

賣家常常隨便用「原始碼」這個詞。三個問題可以理清你實際買到的是什麼。

建置版本、開發者原始碼，還是兩者都有？

建置版本是瀏覽器載入的成品遊戲：一個 index.html、腳本、圖片和音效檔。你可以原樣架設。開發者原始碼則是為了讓人編輯而做的版本，檔案依工作分開。只有建置版本的套件，你可以上傳，卻不太好修改。只有原始碼的套件，可能要先裝工具才能執行。本指南所談的版本會把兩者放在同一個 ZIP 裡：通常是一個要發布的 game/ 資料夾，加上一個用來編輯的 source/ 資料夾（在 Ricopop 中，game/ 本身就是原始碼）。

可讀，還是經過壓縮？

壓縮（minify）會把腳本擠成幾行密密麻麻、名稱很短的程式碼，下載比較快，但極難閱讀。混淆（obfuscation）更進一步，會刻意打亂名稱。兩者都不會影響已上線的網站。但如果你買的是程式碼，想拿來修改，這兩者就都會造成困擾。付款前，請在瀏覽器的開發者工具中打開即時示範的一支腳本，看看你能不能看懂。

純檔案，還是編輯器專案？

有些範本是某個特定遊戲編輯器的專案，只能在那個編輯器中開啟。另一些則是任何程式碼編輯器都能開啟的一般網頁檔案。本指南中的版本屬於後者：HTML、CSS、JavaScript 與 JSON，部分版本還使用 TypeScript。

瀏覽範本

Polar Games 套件裡有什麼

以我們的八號球遊戲 Velvet Pool 為例。它的手冊說明 ZIP 中有四個資料夾：

• game/ 是可直接上傳的版本，也是你唯一要發布的資料夾。
• source/ 是同一款遊戲的可編輯開發者版本，附有 README、package.json 與測試。
• documentation/ 存放附有插圖的指南及其圖片。
• THIRD-PARTY-LICENSES/ 存放字型授權全文與 README.txt 摘要。

在你的購買項目中，同一個套件會以兩種下載方式提供：完整套件（原始碼與手冊），或只有遊戲、可直接架設的版本。

game/ 與 source/ 的結構相同。以 Velvet Pool 來說，手冊要求你在 source/ 中編輯檔案，再把修改過的檔案複製到 game/ 中相同的路徑。兩者之間不需要任何編譯。

看看 Velvet Pool 版本

Velvet Pool 內部：檔案地圖

在購買前，檔案地圖是評估程式碼庫最便宜的方法。以下是 Velvet Pool 手冊中的檔案地圖，路徑相對於 source/ 或 game/：

• src/core/physics.js：球的模擬、旋轉，以及球撞擊球檯邊框（cushion）後的反彈。
• src/core/rules.js：八號球規則與犯規判定。
• src/core/ai.js：電腦如何選擇擊球。
• src/game/controls.js：瞄準、力道與旋轉的輸入。
• src/game/progress.js：成就、桌布、球桿與比賽計分。
• src/game/i18n.js：14 種語言的文字。
• src/game/localRecords.js：本機的分數紀錄。
• src/game/audio.js：音效與音樂播放。
• css/style.css 與 css/fonts.css：主題、響應式版面與字型宣告。
• assets/：美術、音訊與字型，其中有一個 logo/ 子資料夾。

注意這種分工。規則、物理與電腦對手都放在 src/core。輸入、存檔、文字與聲音則放在 src/game。手冊要求你一次只改一項功能，而這種結構讓這件事變得可行：調整球檔反彈與修正翻譯，會碰到不同的檔案。

手冊也說明，source/src 與 game/src 中的程式碼都是純粹、格式化的 JavaScript，沒有壓縮或打包的檔案。Velvet Pool 是在 WebGL2 上以原生（Vanilla）JavaScript 寫成，不使用任何程式庫，包括 Three.js。更新紀錄可以佐證這點：1.0.1 版把音訊、翻譯與著色器中過長的單行字串拆成易讀的多行，行為則維持不變。

Puttide：結構相同，但多了程式庫

Puttide 是我們的 3D 迷你高爾夫版本，使用同樣的四個資料夾，並多了一項：遊戲需要的兩個第三方程式庫。Three.js r186（MIT）與 Rapier 3D 0.21.0（Apache-2.0）放在 lib/three/ 與 lib/rapier/ 中，而 index.html 中的 import map 會告訴瀏覽器去哪裡找到它們。Puttide 的常見問題寫明，沒有任何東西從 CDN 載入，所以遊戲只需要你自己的主機。手冊補充說，程式庫檔案的格式設計為可讀，且行為未經修改。

它的檔案地圖，同樣相對於 source/ 或 game/：

• src/course/courses.js：球道的順序與解鎖條件。
• src/course/holes.js：遺跡（Ruins）球道的幾何、標準桿與障礙物。pier.js、ice.js、lava.js 與 sky.js 負責其他四條球道。
• src/sim/constants.js：物理參數。
• src/game/economy.js：球、軌跡與服裝的定義與價格。
• src/ui/i18n.js 以及另外三個字典檔：語言文字。
• css/style.css：介面顏色、字型與響應式樣式。
• fonts/ 與 music/：網頁字型（附授權）與兩首音樂。

手冊中新增一個球洞的步驟是：在正確的球道檔案中複製一個定義，給它一個唯一的 id，設定標準桿、開球點與球洞位置，把它加入球道，然後把它的名稱與提示加到語言字典中。買之前先讀一遍這樣的步驟。如果它看起來是你做得來的工作，這個套件就適合你。

看看 Puttide 版本

什麼時候原始碼需要建置步驟

「不需要建置步驟」對某些版本成立，對另一些則不然，所以要看版本，而不是看商店。以下是我們五個版本並排比較，附上定價。

• Velvet Pool，定價 39 美元：在 WebGL2 上的純 JavaScript 模組。編輯 source/，再複製到 game/。Node.js 20 以上只用於選配的測試。
• Puttide，39 美元：含 Three.js 與 Rapier 的純 JavaScript 模組，放在 lib/ 中。不需要建置步驟。Node.js 是選配的，只用於管理程式庫版本。
• Ricopop，39 美元：純 HTML、CSS 與 JavaScript 模組，game/ 本身就是原始碼。選配的開發者工具（Node.js 20 以上）：本機伺服器、關卡檢查器與測試。
• Pinloop，24 美元：TypeScript 搭配 Vite。game/ 資料夾中是可讀的 JavaScript 與 CSS。只有在要編輯並重新建置原始碼時，才需要 Node.js 22.12 以上與 npm。
• Sunset Rally，39 美元：TypeScript 搭配 Three.js r184 與 Vite。game/ 資料夾已經建置完成且未壓縮。只有在重新建置時才需要 Node.js。

Sunset Rally 的手冊建議使用 Node.js 24 LTS。在 source/ 中，你要執行 npm ci、npm run typecheck 與 npm run build，然後只發布 dist/ 裡的內容。手冊也要求你在重新建置時保持 minify 與 cssMinify 關閉，因為交付的執行時檔案是為了可讀而格式化的。上傳建置結果即可，永遠不要上傳 node_modules/。

看看 Sunset Rally 版本

架設它：「靜態」在實務上是什麼意思

靜態主機的意思是，你的主機只負責提供檔案。Velvet Pool 與 Puttide 的手冊用三個步驟說明整個安裝過程：

1. 解壓縮 ZIP。
2. 把 game/ 裡面的所有內容，用 FTP 或主機的檔案管理員，上傳到你網站上的一個資料夾，例如 public_html/velvet-pool/，並保留子資料夾。
3. 在瀏覽器中開啟該網址。

整個過程不涉及 npm、終端機、建置步驟、PHP、資料庫或帳號。根據同樣的手冊，真正會讓人絆倒的是：

• 不要連按兩下 index.html。瀏覽器會在 file:// 上封鎖遊戲模組。若要本機測試，請在 game/ 裡執行 python -m http.server 8765，然後開啟 http://localhost:8765/。
• 你的伺服器必須以 JavaScript 的 MIME 類型送出 .js 檔案，並以 application/wasm 送出 .wasm。MIME 類型錯誤會以模組被拒絕的錯誤出現。
• 公開架設時請使用 HTTPS。
• 存檔綁定在瀏覽器的來源（通訊協定、主機與連接埠）。把遊戲搬到另一個網域，玩家就會從零開始。
• 每次載入頁面仍然需要你的主機，所以這不是一個可安裝、可離線使用的應用程式。

logo、顏色、規則與翻譯放在哪裡

每本手冊都有一個自訂的章節，而涵蓋的內容因版本而異。以下是各本手冊的說明。

Velvet Pool

• Logo 與品牌：替換 assets/logo/ 中的檔案，並在 CSS 中調整對應的尺寸。
• 桌布與球桿樣式：它們的定義放在 progress.js 中。請保持項目 ID 不變，這樣已儲存的外觀才會繼續有效。
• ai.js 中的電腦行為，physics.js 中的物理。修改規則或物理之後，請執行八號球的測試。
• 翻譯：src/game/i18n.js，語言清單在 LANGS 中。

Puttide

• 顏色與字型：css/style.css。
• 物理：src/sim/constants.js。外觀的價格：src/game/economy.js，並保留既有的 ID。
• 音樂：把授權合法的檔案複製到 music/，並更新 src/audio/audio.js 中的曲目對應。
• 球洞、標準桿與解鎖：即上述的球道檔案。

Gridspark 與 Sunset Rally

根據 Gridspark 項目的常見問題，在 Gridspark 中，介面文字位於 src/locales.js，規則常數與調色盤位於 src/config.js，謎題規則則在 game.js、board.js、generator.js 與 shapes.js 中。在 Sunset Rally 中，戰役的對戰與星級條件在 Campaign.ts 中，地點在 Places.ts 中，物理在 physics.ts 中，計分在 match.ts 中。它的英文與葡萄牙文字串在 src/i18n.ts 中，其他 12 種語言則在 src/locales/ 中。

注意手冊漏掉了什麼。Puttide 手冊涵蓋顏色、物理、球洞、價格與音樂，但沒有更換 logo 的步驟；Sunset Rally 手冊也沒有專門的品牌章節。如果品牌是你第一個要改的東西，請在購買前先問清楚。

看看 Gridspark 版本

自動化測試：它檢查什麼，又不檢查什麼

Velvet Pool 的 source/ 資料夾內含一套測試。使用 Node.js 20 或更新版本，在 source/ 裡開啟終端機，執行 npm test，其效果等同於 node tests/run.js。不需要安裝任何相依套件。根據手冊，這套測試會檢查物理、八號球規則、電腦對戰與翻譯鍵的一致性，但它不能取代在瀏覽器和真實裝置上的測試。

翻譯鍵檢查，正是一款有 14 種語言的遊戲所需要的測試：在一種語言中新增了一個鍵，卻忘了另一種語言，人可能要過好幾週才會發現。

並非每個版本都有測試。Puttide 手冊沒有描述任何測試，只有人工檢查。Pinloop 與 Beep Out 在開發者指令中列出了 npm test，而 Ricopop 的開發者工具則包含一個關卡檢查器。

授權、第三方聲明與更新紀錄

根據商店條款，每次購買都會給你一份永久、非獨家的授權，可在一個最終產品中使用該版本，無論是你自己的，還是一位客戶的。你可以修改其中的程式碼、美術與音效，玩家可以免費或透過廣告使用。你不得轉售、分享或再散布範本、其原始碼或其素材本身，也不得以範本、套件或素材包的形式提供，或放進給開發者使用的其他產品中。授權不會因支援期結束而失效。

第三方部分保有它們自己的授權，你要把它們的聲明與你的產品放在一起。在 Velvet Pool 中，這表示兩種字型 Manrope 與 Fraunces，依 SIL Open Font License 1.1 授權，授權全文放在 THIRD-PARTY-LICENSES/ 中，並與字型放在一起。在 Puttide 的清單中，還多了 Three.js（MIT）、Rapier（Apache-2.0），以及 Rubik 與 Fredoka 字型（OFL 1.1）。

更新紀錄可以看出一個套件是如何被維護的。Velvet Pool 1.0.1（2026 年 10 月 18 日）把過長的字串拆成易讀的多行，並把授權聲明集中到同一個扁平的資料夾中。1.1.0 版（2026 年 10 月 22 日）把介面擴充到 14 種語言。這些紀錄都列在項目頁面上。條款說明，同一版本的更新會在發布時出現在你的購買項目中，但不承諾在固定期間內提供更新。

一小時內讀懂你買的遊戲程式碼

這是一份建議的計畫，不是保證的時間。它依循 Velvet Pool 的結構，只使用套件本身提供的東西。

1. 第 0 到 10 分鐘：解壓縮 ZIP，瀏覽 source/ 中的 README 與手冊的檔案地圖。打開 index.html，看它載入了哪些腳本與樣式表。
2. 第 10 到 20 分鐘：在 source/ 裡執行 npm test（Node.js 20 以上），取得全綠的基準線。
3. 第 20 到 35 分鐘：先讀 src/core，再讀 src/game。從 rules.js 開始，然後是 ai.js，接著是 physics.js。那就是遊戲本身。操作、進度、文字與聲音，則是它周圍的管線。
4. 第 35 到 40 分鐘：留意項目 ID 與存檔鍵必須保持穩定，否則玩家會失去已儲存的外觀。
5. 第 40 到 55 分鐘：做一個小小的修改，例如 progress.js 中的一個桌布定義。把檔案複製到 game/ 中相同的路徑，用 python -m http.server 8765 提供 game/，然後看看結果。絕對不要透過 file:// 開啟。
6. 第 55 到 60 分鐘：再執行一次測試。

ES 模組會在 import 行中寫出它們需要什麼，所以你可以從頁面載入的第一支腳本，順著這條鏈讀下去。這就是為什麼純檔案版本可以用這樣的速度讀完。

買原始碼之前該問的問題

• 付款前能讀手冊、玩示範嗎？我們的版本都在項目頁面上連結了兩者。
• 有沒有可直接架設的建置版本，以及獨立的開發者原始碼？
• 程式碼是可讀的，還是經過壓縮？打開一支腳本看看。
• 我需要 Node.js、npm、PHP 或資料庫嗎？需要哪些版本？
• 遊戲會從 CDN 或其他網站載入任何東西嗎？
• 裡面包含哪些第三方程式庫，各自依哪種授權？
• 我可以在幾個專案中使用它？可以再散布嗎？
• 支援期限多長，涵蓋什麼？我們的是 6 個月，或在結帳時選擇延長則為 12 個月，涵蓋安裝與使用檔案的問題，以及可重現的缺陷。
• 什麼是沒有包含的？
• 有更新紀錄，而且最近有發布過新版本嗎？
• 退款規則是什麼？我們的：範本是數位產品，所以只有在你尚未下載範本，或範本有我們無法修復的缺陷時，我們才會退款。你要附上授權編號寫信給工作室提出申請。

這些版本沒有包含什麼

有些版本附有選配的額外功能。Ricopop 與 Zabum 包含一個單檔的 PHP 排行榜，預設關閉。它是一個輕鬆的共用計分板，把分數存在一個檔案中，並不是防作弊的排名，也不是即時多人對戰。

支援涵蓋安裝與使用所附檔案的問題，以及所附遊戲中可重現缺陷的修正。這是一道界線，最好在第一天就知道。

常見問題

遊戲資料夾與原始碼資料夾有什麼不同？

game/ 是你要上傳到主機的建置版本。source/ 則是同一款遊戲的可編輯開發者版本。在 Velvet Pool 與 Puttide 中，兩者的結構相同，所以你在 source/ 中編輯的檔案，會複製到 game/ 中相同的路徑。在 Sunset Rally 這類 TypeScript 版本中，source/ 是一個你要重新建置的專案，然後發布新的輸出。

使用遊戲需要 npm 或 Node.js 嗎？

架設不需要。Node.js 只出現在 Velvet Pool 的選配測試（20 以上），或是用來重新建置 Sunset Rally（建議 24 LTS）與 Pinloop（22.12 以上）等 TypeScript 版本。

原始碼有經過壓縮嗎？

在本文涵蓋的版本中沒有。Velvet Pool 與 Puttide 都是格式化的純 JavaScript，而這兩者的 1.0.1 版都把過長的單行字串拆成易讀的多行。Sunset Rally 的執行時檔案是以格式化的方式交付，並關閉了壓縮。

一次購買可以用在好幾個專案或客戶嗎？

授權涵蓋一個最終產品，無論是你自己的，還是一位客戶的。第二個產品不在授權範圍內。

可以轉售或分享原始碼嗎？

不可以：不能單獨轉售，不能以範本、套件或素材包的形式提供，也不能放進給開發者使用的其他產品中。你可以在自己的最終產品內修改程式碼、美術與音效。

購買前可以先讀手冊嗎？

可以。每個項目頁面都連結到它的手冊，以及同一版本的可玩示範。

購買前先打開一個套件看看

選一個版本，從項目頁面打開它的手冊，玩示範，並對照上面的問題閱讀檔案地圖。如果手冊能回答這些問題，套件也應該能。如果不能，請在付款前寫信給工作室。

瀏覽所有範本