HTML5 游戏源码:拆开真实软件包,看里面到底有什么

HTML5 游戏源码可能指三种不同的东西:可以直接上传的构建、供您编辑的开发者文件,或者只能在某一款编辑器里打开的项目。我们商店里带源码的 HTML5 游戏模板,是前两者合在一起,全部是普通的网页文件,本文就打开真实的软件包,看看它是什么样子。

这些模板是我们卖的,所以请把本文当作对我们自家软件包的一次参观,而不是对市场的中立调查。我们查看了几个版本,主要是 Velvet Pool、Puttide 和 Sunset Rally,阅读了它们的公开手册和商店条款,并记下了盒子里有什么、运行它需要什么,以及没有什么。每份手册都链接在对应的商品页上,所以您可以在付款前核对每一行。

“HTML5 游戏源码”可能指什么

卖家使用“源码”这个词很随意。三个问题就能分清到底在卖什么。

是构建、开发者源码,还是两者都有?

构建是浏览器加载的成品游戏:一个 index.html、脚本、图片和声音文件。您可以原样托管。开发者源码是为人编辑而做的版本,文件按职责拆分。只有构建的软件包,您能上传,却不方便修改。只有源码的软件包,可能要先有工具才能运行。本文中的各版本把两者放在同一个 ZIP 里:通常是一个用于发布的 game/ 文件夹和一个用于编辑的 source/ 文件夹(在 Ricopop 中,game/ 本身就是源码)。

可读,还是被压缩了?

压缩会把脚本挤成几行密密麻麻、名字很短的代码,下载更快,阅读起来却很糟糕。混淆更进一步,会故意打乱名称。两者都不影响线上网站。但如果您买代码是为了修改它,两者都有害。付款前,先在浏览器的开发者工具里打开在线演示的一个脚本,看看自己能不能读懂。

普通文件,还是编辑器项目?

有些模板是为某个特定游戏编辑器制作的项目,只能在那个编辑器里打开。另一些则是任何代码编辑器都能打开的普通网页文件。本文中的各版本属于第二种:HTML、CSS、JavaScript 和 JSON,其中一些还用到 TypeScript。

浏览模板

Polar Games 软件包里有什么

以我们的 8 球台球版本 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:球的模拟、旋转和库边反弹。
• src/core/rules.js:8 球规则和犯规判定。
• 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 的原生 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 版本

源码需要构建步骤时

“无需构建步骤”对有些版本成立,对另一些则不成立,所以请核对具体版本,而不是整个商店。下面把我们的五个版本并排列出,并附上标价。我们自己的商店目前在标价基础上优惠 10%,即每个商品页上的工作室直售优惠:例如 Velvet Pool 显示 35.10 美元,而不是 39 美元。

• Velvet Pool,标价 39 美元:基于 WebGL2 的原生 JavaScript 模块。编辑 source/,复制到 game/。Node.js 20+ 只用于可选的测试。
• Puttide,39 美元:原生 JavaScript 模块,Three.js 和 Rapier 在 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. 用 FTP 或空间的文件管理器,把 game/ 里的全部内容上传到网站上的某个文件夹,例如 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。
• 存档属于浏览器的源(协议、主机和端口)。把游戏移到另一个域名,玩家就要从零开始。
• 全新加载页面仍然需要您的空间,所以这不是可安装的离线应用。

标志、颜色、规则和翻译在哪里

每份手册都有自定义章节,涵盖的内容因版本而异。下面是各份手册的说法。

Velvet Pool

• 标志和品牌:替换 assets/logo/ 里的文件,并调整 CSS 中对应的尺寸。
• 台呢和球杆样式:定义在 progress.js 中。请保持物品 ID 稳定,这样已保存的外观才能继续使用。
• 电脑对手行为在 ai.js 中,物理在 physics.js 中。修改规则或物理之后,请运行 8 球测试。
• 翻译: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 中,根据其商品页的常见问题,界面文字在 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 的手册涵盖颜色、物理、球洞、价格和音乐,却没有更换标志的步骤;Sunset Rally 的手册没有专门的品牌章节。如果品牌是您最先要改的东西,购买前请先问。

查看 Gridspark 版本

自动化测试:它检查什么,不检查什么

Velvet Pool 的 source/ 文件夹包含一套测试。有 Node.js 20 或更高版本时,在 source/ 里打开终端并运行 npm test,它等同于 node tests/run.js。不需要安装依赖。根据手册,这套测试检查物理、8 球规则、电脑对战和翻译键的一致性,它不能代替在浏览器和真实设备上的测试。

翻译键检查,正是一款有 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 文件夹有什么区别?

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 的运行时以格式化形式交付,关闭了压缩。

一次购买可以用于多个项目或客户吗?

授权涵盖一个最终产品,可以是您自己的,也可以是一位客户的。第二个产品不在其内。

我能转售或共享源码吗?

不能:不能单独转售,不能作为模板、套件或素材包,也不能放进面向开发者的其他产品里。您可以修改自己最终产品内的代码、美术和音频。

购买前我能阅读手册吗?

可以。每个商品页都链接了它的手册和同一版本的可试玩演示。

买之前先打开一个软件包

挑一个版本,在商品页打开它的手册,试玩演示,对照上面的问题读它的文件地图。如果手册能回答这些问题,软件包也应该能。如果不能,付款前请写信给工作室。

浏览全部模板