首页 › 案例库 › 用 AI 制作收集星星小游戏
用 AI 制作收集星星小游戏
一个可以左右移动角色、收集星星并重新开始的小游戏。
用 AI 制作收集星星小游戏
在线作品与下载包尚未提供。
可以先阅读下方制作步骤，按「从零创作」制作自己的基础版。
控制说明 ⓘ
电脑操作更方便；手机可触控体验，横屏视野更宽。先在区域内滚动选择角色并开始，再点击游戏区域；按游戏内显示的控制提示操作。展开时可用右上方按钮收起；焦点在页面控制区时可按 Esc 收起。
你们想怎样开始？
两条路线都能完成自己的作品，随时可以切换。
跟做区 · 修改示例
一起给星星换一种配色
▣ 准备好再开始工具登录 · 保存 HTML · 检查文件名 · 重开与刷新
家长负责工具与文件，孩子负责提想法和试玩。先按下面顺序走一遍；不需要安装开发环境或学习代码。
1. 打开制作工具，先确认能对话
国内主线先尝试 豆包官方网页版 ↗，用电脑已有浏览器打开，无需先安装桌面客户端。家长按页面提示登录自己的可用账号，发送“你好，请回复：准备好了”。看到正常回复，再继续。登录、验证码或额度问题先由家长处理；不要反复粘贴整段制作要求。
当前是候选工具路径：本轮浏览器工具超时，未完成豆包登录、上传 HTML、生成与下载验证。具体登录按钮、文件能力与费用以实际界面为准；能聊天不等于能完成案例。需要安装客户端时只从官方入口获取，本轮未实测安装。官方使用条件 ↗
这一项完成：家长知道作品用哪个工具制作，能收到回复，并了解当前账号条件。若只想先试玩，可选“修改示例”下载起步 HTML；没有可用制作工具时，可以试玩和备份，暂不能完成 AI 修改。
2. 建一个找得到的作品文件夹
在桌面新建 my-star-game 文件夹，打开后新建 versions 子文件夹。当前作品固定叫 index.html；备份放进 versions，叫 v01-first-playable.html 等。不要把不同案例放在同一文件夹。
下载后先在浏览器“下载”列表找到文件，使用“在文件夹中显示”（Mac 可能叫“在访达中显示”），移动到作品文件夹再命名。重复下载可能叫 index (1).html；先确认它是新版，保留旧版，再把新版作为当前 index.html。不要凭文件图标判断版本。
3. 只有代码时，怎样手工保存
请 AI 返回完整代码，复制从 <!DOCTYPE html> 到 </html> 的全部内容，不复制前后说明或三个反引号。网页聊天的“保存网页”会保存聊天页，不能代替保存游戏。如果代码中断，先要求重新交付完整 HTML，不要自行拼接。
Mac：用“文本编辑”保存（本机已实测）
- 打开系统自带“文本编辑”，新建文稿；选择“格式 → 制作纯文本”。若菜单显示“制作多信息文本”，说明现在已经是纯文本，无需点击。
- 粘贴完整 HTML，按 Command + S。编码选择 Unicode (UTF-8)。
- 取消“如果没有提供扩展名，则使用 .txt”。取消后再填写 index.html，保存前再核对一次文件名。本机实测切换这个选项时，文件名曾自动变成 index.txt。
- 选刚建好的 my-star-game 文件夹，点“存储”。若提示扩展名选择，保留 .html；本机本次没有出现该提示。
不要用 Word 或富文本保存。已经存成 RTF 的文件，仅改后缀不能变成 HTML：请新建纯文本，重新粘贴完整代码再保存。
Windows：用“记事本”保存（未实机验证）
- 打开系统“记事本”，新建并粘贴完整 HTML，选择“文件 → 另存为”。
- 选择 my-star-game，文件名填 index.html，“保存类型”选“所有文件”，编码选 UTF-8，再保存。
- 打开文件资源管理器，Windows 11 通常在“查看 → 显示 → 文件扩展名”；Windows 10 通常在“查看 → 文件扩展名”。界面随版本可能不同，本轮未实机核对。
4. 核对真正的文件名，再打开游戏
Mac 在访达选中文件，按 Command + I，展开“名称与扩展名”；Windows 在资源管理器显示扩展名后核对。完整名字必须为 index.html，不能是 index.html.txt、index.txt 或 index.rtf。如果内容确实是纯文本 HTML，才可把多余的 .txt 去掉；RTF 请返回上一步重存。
双击 index.html。若打开的是编辑器，右键“打开方式”选已有浏览器。应看到游戏标题、开始按钮和游戏区；点开始后再操作键盘。看到代码先核对扩展名和打开方式；空白或缺按钮时，将当前文件及现象交给制作工具排查。
5. 重新编辑、保存，再刷新正确的标签页
- 先复制当前 index.html 到 versions，给备份不同名字。请 AI 修改时提供当前文件；无法上传时，粘贴完整源码并说明这是当前版本。
- 手工替换源码：Mac 在“文本编辑 → 文件 → 打开”选中 index.html，点“显示选项”，勾选“忽略多信息文本命令”再打开。必须看到 <!DOCTYPE html> 等源码，不是排版后的网页。Windows 在记事本中打开文件；找不到时把打开类型改为“所有文件”。
- 只在当前文件中选中全部源码，再粘贴 AI 给的新完整代码。Mac 按 Command + S，Windows 按 Ctrl + S；保持 index.html 名字和原文件夹。若下载了新文件，先确认保存位置与版本，不要覆盖唯一备份。
- 回到自己作品的游戏标签页，核对地址对应的文件夹与文件名，再按 Command + R（Mac）或 Ctrl + R（Windows）。不要刷新教程页、聊天页或 versions 里的旧版。刷新会重新开局，先点开始。
- 若仍是旧效果：检查编辑器是否已保存、浏览器打开的是不是 index (1).html 或备份。关闭游戏标签，从作品文件夹重新打开当前 index.html，再比较。结束前关闭并重新打开一次，确认作品已落盘。
展开完整文件交付要求（也可手动复制）
请交付一个完整 index.html，包含 HTML、CSS、JavaScript，不使用外部库或网络资源，不部署。如不能提供 HTML 下载，请给出从 <!DOCTYPE html> 到 </html> 的完整代码，不省略、不用代码片段。不要声称已写入我的电脑。修改时以我提供的当前完整文件为准，只改我指定的一项，保留其他规则；告诉我怎样保存、重新打开和比较修改前后。
验证范围 · 2026-10-16：两个案例均已用 Mac 文本编辑手工保存并核对 .html 文件、重新打开源码、修改保存；本地 HTTP 浏览器刷新后可见新标题。Windows、工具安装/登录和账号内生成下载未实测。直接双击后以 file:// 在浏览器打开本轮受工具限制，不能用本地 HTTP 结果替代此项。
本案例的起步作品下载尚未提供。可以阅读下面的修改路线；实际跟做请先通过「从零创作」得到可玩的 index.html，再从备份步骤继续。
01下载并打开
孩子来做
提出想法、亲手试玩，说出看到的变化。
家长协助
操作工具、保存备份，核对本步结果。
⚙ 操作
下载下方已提供的 HTML 作品到专用文件夹，并命名为 index.html。双击或用“打开方式”选择电脑浏览器，点击游戏内开始按钮。在线体验能玩不等于本地文件已经保存，请确认实际下载文件存在。
起步文件待提供；请先完成从零创作前六步。
怎样算完成？
浏览器显示游戏；开始后可以操作。
卡住了？看看这一步的办法
把当前 index.html 交给制作对话，写清“我做了什么、实际发生什么、希望怎样”，请 AI 只修复这一处并返回完整 HTML。若新版失灵，先用 versions 中的旧版继续试玩。
02保存一份备份
03给星星换一种配色
孩子来做
试玩，说说最想改变哪一处。
家长协助
操作工具、保存备份，核对本步结果。
⚙ 操作
先玩一局，说出自己最想改变的地方。家长把当前 index.html 上传或交给能读取文件的 AI 工具；复制本步要求。等待完整 HTML 文件或完整代码，按准备清单保存成当前 index.html，不要把聊天页另存为作品。
请修改我提供的当前 index.html。这一轮只将背景改为浅蓝色，星星改为金黄色，左右移动、碰星星加 1 分和重新开始规则不变。这是一次教学修改，先说明改动前后值，再只改这一项。交付一个包含 HTML、CSS、JavaScript 的完整…
展开完整提示词
请修改我提供的当前 index.html。这一轮只将背景改为浅蓝色，星星改为金黄色，左右移动、碰星星加 1 分和重新开始规则不变。这是一次教学修改，先说明改动前后值，再只改这一项。交付一个包含 HTML、CSS、JavaScript 的完整 index.html，不使用外部库、图片或服务，不部署。不要只给代码片段，不另建无关新游戏；如无法创建文件，请返回从 <!DOCTYPE html> 到 </html> 的完整代码并说明纯文本保存方法。保留点击开始后才计时、正常计分、结束与重新开始，并列出前后比较方法。
怎样算完成？
背景和星星颜色改变；移动、计分与重新开始仍正常。
卡住了？看看这一步的办法
把当前 index.html 交给制作对话，写清“我做了什么、实际发生什么、希望怎样”，请 AI 只修复这一处并返回完整 HTML。若新版失灵，先用 versions 中的旧版继续试玩。
04试玩并比较
孩子来做
提出想法、亲手试玩，说出看到的变化。
家长协助
操作工具、保存备份，核对本步结果。
⚙ 操作
将新版保存到当前 index.html 后，回到对应游戏标签页刷新；核对地址没有指向 versions 或 index (1).html。刷新后先点开始。打开备份和新版，比较背景与星星的配色。检查左右移动、碰星星加 1 分、收集后消失、重新开始分数归零。
怎样算完成？
能描述一处变化；开始、得分、结束、重开均可用。
卡住了？看看这一步的办法
把当前 index.html 交给制作对话，写清“我做了什么、实际发生什么、希望怎样”，请 AI 只修复这一处并返回完整 HTML。若新版失灵，先用 versions 中的旧版继续试玩。
05保存与分享
孩子来做
提出想法、亲手试玩，说出看到的变化。
家长协助
操作工具、保存备份，核对本步结果。
⚙ 操作
把新版复制为 versions/v02-my-version.html。关闭浏览器标签，再重新打开当前 index.html，完成一次开始、得分与重开。写下“我想改什么—我怎样改—试玩发现什么”。可以向家人展示本地作品，先由家长检查再分享文件。
怎样算完成？
重新打开仍能玩，保留前后两版和一条学习记录。
卡住了？看看这一步的办法
把当前 index.html 交给制作对话，写清“我做了什么、实际发生什么、希望怎样”，请 AI 只修复这一处并返回完整 HTML。若新版失灵，先用 versions 中的旧版继续试玩。
跟做区 · 从零创作
从一个想法，到第一版作品
▣ 准备好再开始工具登录 · 保存 HTML · 检查文件名 · 重开与刷新
家长负责工具与文件，孩子负责提想法和试玩。先按下面顺序走一遍；不需要安装开发环境或学习代码。
1. 打开制作工具，先确认能对话
国内主线先尝试 豆包官方网页版 ↗，用电脑已有浏览器打开，无需先安装桌面客户端。家长按页面提示登录自己的可用账号，发送“你好，请回复：准备好了”。看到正常回复，再继续。登录、验证码或额度问题先由家长处理；不要反复粘贴整段制作要求。
当前是候选工具路径：本轮浏览器工具超时，未完成豆包登录、上传 HTML、生成与下载验证。具体登录按钮、文件能力与费用以实际界面为准；能聊天不等于能完成案例。需要安装客户端时只从官方入口获取，本轮未实测安装。官方使用条件 ↗
这一项完成：家长知道作品用哪个工具制作，能收到回复，并了解当前账号条件。若只想先试玩，可选“修改示例”下载起步 HTML；没有可用制作工具时，可以试玩和备份，暂不能完成 AI 修改。
2. 建一个找得到的作品文件夹
在桌面新建 my-star-game 文件夹，打开后新建 versions 子文件夹。当前作品固定叫 index.html；备份放进 versions，叫 v01-first-playable.html 等。不要把不同案例放在同一文件夹。
下载后先在浏览器“下载”列表找到文件，使用“在文件夹中显示”（Mac 可能叫“在访达中显示”），移动到作品文件夹再命名。重复下载可能叫 index (1).html；先确认它是新版，保留旧版，再把新版作为当前 index.html。不要凭文件图标判断版本。
3. 只有代码时，怎样手工保存
请 AI 返回完整代码，复制从 <!DOCTYPE html> 到 </html> 的全部内容，不复制前后说明或三个反引号。网页聊天的“保存网页”会保存聊天页，不能代替保存游戏。如果代码中断，先要求重新交付完整 HTML，不要自行拼接。
Mac：用“文本编辑”保存（本机已实测）
- 打开系统自带“文本编辑”，新建文稿；选择“格式 → 制作纯文本”。若菜单显示“制作多信息文本”，说明现在已经是纯文本，无需点击。
- 粘贴完整 HTML，按 Command + S。编码选择 Unicode (UTF-8)。
- 取消“如果没有提供扩展名，则使用 .txt”。取消后再填写 index.html，保存前再核对一次文件名。本机实测切换这个选项时，文件名曾自动变成 index.txt。
- 选刚建好的 my-star-game 文件夹，点“存储”。若提示扩展名选择，保留 .html；本机本次没有出现该提示。
不要用 Word 或富文本保存。已经存成 RTF 的文件，仅改后缀不能变成 HTML：请新建纯文本，重新粘贴完整代码再保存。
Windows：用“记事本”保存（未实机验证）
- 打开系统“记事本”，新建并粘贴完整 HTML，选择“文件 → 另存为”。
- 选择 my-star-game，文件名填 index.html，“保存类型”选“所有文件”，编码选 UTF-8，再保存。
- 打开文件资源管理器，Windows 11 通常在“查看 → 显示 → 文件扩展名”；Windows 10 通常在“查看 → 文件扩展名”。界面随版本可能不同，本轮未实机核对。
4. 核对真正的文件名，再打开游戏
Mac 在访达选中文件，按 Command + I，展开“名称与扩展名”；Windows 在资源管理器显示扩展名后核对。完整名字必须为 index.html，不能是 index.html.txt、index.txt 或 index.rtf。如果内容确实是纯文本 HTML，才可把多余的 .txt 去掉；RTF 请返回上一步重存。
双击 index.html。若打开的是编辑器，右键“打开方式”选已有浏览器。应看到游戏标题、开始按钮和游戏区；点开始后再操作键盘。看到代码先核对扩展名和打开方式；空白或缺按钮时，将当前文件及现象交给制作工具排查。
5. 重新编辑、保存，再刷新正确的标签页
- 先复制当前 index.html 到 versions，给备份不同名字。请 AI 修改时提供当前文件；无法上传时，粘贴完整源码并说明这是当前版本。
- 手工替换源码：Mac 在“文本编辑 → 文件 → 打开”选中 index.html，点“显示选项”，勾选“忽略多信息文本命令”再打开。必须看到 <!DOCTYPE html> 等源码，不是排版后的网页。Windows 在记事本中打开文件；找不到时把打开类型改为“所有文件”。
- 只在当前文件中选中全部源码，再粘贴 AI 给的新完整代码。Mac 按 Command + S，Windows 按 Ctrl + S；保持 index.html 名字和原文件夹。若下载了新文件，先确认保存位置与版本，不要覆盖唯一备份。
- 回到自己作品的游戏标签页，核对地址对应的文件夹与文件名，再按 Command + R（Mac）或 Ctrl + R（Windows）。不要刷新教程页、聊天页或 versions 里的旧版。刷新会重新开局，先点开始。
- 若仍是旧效果：检查编辑器是否已保存、浏览器打开的是不是 index (1).html 或备份。关闭游戏标签，从作品文件夹重新打开当前 index.html，再比较。结束前关闭并重新打开一次，确认作品已落盘。
展开完整文件交付要求（也可手动复制）
请交付一个完整 index.html，包含 HTML、CSS、JavaScript，不使用外部库或网络资源，不部署。如不能提供 HTML 下载，请给出从 <!DOCTYPE html> 到 </html> 的完整代码，不省略、不用代码片段。不要声称已写入我的电脑。修改时以我提供的当前完整文件为准，只改我指定的一项，保留其他规则；告诉我怎样保存、重新打开和比较修改前后。
验证范围 · 2026-10-16：两个案例均已用 Mac 文本编辑手工保存并核对 .html 文件、重新打开源码、修改保存；本地 HTTP 浏览器刷新后可见新标题。Windows、工具安装/登录和账号内生成下载未实测。直接双击后以 file:// 在浏览器打开本轮受工具限制，不能用本地 HTTP 结果替代此项。
01明确玩法
孩子来做
提出想法、亲手试玩，说出看到的变化。
家长协助
操作工具、保存备份，核对本步结果。
⚙ 操作
写下左右移动、碰到星星加 1 分和重新开始三个功能。先只做一个场景。
怎样算完成？
一份具体、简短的玩法描述。
卡住了？看看这一步的办法
功能越多越好吗？先完成一个可以运行的小版本，再逐项增加。
02生成可玩初稿
03调整星星与角色
04测试计分与重新开始
做完后，讲讲你的决定
我改了什么？为什么这样改？试玩后有什么变化？
真实制作过程
演示案例，真实成品待提供。
完成自查与可选进阶
- 角色能左右移动且不出边界
- 每颗星星只计一次分
- 重新开始后分数归零
- 保存后能够再次打开
基础作品保存、重开与一次修改完成后，再选择从零路线中的进阶步骤；每次只加一项。
常见问题与素材
手机上能做吗？
可以先阅读和复制提示词；这个键盘操作案例建议在电脑上实践，具体工具的手机支持情况待核验。
需要付费吗？
本站内容全部公开免费。外部工具可能需要账号或费用，使用前请查看其要求；具体工具尚待核验。
生成的结果不一样怎么办？
AI 工具输出会不同。先确认移动、计分、重新开始三个功能，记录真实现象，再逐项调整。
C01-玩法检查表.pdf：用来逐项检查移动、计分和重新开始。 素材待提供
C01-配色参考.png：晴空蓝、深蓝与暖橙的配色参考。 素材待提供
来源、版本与工具核验说明
演示内容，未认定为真实亲子实践。
本案例为教学演示，未提供完整在线作品。封面为设计插画，不表示实际游戏画面。时长与真实家庭体验未实测。国内工具教程待实测；已有 Codex 复做记录仅验证对应文件制作路径。
账号及最低年龄条件待核验。费用待核验。
内容版本 1.0-demo · 更新 2026-10-11 · 教学视频待提供
做到哪一步了？愿意的话，来聊聊。
分享你的尝试、遇到的问题，或者只是聊聊你的想法。
无需加微信，也能查看全部内容。
待提供