# 鼓捣星球 · 开工包 ## 第零步：先让手上真的有一个 `index.html` 这是给你本人看的。现在不用懂代码，不用装 Python，也不用打开黑色窗口；每一步看到“成了”再往下。 1. **找到 AI。** 点任务栏上的 Edge 或 Chrome；找不到就点任务栏上的 Windows 四格“开始”按钮，在搜索框输入 `Edge`，再点“Microsoft Edge”。看到浏览器后，点顶部标签旁的“+”新开一页，再点最上方的长条地址框，输入 `kimi.com`、`doubao.com`、`chat.deepseek.com` 或 `chatgpt.com`，按回车，任选能打开的一个。若出现“登录/注册”，请家长帮你。看到能输入消息的大框，成了。 2. **把开工包给它。** 点消息框旁的“+”、回形针或“上传文件”；在弹窗左边点“下载”或“桌面”，点 `开工包.md`，再点“打开”。看到消息框旁出现文件名后，点消息框输入 `请先读完这份开工包，读完告诉我。`，点发送箭头。找不到文件就点浏览器顶部原来的文档标签（或任务栏上的文档图标），点正文，按住 `Ctrl` 依次按 `A`、`C`；点浏览器顶部的 AI 标签，点消息框，按住 `Ctrl` 按 `V`，再点发送。看到发出的文件卡片或以“鼓捣星球 · 开工包”开头的长文，并收到 AI 回话，成了。 3. **告诉它做什么。** 点消息框，照抄：`我想做一个小猫接星星的小游戏，用方向键移动，接到星星加分。请按照开工包做，给我完整、不省略的 index.html；第一行是，最后一行是，全部放在一个 HTML 代码框里。` 点发送箭头。看到代码框的开头和结尾都对，成了。 4. **变成电脑文件。** 点代码框右上角“复制”或两个重叠方块；看到“已复制”或小勾，成了。点任务栏上的 Windows 四格“开始”按钮，在搜索框输入“记事本”，再点“记事本”；点白色空白处，按住 `Ctrl` 按 `V`，看到代码出现。点左上角“文件”→“另存为”，左边点“桌面”；在“文件名”框输入 `index.html`，把“保存类型”选成“所有文件（*.*）”，编码选 `UTF-8`，点“保存”。 **最后判据：** 按住键盘上的 Windows 徽标键，再按 `D`；看到桌面后双击 `index.html`。如果弹出“选择打开方式”，点 Edge 或 Chrome，再点“确定”。浏览器显示游戏画面，而不是记事本或一页代码，这一步才真的成了；若打开记事本，按第 4 步重新另存。 --- > 把这一整份粘给 AI，或者让它读这个文件。之后你不用再交代平台的事。 > > **这份东西是给你省事的，不是来管你的。** 八成篇幅在讲"这个站给你什么"， > 只有最后三条是真不许 —— 那三条要么有血的教训，要么是法律。 **给 AI 读者的三句话，读完再往下：** 1. 这份文档里的东西分三层力度：**【红线】**是铁律，就是第二部分那三条； **【事实】**是平台环境的物理现实，改不了，只能绕； **【建议】**是"通常这么干好"，不是要求。 2. 任何一条【建议】和"作品本来该有的样子"冲突时，**以作品为准**，拿不准就问用户。不要为了满足文档里的某一条，把作品改造成另一个东西。 3. 你（AI）见不到站长。所有需要站长办的事 —— 加公共库、聊联机、特殊要求 —— 统一写进上传时的 `--notes`，并且告诉用户"这句话请转给站长"。 --- ## 一句话鼓捣星球是个作品站，逛的人里很多是小学生。你做的东西会被放进作品页的一个 iframe 里跑，点开就能玩。 **想做多大做多大。多文件随便用。用什么引擎都行。** 反过来也一样 —— **一个 60 行的换算器和两万行的游戏，在这个站上是平等的作品。** **站上现在 88 件作品，一半以上是「用的」不是「玩的」** —— 汉字、口算、错题本、元素周期表这些。**工具和游戏一样正经**，别以为这儿只收游戏。 **两件你该知道的事:** 1. **站上有个「同题竞技」区** —— 同一道题让不同的 AI 各做一遍并排放着。霓虹突击那道题现在有 **11 个 AI 的答卷**。**你的作品有可能被拿去这么比。** 2. **现在最缺什么(实话):** 学习工具官方已经供得很全,不缺； **真缺的是"一两个下午能做完、但有始有终"的中小型游戏**，以及**两个人一起玩**的东西。你想投什么都收，但知道缺口在哪对你有用。 > **说清楚「两个人一起玩」今天能做到哪一步:** > 只能是**同一台电脑、两人分键盘**(一人 WASD 一人方向键那种)。 > **联机还没有** —— `/net.txt` 是草案,平台这边还在做,作品这边一行都不用写。 > **手机上也做不了双人** —— 虚拟手柄只有一套,两个人没法各拿一个。 > 往联机或者手机双人的方向做,今天一定白做。 --- # 第一部分 · 你有什么 ## 1. 体量不限，小体量也不心虚站上现在正跑着的东西长这样： | 作品 | 形态 | |---|---| | 真理 | 单个 html，**21021 行** | | NO HUMAN THERE | 一个目录，`src/` 底下 **22 个 js** | | PVZ · Cocos 重制版 | Cocos 引擎的构建产物，**32 MB** | | 方块兄弟 | 一个目录，5.5 MB 素材 | | 汉字学习助手 | 单个 html + 3755 个笔画数据文件，**纯 DOM，一行 canvas 都没有** | | 骰子概率 | 单个 html，几百行，**一个下午就能做完** | **没有"必须单文件"这回事。** 一个目录扔进去、内部用相对路径，就能跑。 **但入口文件必须叫 `index.html`，而且要放在作品文件夹的最外面一层。** 这里的“包”就是你准备上传（或压成 zip）的作品文件夹；“根目录”就是双击打开它后， **现在看到的这一层**。上传时，机器只在这一层找 `index.html`，找不到就会拒收。如果作品只有一个文件，就直接交名叫 `index.html` 的那个文件，不用再套文件夹。对照下面两张图。文件名不必和图里一模一样，位置要一样。图里的 `/` 只表示“这是文件夹”，`├──` 和 `└──` 只是画出来的连接线，不是文件名的一部分。 ```text ✅ 对：打开“我的游戏”后，这一层就有 index.html 我的游戏/ ← 这个文件夹就是要上传的“包” ├── index.html ← 入口在最外面一层 ├── game.js └── images/ └── cat.png ``` ```text ❌ 错：打开“我的游戏”后，这一层只有另一个文件夹我的游戏/ ← 这一层不能当作上传的“包” └── 我的游戏-v1/ ← 最常见的错：外面又多套了一层 ├── index.html ← 机器在外面那层找不到它 ├── game.js └── images/ └── cat.png ``` 按下面检查，不用打开命令行。每一步都要先看到最右边写的“成了”，再做下一步。 AI 只给了 `index.html` 这一个游戏文件，才叫“单文件作品”；只要还有图片、声音、 `.js` 文件或任何文件夹，就是“多文件作品”。**在“下载”或“桌面”里看到照片、作业等别的文件时，不要按 `Ctrl+A`，更不要把整层都压进 zip。** | 这一步 | 点哪里 | 在哪打字 | 看到什么算这一步成了 | |---|---|---|---| | 1. 找到游戏文件 | 点任务栏上的黄色文件夹。找不到就点 Windows 四格“开始”按钮，然后直接在键盘打字；窗口打开后，左边先点“下载”，没看到游戏再点“桌面”。左边没有这两项，就点“此电脑”，再双击“下载”或“桌面” | 找不到黄色文件夹时，点“开始”后直接输入 `文件资源管理器`；即使没看到输入框也可以打字。看到搜索结果后点“文件资源管理器” | 窗口里能看到刚拿到的游戏文件、游戏文件夹或 `.zip`；一个都没看到就还没成，不要猜 | | 2. 显示真正的完整文件名 | 点窗口顶部“查看”→“显示”→“文件扩展名”；如果“查看”下面直接有“文件扩展名”，就点它并打勾 | 这一步不用打字 | 文件名末尾显示出 `.html`、`.txt`、`.js` 或 `.zip` 等真正的结尾。这时才看得出一个看似叫 `index.html` 的文件，会不会其实叫 `index.html.txt` | | 3. 如果拿到的是 zip，先解压 | 文件名末尾不是 `.zip` 就直接做第 4 步；是 `.zip` 就用鼠标右键点它，再点“全部提取…”或“全部解压缩”，在弹窗里点“提取” | 这一步不用打字，保存位置保持弹窗原样 | 原来的 `.zip` 旁边多出一个末尾没有 `.zip` 的黄色文件夹；双击这个黄色文件夹后能看到游戏文件 | | 4. 如果游戏文件散在别的文件中，先单独装好 | 已经打开一个只装游戏文件的黄色文件夹，就直接做第 5 步。如果游戏文件和照片、作业等混在“下载”或“桌面”，不要选全部：点刚才拿文件用的 AI 网页或应用，再点消息框。AI 回答后回到文件资源管理器，在空白处点鼠标右键→“新建”→“文件夹”；按住 `Ctrl`，只逐个点中 AI 列出的文件，按住 `Ctrl` 再按 `X`；双击新文件夹，在空白处按住 `Ctrl` 再按 `V` | 在 AI 消息框输入 `请把你刚才给我的这个游戏的全部文件名逐行列出来，不要漏掉图片、声音和文件夹。` 并发送；新文件夹的名字输入 `我的游戏`，按回车 | 打开的“我的游戏”里只看到 AI 列出的游戏文件，没有照片、作业等别的文件。AI 如果说不确定，就还没成，不要移动或上传，找家长或老师帮忙 | | 5. 找到真正的最外面一层 | 看当前窗口：如果这一层只有另一个文件夹，就双击里面那个文件夹；如果进去后还是只有一个文件夹，就再双击，直到这一层能看到 `.html` 文件。**不要搬文件，也不要删除外面的文件夹** | 这一步不用打字 | 当前这一层能直接看到至少一个 `.html` 文件，而不是必须再双击文件夹才能看到；从现在起，这一层就是你的作品文件夹最外层 | | 6. 认准入口网页 | 如果这一层已经有完整文件名正好是 `index.html` 的文件，就点一下它。如果没有，哪怕只有一个别的 `.html` 也不要猜：点刚才使用的 AI 对话，再点消息框；AI 回答后，点任务栏黄色文件夹回到作品文件夹，再点它说的那个文件 | 需要问时，在 AI 消息框输入 `请只告诉我这个游戏用来打开游戏的入口网页的完整文件名。`，再点发送箭头 | 只有一个入口文件被选中；它要么本来就完整显示为 `index.html`，要么完整文件名和 AI 回答一字不差。对不上就还没成，不要改名 | | 7. 改成真正的 `index.html` | 如果选中的文件已经完整显示为 `index.html`，不要改，直接做第 8 步。否则用鼠标右键点它；看到文字“重命名”就点，只有小图标时把鼠标停在图标上，看到“重命名”再点；仍找不到就点“显示更多选项”→“重命名”。名字变成输入框后，按住 `Ctrl` 再按 `A`，把包括 `.txt` 在内的整个旧名字全选中 | 在变成输入框的文件名里输入 `index.html`，按回车；如果 Windows 问“更改扩展名可能导致文件不可用”，点“是” | 在已经显示扩展名的情况下，完整文件名正好是 `index.html`，末尾没有第二个 `.txt` | | 8. 自己验入口 | 如果文件资源管理器不在最前面，点任务栏上的黄色文件夹；在作品文件夹最外层快速双击 `index.html`。出现“选择打开方式”时，点 Edge 或 Chrome，再点“仅一次”或“确定”；如果打开的是记事本，就关掉记事本，右键点 `index.html`→“打开方式”→Edge 或 Chrome | 这一步不用打字 | 浏览器打开并显示你的游戏，不是记事本、空白页或一页代码。**看到游戏，入口的名字和位置才真的对了；没看到就先别上传** | | 9. 多文件作品压成 zip | 单文件作品不做这一步。多文件作品点任务栏黄色文件夹回到刚才认准的作品文件夹；确认窗口里没有照片、作业等别的文件后，点任意一个游戏文件，按住 `Ctrl` 再按 `A`；右键点任意一个被选中的文件，有“压缩为 ZIP 文件”就点它。没有时点“显示更多选项”→“发送到”→“压缩（zipped）文件夹”；菜单里直接有“发送到”就直接点 | 新 zip 的名字变成输入框时输入 `我的游戏.zip`，按回车 | 同一窗口里出现完整文件名为 `我的游戏.zip` 的新文件；没有出现就还没成 | | 10. 再验最终的 zip | 单文件作品不做这一步；多文件作品快速双击第 9 步出现的 `我的游戏.zip`，打开后不要先双击任何文件夹 | 这一步不用打字 | 在 zip 当前这一层的文件列表里能直接找到 `index.html`，就是对的；如果必须先双击某个文件夹才能找到，就是错的，回到第 5 步重新认最外层 | > 站上确实有叫 `大厅.html`、`truth_survival.html` 的作品 —— 那是站长手工登记进 > 清单的老作品，走的不是投稿这条路。**你走投稿，就按 `index.html` 来。** **大小**(服务端真实数字，不是建议值)： | 怎么交 | 上限 | |---|---| | 单个 html | **8 MB** | | 打成 zip | **24 MB**;解开后 96 MB;最多 800 个文件;目录最多套 12 层;单个文件 24 MB | ## 2. 第三方库：公共库在 `/g/_lib/` 不用自己打包一份，也不用去连 CDN（**CDN 一定连不上**，见第 6 节）。直接从平台的公共库引，路径写 `/g/_lib/...` 就行。现在里面有这些，全都逐个验过线上真取得到： | 库 | 版本 | 格式 | 体积 | 路径（`/g/_lib/` 下） | |---|---|---|---|---| | **three.js**（3D，最常用） | r185.1 | ESM | 635 KB | `three/three-0.185.1.module.js` | | three.js addons（`examples/jsm` 全量 425 个文件） | r185.1 | ESM | 8.8 MB | `three/addons-0.185.1/` | | Babylon.js（另一套 3D） | 6.49.0 | ESM | 4.2 MB | `babylonjs/core-6.49.0.mjs` | | **Phaser**（2D 游戏框架，站上最对口） | 3.90.0 | ESM / UMD | 1.2 MB | `phaser/phaser-3.90.0.esm.min.js` · `phaser/phaser-3.90.0.min.js` | | PixiJS（2D 渲染器） | 8.20.0 | ESM / UMD | 800 KB | `pixijs/pixi-8.20.0.min.mjs` · `pixijs/pixi-8.20.0.min.js` | | p5.js（创意编程、画画、小玩具） | 1.11.13 | UMD | 1.0 MB | `p5/p5-1.11.13.min.js` | | matter.js（2D 物理） | 0.20.0 | UMD | 366 KB | `matter-js/matter-0.20.0.js` | | cannon-es（3D 物理，常配 three） | 0.20.0 | ESM | 338 KB | `cannon-es/cannon-es-0.20.0.mjs` | | **Tone.js**（音乐合成，不用带音频文件） | 15.1.22 | UMD | 337 KB | `tone/Tone-15.1.22.js` | | howler.js（音频播放） | 2.2.4 | UMD | 105 KB | `howler/howler-2.2.4.js` | | GSAP（补间动画） | 3.15.0 | UMD | 71 KB | `gsap/gsap-3.15.0.min.js` | | lil-gui（调参面板） | 0.21.0 | ESM / UMD | 57 KB | `lil-gui/lil-gui-0.21.0.esm.js` · `lil-gui/lil-gui-0.21.0.umd.js` | | canvas-confetti（撒彩带庆祝） | 1.9.4 | ESM / UMD | 24 KB | `canvas-confetti/confetti-1.9.4.module.mjs` · `canvas-confetti/confetti-1.9.4.browser.js` | **ESM 用 importmap 引；UMD 直接 ` ``` 三件事： - `"three/addons/"` 末尾那个斜杠不能少 —— 它是前缀映射，addons 之间互相 import 全靠它。 - `three-0.185.1.core.js` 是 module 文件自己引的，**不用**写进 importmap，也别单独引它。 - addons 里 `tsl/` 那批是 WebGPU 专用的（它们 import `'three/tsl'` / `'three/webgpu'`），本站没放 WebGPU 构建，引了会解析失败。走 `WebGLRenderer` 的东西 —— OrbitControls、各种 Loader、postprocessing、 FontLoader/TextGeometry —— 全都能用，那才是常规路子。顺带：three r152 之后颜色 API 换了，用 `outputColorSpace` / `SRGBColorSpace`，老的 `outputEncoding` / `sRGBEncoding` 已经删了，写了会静默不生效。 ### 一个大坑：这些库"从文件加载资源"的接口，在本站用不了作品的 CSP 是 `connect-src 'none'`，**fetch / XHR 一律发不出去，连同源的也不行** （第 6 节里的那条事实）。`GLTFLoader.load()`、`p5.loadJSON()`、Phaser 的 loader、 `PIXI.Assets.load()` 底层全是 fetch，在这儿会失败 —— 投稿检查器也会把 fetch/XHR 直接判成 stop。 - **能走**：`import` / `` / `