第六站：请 AI 帮我编一个小作品

你当设计师，AI 帮忙写代码

这次做一个小鱼气泡计数器：点一下加1，达到目标就停下，还能重新开始。你决定规则，编程助手可以帮你写代码、解释和修改。GuppyLM 是本课的学习对象，不适合承担通用编程任务；真正使用 AI 编程时，请家长或老师选择适龄、获准使用的工具陪同操作。本站不接入实时编程助手。

先把任务讲清楚

把下面的任务卡交给编程助手，先请它复述规则，再生成完整代码。不要只说“做得好玩一点”，把怎样才算完成写清楚。只提供作品要求，不提供真实姓名、学校、照片或账号密码。没有合适的工具时，可用下一段本站预写参考代码练习，并在记录中如实写“使用参考代码”。

请做一个小鱼气泡计数器，给小学同学使用。
请先复述需求，等我确认后再写代码。
只用一个 HTML 文件，不用安装软件、联网或登录。
打开时显示0；每点击一次加1；到5显示“收集完成”并停止增加。
“重新开始”把计数变回0，随后还能继续点击。
按钮文字用中文，手机上也能点。
请给完整代码，再用小学生能听懂的话解释计数、按钮和重新开始。

打开一个能跑的小作品

下面是本站编写的完整参考程序，不是实时 AI 返回的结果。电脑上可从练习区导出 HTML 草稿，在下载文件夹中用浏览器打开；用纯文本编辑器修改后，保存并刷新。手机或平板不方便打开文件时，可请家长在电脑上演示，你来决定改什么、记录结果。网页可以离线运行，文件打开不需要启动服务器。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>小鱼的气泡计数器</title>
<style>
body{font:18px/1.7 system-ui;margin:32px auto;padding:0 20px;max-width:540px;color:#163b32;background:#f4faf8}
h1{font-size:28px}button{font:inherit;padding:10px 16px;margin:6px;border:1px solid #16836d;border-radius:6px;background:white;color:#163b32}
progress{width:100%;height:24px;accent-color:#16836d}
</style>
<h1>小鱼的气泡计数器</h1>
<p id="status" role="status"></p>
<progress id="meter" aria-label="收集进度"></progress>
<p><button id="add">收集一个气泡</button><button id="reset">重新开始</button></p>
<script>
const goal = 5;
let count = 0;
const status = document.getElementById('status');
const meter = document.getElementById('meter');
const add = document.getElementById('add');
function render() {
  status.textContent = count >= goal ? '收集完成！' : '已收集 ' + count + ' / ' + goal;
  meter.max = goal;
  meter.value = count;
  add.disabled = count >= goal;
}
add.addEventListener('click', () => {
  count = Math.min(count + 1, goal);
  render();
});
document.getElementById('reset').addEventListener('click', () => {
  count = 0;
  render();
});
render();
</script>
</html>

先解释，再改一个地方

找到 goal，它表示目标数量；count 表示已经收集多少。先问 AI：“请解释这两个名字和两个按钮分别做什么，不要改代码。”再要求：“把目标从5改成8，进度、完成提示和停止增加都跟着新目标变化，重新开始仍回到0。只改必要的地方，指出改在哪里。”在参考程序中，把 const goal = 5 改成 const goal = 8 即可。保留修改前的文件，再保存一个新版本。

你来当小测试员

先测试旧版：打开是0，点一下是1，点到5完成，继续点不再增加，重新开始后回到0且能再点。改成8后，把这些操作再做一遍，特别检查到5时还能继续、到8才结束。若不符合要求，告诉 AI“我做了什么、实际出现什么、我希望出现什么”，让它解释原因再修复；修完还要自己重测。AI 说完成，不代表你已经验证。