按什么,发生什么?
点击开始才计时。
左右键移动角色。
OCEAN LAB · 亲子创作 01
从海底抓鱼出发,练习说清规则、做出初稿,
再用一次小修改,看看自己的想法能不能成立。

三条规则+前后两个版本+一段自己的解释
AI 帮忙实现,你来做决定。YOUR LEARNING MAP
按顺序探索,也可以从需要的地方开始。
完整作品 · 原项目 v2
完整作品保留角色、道具和海域等玩法。下面的学习任务使用单角色教学基础版;试玩完整作品后,再按三条基础规则制作与修改。
电脑操作更方便;手机可触控体验,横屏视野更宽。先在区域内滚动选择角色并开始,再点击游戏区域;海底抓鱼支持左右键或 A / D,也可拖动角色;收起体验时倒计时会继续。页面内金币、道具与排名仅保留在本次体验中;退出或重新加载会清空,下载独立打开可保存到浏览器。展开时可用右上方按钮收起;焦点在页面控制区时可按 Esc 收起。
OBSERVE · 从真实感受开始
试着抓一条鱼。说说你做了什么、看到了什么,先不急着找答案。

教学基础版需要电脑键盘。可以先读下方规则、写下想改的地方;到电脑上再打开或下载HTML。空白时可在新窗口打开基础版。看到页面不等于已完成试玩,实际操作和文件保存要分别检查。
孩子亲手试玩,描述一个现象。
家长帮助打开作品,把操作机会留给孩子。
“我一直向右追鱼,
但它先离开了画面。”
在 Code.org 的海洋AI活动中,给图像标记类别,再观察模型怎样判断新图像。试着留意:样本没有包含其他海洋生物时,会发生什么?
打开 Code.org 海洋活动 ↗回来聊一聊:我们的抓鱼游戏按谁写的规则加分?分类活动又从什么材料中学习?
外部课程;语言、网络与账号条件以实际页面为准,本单元尚未实走。打不开也可以读上方小课;纸面分类能帮助理解,但不等于训练了模型。留下什么 一条具体的试玩观察,可以写在纸上。
DESCRIBE · 从想法到规则
请孩子先讲,家长再问一句:“我们怎么知道它做对了?”
点击开始才计时。
左右键移动角色。
碰一条鱼加 1 分。
鱼消失,不重复计分。
60 秒后停止操作。
重开归零,时间恢复。
第二句给出了可观察的结果。“好玩”仍有价值,可以继续追问:是速度、操作,还是规则哪里需要改变?
留下什么 孩子用自己的话写下操作、得分、结束三条规则。
MAKE · 两种起点,同一个目标
任选一条。得到能玩的基础版,再一起去下一站做一次修改。
两条路线没有先后要求;切换只改变你正在阅读的内容。
家长负责工具与文件,孩子负责提想法和试玩。先按下面顺序走一遍;不需要安装开发环境或学习代码。
国内主线先尝试 豆包官方网页版 ↗,用电脑已有浏览器打开,无需先安装桌面客户端。家长按页面提示登录自己的可用账号,发送“你好,请回复:准备好了”。看到正常回复,再继续。登录、验证码或额度问题先由家长处理;不要反复粘贴整段制作要求。
当前是候选工具路径:本轮浏览器工具超时,未完成豆包登录、上传 HTML、生成与下载验证。具体登录按钮、文件能力与费用以实际界面为准;能聊天不等于能完成案例。需要安装客户端时只从官方入口获取,本轮未实测安装。官方使用条件 ↗
这一项完成:家长知道作品用哪个工具制作,能收到回复,并了解当前账号条件。若只想先试玩,可选“修改示例”下载起步 HTML;没有可用制作工具时,可以试玩和备份,暂不能完成 AI 修改。
在桌面新建 my-ocean-game 文件夹,打开后新建 versions 子文件夹。当前作品固定叫 index.html;备份放进 versions,叫 v01-first-playable.html 等。不要把不同案例放在同一文件夹。
下载后先在浏览器“下载”列表找到文件,使用“在文件夹中显示”(Mac 可能叫“在访达中显示”),移动到作品文件夹再命名。重复下载可能叫 index (1).html;先确认它是新版,保留旧版,再把新版作为当前 index.html。不要凭文件图标判断版本。
请 AI 返回完整代码,复制从 <!DOCTYPE html> 到 </html> 的全部内容,不复制前后说明或三个反引号。网页聊天的“保存网页”会保存聊天页,不能代替保存游戏。如果代码中断,先要求重新交付完整 HTML,不要自行拼接。
不要用 Word 或富文本保存。已经存成 RTF 的文件,仅改后缀不能变成 HTML:请新建纯文本,重新粘贴完整代码再保存。
Mac 在访达选中文件,按 Command + I,展开“名称与扩展名”;Windows 在资源管理器显示扩展名后核对。完整名字必须为 index.html,不能是 index.html.txt、index.txt 或 index.rtf。如果内容确实是纯文本 HTML,才可把多余的 .txt 去掉;RTF 请返回上一步重存。
双击 index.html。若打开的是编辑器,右键“打开方式”选已有浏览器。应看到游戏标题、开始按钮和游戏区;点开始后再操作键盘。看到代码先核对扩展名和打开方式;空白或缺按钮时,将当前文件及现象交给制作工具排查。
请交付一个完整 index.html,包含 HTML、CSS、JavaScript,不使用外部库或网络资源,不部署。如不能提供 HTML 下载,请给出从 <!DOCTYPE html> 到 </html> 的完整代码,不省略、不用代码片段。不要声称已写入我的电脑。修改时以我提供的当前完整文件为准,只改我指定的一项,保留其他规则;告诉我怎样保存、重新打开和比较修改前后。
验证范围 · 2026-10-16:两个案例均已用 Mac 文本编辑手工保存并核对 .html 文件、重新打开源码、修改保存;本地 HTTP 浏览器刷新后可见新标题。Windows、工具安装/登录和账号内生成下载未实测。直接双击后以 file:// 在浏览器打开本轮受工具限制,不能用本地 HTTP 结果替代此项。
路线 A · 修改示例
将教学基础版保存为当前 index.html;确认文件实际存在。
点击开始,按左右键,抓一条鱼;等待结束,再试重开。
复制到 versions/v01-before-change.html。打开备份,确认也能玩。
路线 B · 从零创作
孩子读第二站的三条规则,家长把完整要求交给制作工具。先检查复述,再确认生成。
我要和家长制作海底抓鱼小游戏。先用简单中文复述规则,等我们确认再写代码。基础版只要一个角色、普通鱼、60 秒倒计时、当前分数、结算和重开。左右键移动,碰一条鱼加 1 分,鱼消失且不重复计分;普通鱼先慢速。时间到停止操作,重开重置时间和分数。不加商店、技能、摄像头。 使用一个 index.html 包含 HTML、CSS、JavaScript,无外部图片、库或服务。确认后优先直接创建或提供 HTML 文件,否则输出从 <!DOCTYPE html> 到 </html> 的完整代码;说明纯文本保存与浏览器打开及检查方法。 打开页面后必须先等待点击“开始游戏”按钮才计时,不能自动开局;结束时显示结算与“重新开始”。点击开始或重开后,键盘马上可用,方向键或空格不要滚动页面。
我确认上述基础规则。请生成完整 index.html,包含 HTML、CSS、JavaScript,无外部资源、不部署。能提供下载就给完整 HTML 文件;否则返回从 <!DOCTYPE html> 到 </html> 的完整代码,不省略、不只给片段。不要声称已经写入我的电脑。告诉我怎样纯文本保存为 index.html、检查真实扩展名并用浏览器打开;保存与试玩成功后,我会自行复制到 versions/v01-first-playable.html 备份。
按准备清单保存当前 index.html。检查开始、碰鱼计分、60秒结束、重开;仅看到代码还没完成保存。
保存为 versions/v01-before-change.html,重新打开确认。
只有片段:请求完整HTML。看到源码:核对真实扩展名与打开方式。页面空白:给AI当前完整文件和具体现象。不要猜它已经写入电脑,也不要覆盖唯一能玩的旧版。
EXPERIMENT · 把想法变成一次小试验
先说一个预测,再动手修改。结果不一样也有收获:你发现了新的问题。
普通鱼速度 → 原来的 80%
角色速度、60秒、每鱼1分、结束和重开都保留。“我预测鱼慢一点以后,会……”
把自己的猜测写在纸上,别急着看答案。
确认备份能玩,把当前完整 index.html 交给AI;新会话也要提供文件。
依赖:已有可玩基础版并备份。这一轮只将普通鱼速度调为当前的 80%,角色速度、60 秒、碰鱼加 1 分及重开规则不变。百分比是教学试验值,试玩后再调整。先说明改哪个参数,再修改现有文件,交付完整 index.html;说明前后比较与开始、计分、结束、重开的检查方法。 我会提供当前完整 index.html;如果你尚未收到,请先向我要,不要猜测旧内容。家长先自行复制旧版到 versions/v01-before-change.html,再将你返回的完整 HTML 下载或手工保存为当前 index.html,不另建无关新游戏。修改后说明参数前后值和具体保存路径。
分别打开旧版与新版,追同一种普通鱼。说出速度变化,再检查下方四项。核对没有误开备份或 index (1).html。
先用旧版继续。检查保存位置、文件名和浏览器地址,再描述“我做了什么—实际发生什么—希望怎样”。把当前文件交给AI,只修这一处,返回后重复同一个检查。
留下什么 修改前后两个版本、一句预测,以及实际观察。
REFLECT · 把方法带走
把新版另存为 versions/v02-my-version.html。关闭游戏后,从文件夹重新打开当前版,再检查开始、得分、结束和重开。
用纸笔或自己的文本文件记录即可。此页面不保存学习记录。
TRY IT SOMEWHERE NEW
看孩子能否自己说明目标、限制与检查办法。改成什么主题没有唯一答案;能换场景解释,比背下一个提示词更值得记录。挑战先说规则即可,完整制作可另约一次。
每次只加一项,先备份;道具和风险不是本单元完成前提。
基础完成后先备份。复制提示词让 AI 复述购买规则,确认后实现。亲玩赚金币,分别试余额不足、购买成功、重复点击、下一局生效和结束恢复。
依赖:已完成基础版并备份。增加金币:每局结算获得 floor(分数 / 2),一局只发一次。加大渔网道具价格先设 10 金币;余额不足不能购买,每次最多一个待使用道具;购买只扣一次,下一局使捕获范围增加 5%,本局结束恢复正常。10 与 5% 是教学试验值。先复述状态切换,确认后交付完整 index.html,保留基础操作并列出购买、生效、恢复与重开检查。
检查:购买只扣一次,下一局才生效,结束恢复。
未达到预期时,记录刚做的操作和实际现象,请 AI 修复并返回完整 index.html;修好再做下一步。
备份后先只加海雷,和孩子确认触发、扣分和最低分。修改后亲手碰一次雷,再查普通抓鱼和重开;遗迹和多角色留到下一次。
依赖:基础版完成并备份,不要求金币道具。增加一种海雷,角色碰到扣 2 分,最低为 0,海雷消失且只触发一次。保留普通鱼、60 秒、结束与重开,结束后不继续计分或扣分。先复述,确认后交付完整 index.html,并说明碰雷、低分、结束和重开检查。
检查:危险只触发一次,低分不变负数,重开正常。
未达到预期时,记录刚做的操作和实际现象,请 AI 修复并返回完整 index.html;修好再做下一步。
KNOWLEDGE NOTES
卡片在相关步骤旁也能打开;这里保留完整文字。
先分清:制作时用 AI,和作品运行时用 AI,是两件不同的事。
本例让AI帮忙写代码。游戏打开后,“碰鱼加1分”按已经写好的程序规则执行,不会因为你多玩几局就自己学出新规则。
在Code.org海洋分类活动里,你给图像标记类别,模型利用这些训练样本,再预测新图像的类别。这是另一种学习对象。
“AI写了计分代码”和“给鱼的图像贴标签训练分类器”,哪一个在让模型从样本学习?
后一个。前一个是AI协助创作程序。给聊天工具补充意见,也不等于你重新训练了它的底层模型。
回到作品:请孩子指出一条由人决定的规则。
可选拓展 · Code.org 海洋活动 ↗说清一个操作、预期结果和需要保留的限制。
“简单一些”可以继续拆开:鱼游得慢一点?角色移动快一点?还是游戏时间长一点?它们会带来不同结果。
“普通鱼速度改成当前的80%;角色速度、计分和60秒保持不变。”另一位试玩者也能按它比较。
把“重新开始要正常”改写成一句能检查的要求。
例如:“点击重新开始后,分数归零,时间恢复60秒,并且可以重新操作。”可以用自己的话表达。
回到作品:把你的想法写成一条能检查的规则。
程序需要记住变化,也需要知道什么时候执行动作。
重开时只把时间改回60,分数和鱼都不处理,可能怎样?
会带着上一局的内容进入新局。需要按规则重置分数、时间和游戏中的对象/状态,再实际试玩验证。
回到作品:找出两项会变化的数值。
聊天里的代码、电脑里的文件、浏览器打开的版本,要对得上。
HTML描述页面结构,CSS控制外观,JavaScript处理操作和变化。本例把它们放在一个完整HTML文件中,也没有外部依赖;这一课不用先记住语法。
my-ocean-game/
index.html ← 当前版
versions/
v01-before-change.html ← 旧版
v02-my-version.html ← 新版备份纯文本保存,核对实际扩展名;不要把聊天网页另存为作品。下载重复文件时,先辨认版本,再放进正确位置。
AI说修改完成,可浏览器仍显示旧效果,你先查什么?
检查是否保存成功、浏览器打开的路径和文件名、是否刷新了正确游戏标签页。先排除误开旧版或index (1).html,再检查代码。
回到作品:关闭标签页,再从自己的文件夹打开一次。
保持其他规则不变,才更容易看清这一次变化的影响。
如果同时减慢鱼速、延长时长和提高每条鱼分值,得分变多时,你很难说清主要原因。
80%表示保留八成,减少两成;不是“减去80”。这是一次试验的选择,是否更合适还要试玩。
新版一局得分比旧版高,能马上证明“速度降低就一定更好玩吗”?
不能。随机位置、操作熟练度也会影响结果。先比较可见速度,多试几次,再解释体验;还要看是否慢得无聊。
回到作品:修改前写一句预测,修改后写实际观察。
想要的新变化出现了,原来应该成立的规则也还成立。
鱼慢了,但重开不归零,说明这次修改仍有问题。开始、计分、结束、重开都要回查。
“我点了重新开始(操作);分数仍是上一局的8分(实际);我希望分数归零(预期)。”
再想一个容易漏掉的情况:时间到以后继续按键,会怎样?
应按结束规则停止本局操作和得分。还可以检查同一条鱼是否被重复计分。检查结果以实际运行观察为准。
新版坏了,可以先回到备份。给AI当前完整文件,只修复具体问题,再重复同一个检查。
回到作品:选一项边界情况,亲手验证一次。
真实亲子实践背景由项目发起者确认;过程依据 SweetyProject 历史对话及源码整理。账号内反馈不逐条署名为孩子原话,不推断年龄、个人贡献比例或教学效果。
2026-10-12 已用两个独立AI制作会话从空目录复做基础版,并在电脑浏览器检查开始、计分、结束、重开及一次速度修改。曾遇到自动开局与教程要求不一致,已补明确开始按钮和确认生成回复。这是代理复做记录,不代表所有工具一次生成成功或真实零基础家庭已验收;2026-10-16 补验:Mac 文本编辑手工纯文本保存、实际 .html 文件名、重新打开源码、修改保存与本地 HTTP 刷新已验证。工具安装登录、账号内生成下载、Windows 和本轮直接双击 file:// 打开未验收。进阶未纳入本轮实走。
首版完成角色选择、捕获、计分、结束和重开。
历史首版已有四角色,本页单角色起步是教学简化。
加入商店、单局道具、深浅海域与风险,多次降低新手鱼速。
说清价格、生效时机和结束恢复,让模糊想法变成规则。
调整金币兑换、道具价格和稀有物品机会。
难度与收益要根据实际试玩反复比较。
多轮调整识别与校准,后来明确恢复无手势版本。
探索可以失败,撤回不适合的功能也是设计决定。
增加角色并调整门槛、速度和高品质概率。
优势和代价一起讨论,新增能力后也要回查菜单。
调整进入概率与掉落,加入守卫和空掉落。
奖励、概率和危险需要一起考虑。
完成第五站的保存与复盘后,可选上方的进阶步骤;每次只加一项。
不必。先完成五站学习中的基础闭环:试玩、说规则、得到第一版、修改比较、保存与复盘。两条路线任选一条;进阶每次选一项,先备份再改。
检查实际扩展名、纯文本格式、完整代码及代码围栏。用浏览器重新打开;仍失败就把文件、操作和现象交给 AI,请其修复并返回完整文件。
打开 versions 的旧版比较,说明新增了什么、哪里失灵、哪些旧功能要保留。新版需复查开始、计分、结束与重开。
可以。顶部提供原项目完整作品的在线体验和 HTML 下载,教学区另有适合跟做的基础版。两者玩法范围不同;真实教学视频仍待提供。
历史首版已有多角色。本页单角色基础版是新教学拆分,不代表最终成品的全部规则。
第三站的从零路线先请AI复述规则,这是正常结果。确认规则后复制该路线中的确认回复。等文件实际出现再打开;如果仍只说明能力,明确要求提供完整index.html文件或完整代码,由家长保存后打开。
继续同一个制作对话,说清操作、实际结果、希望结果和要保留的规则。如果换到新对话,先上传当前index.html,不只粘贴一句修改要求。
真实亲子实践背景由项目发起者确认;过程依据 SweetyProject 历史对话及源码整理。账号内反馈不逐条署名为孩子原话,不推断年龄、个人贡献比例或教学效果。
本页完整作品体验和下载来自 SweetyProject 原项目完整快照;教学区下载为另行复做的基础版,两者用途不同。网页预览另做屏幕与旋转适配,海底另有存储兼容;完整玩法与下载文件保留。封面为设计插画,不表示实际游戏画面。时长与真实家庭体验未实测。国内工具教程待实测;已有 Codex 复做记录仅验证对应文件制作路径。
由家长安装、登录自己的可用账号并核对年龄与地区条件;本案例不要求孩子另开账号。以家长账号内当前费用与可用额度为准;本文不承诺免费生成。
历史 Codex 复做工具资料(非国内主线) ↗内容版本 1.3 · 更新 2026-10-19 · 教学视频待提供
分享你的尝试、遇到的问题,或者只是聊聊你的想法。
无需加微信,也能查看全部内容。