从想法，到本地运行
先完成课前准备，学习课程 1 的基础知识和工具；再按顺序完成课程 2 的目标清单与课程 3 的横版游戏。每个案例都有独立、完整的实践步骤。
课程结束后，学员能够
- 解释 Vibe Coding 中人和 AI 的分工。
- 用具体语言描述需求及验收方式。
- 生成并测试网页，用 Docker 在本地运行。
- 记录问题，向 AI 求助并复测。
- 备份作品，识别数据和分享的基本限制。
教学设计
课程 1 认识基础知识和工具；课程 2、3 分别完成目标清单和横版游戏。Docker Desktop 安装及镜像下载安排在课前。教师无需要求学员记忆代码语法，重点培养清晰表达和检查结果的习惯。
课前准备
学员准备
- 一台联网电脑与浏览器；横版游戏需要键盘。
- 一个可用的 AI 对话或 AI 编程工具。
- 纯文本编辑器：Windows 记事本或 macOS 文本编辑（纯文本模式）。
- 安装 Git，重开终端运行
git --version；本地管理不需要 GitHub 账号。 - 会复制、粘贴、保存和查找文件。VS Code 是可选编辑器，系统纯文本编辑器也可以。
- 课前安装并启动 Docker Desktop，确保 Linux 容器引擎正常运行；用
docker version检查 Client 和 Server，docker compose version检查 Compose；首次构建需要联网获取基础镜像。
教师准备
- 提前跑通全流程，核对工具的账号、额度和收费。
- 准备成功示例及可运行的备用 HTML 文件。
- 开启 Windows 文件扩展名显示，准备脱敏报错截图。
- 演示时放大字号，准备虚构的示例数据。
- 课前检查 Docker Desktop 系统要求、授权条款、虚拟化及 WSL 2（Windows），预先下载 swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/library/nginx:1.27-alpine 镜像并演练；安装、重启与网络故障不计入 45 分钟；核对 Docker Desktop 与 AI 工具的适用授权和费用。
开场话术：“这门课不要求大家先学会写代码。我们练习把需求讲清楚，让 AI 帮忙做出来，再用自己的判断检查和改进。”
认识 Vibe Coding，准备出发
先理解人与 AI 如何合作，再认识完成案例需要的工具。
学习目标
- 用自己的话解释 Vibe Coding，并知道 AI 输出需要人工验证。
- 能打开 AI 工具、编辑器、浏览器和终端，检查 Git 与 Docker。
- 能用“目标、功能、验收条件”描述一个简单想法。
什么是 Vibe Coding？
你用自然语言说明想做什么，AI 协助生成和修改代码；你亲手运行、检查和反馈，逐步把想法变成可用作品。
认识工具
| 工具 | 在课程中的作用 | 课前检查 |
|---|---|---|
| AI 对话工具 | 理解想法、生成和修改代码 | 能登录并发送中文问题 |
| 编辑器 | 保存网页和部署文件 | 能保存 UTF-8 文件并查看扩展名 |
| 浏览器 | 打开作品并进行功能测试 | 能打开本地网页 |
| Git | 记录项目文件的版本 | 终端运行 git --version |
| Docker Desktop / Compose | 构建并在本地运行应用 | 启动 Desktop；docker version 显示 Client 和 Server；docker compose version 显示版本 |
第一次练习：把想法说清楚
在 AI 对话框中粘贴下面的提示词，并根据自己的想法替换方括号。
我是完全没有编程经验的新手。我想制作【我想做的小工具或游戏】，给【使用者】在【使用场景】使用。请先帮我整理目标、三个最重要的功能，以及每个功能如何测试。请使用简单中文，不要立即生成代码。
完成标志：你能指出使用者、用途和一条可以亲手验证的结果。接下来选择课程 2 或课程 3，按照步骤实践；也可以两门都完成。
Vibe Coding 能帮你做什么？
下面四类作品都可以从一个小想法开始。先看视频了解成果，再思考“谁会用、解决什么问题、怎样判断做成了”。视频来自哔哩哔哩中文内容；能否播放取决于平台、网络和账号限制。课程并不要求购买视频中介绍的工具或服务。
① 做网站：展示信息和服务
可以做：个人介绍页、活动介绍页、作品集，或带简单表单的页面。你描述读者、页面内容和风格，AI 帮你搭建网页；你再检查文字、链接和手机显示。
视频样例：《Vibe Coding纯小白教程》展示如何向 AI 说明需求、启动软件并修复问题。先观察作者如何表达需求，再看如何检查生成结果。
新手建议：先做一页个人介绍，包含标题、简介和联系方式占位文字；暂不收集真实用户信息。
② 做生活工具：记录、提醒和整理
可以做：每日目标清单、习惯打卡、购物清单、计时器或简单记账原型。先确定输入什么、如何显示、刷新后是否保留，再用虚构数据测试。
视频样例：《手把手教你用 Codex 学会 AI 编程》展示制作包含待办事项、番茄钟和笔记的效率工具；可留意视频中从约 19 分 50 秒开始的实操。视频使用的工具与本课程可以不同。
新手建议：先实现添加、完成、删除三项，确认可用后再增加分类和筛选。
③ 做互动游戏：把规则变成可玩作品
可以做：答题、猜数字、消除或简单横版跳跃游戏。你先写清操作、获胜、失败和重新开始规则，再逐一试错和调整难度。
视频样例：《纯 Vibe Coding：用自然语言从零做出网页游戏》记录从需求拆解到游戏运行与 Docker 部署；案例涉及后端等进阶内容，初学者先观察游戏规则和迭代过程即可。
新手建议：先做一个短关卡，让角色能移动并重新开始；之后再加入金币、生命和计分。
④ 做数据看板：把数字变成图表
可以做：家庭开支概览、学习进度图表或小团队的虚拟数据展示。先准备少量示例数据，再让 AI 制作表格、统计与图表，并人工核对每个数字。
视频样例：《AI 大屏：Claude Code + 积木报表》展示使用 AI 辅助制作图表和交互数据大屏；它使用额外产品，观看时重点观察图表展示，数据真实性需要另外核验。
新手建议：先用 5 行虚构数据做一张表和一张柱状图，手算总数与图表结果是否一致。
哪些事情需要更多经验？
AI 也可以协助制作带账号、数据库、支付、自动处理数据或移动端应用的原型，但正式交给他人使用时，还需要验证安全、权限、可靠性、数据备份和持续维护。请先从不含真实敏感数据的小项目开始。
01 · AI 如何参与制作
AI 会根据你提供的信息预测合适的回答，也能生成代码。它不知道你脑中的全部细节，还可能生成无法运行或不符合要求的结果。先告诉它“给谁用、解决什么问题、必须有什么、如何验收”，再逐项检查；出现错误时把操作、预期和实际结果一起告诉它。
02 · 网页由什么组成
HTML 负责页面结构，CSS 负责颜色、布局和文字样式，JavaScript 让按钮、筛选和游戏操作产生反应。课程中的案例把三者放在一个 index.html 文件里。浏览器负责读取并运行这个文件。
文件夹是存放项目文件的地方；扩展名帮助系统识别文件类型。index.html 是网页，Dockerfile 没有扩展名，compose.yaml 是服务配置。保存后要确认位置和完整文件名。
03 · 如何用终端与电脑沟通
终端是输入指令的窗口，并不需要记住所有命令。命令通常只在当前文件夹生效：Windows 的 PowerShell 用 pwd 查看位置，用 dir 查看文件。复制命令前先看清当前文件夹和命令作用；错误信息可以去掉敏感信息后交给 AI 解释。
04 · Git：为项目保留版本
Git 像一份项目修改记录：git init 建立本地仓库，git status 查看变化，git add 选择要记录的文件，git commit 保存一个版本。Git 不等于 GitHub：本地记录不需要远程账号，也不会自动上传。
建议：每完成一个可运行的小阶段就检查并提交；只添加项目文件。首次提交可能需要设置 Git 用户名和邮箱，可以请 AI 指导仅在当前仓库配置。
05 · Docker 和 Compose
Dockerfile 是制作镜像的说明书；镜像是包含应用和运行环境的模板；容器是从镜像启动的运行实例。Compose 用一个配置文件描述服务、构建和端口。浏览器访问 localhost 表示访问自己的电脑，端口用于区分本机服务。
修改被打进镜像的网页后，需重新构建。练习项目每次测试按顺序执行 docker compose down --remove-orphans，再执行 docker compose up -d --build --force-recreate；先用 docker compose config 确认当前目录与项目配置，避免操作其他项目。
06 · 浏览器本地数据和常见误区
localStorage 是保存在当前浏览器的数据，并不会因为用了 Docker 就自动同步到其他电脑。不同地址或端口的数据相互隔离；清理浏览器数据可能导致丢失。示例只使用虚构内容，不应保存重要资料的唯一副本。
07 · 出错时的四步法
- 停下并记录刚才的操作，不要连续尝试大量未知命令。
- 写出期望与实际现象，必要时截取不含敏感信息的错误。
- 告诉 AI 当前文件、完整报错和已尝试操作，请它先解释原因。
- 一次修改一处，重新运行原测试，并检查旧功能。
基础知识自检
课程 2：目标清单完整过程
从空文件夹到本地 Docker 运行，完整跟做 22 步。
01 准备工具
自己操作：确认浏览器、AI 对话工具、纯文本编辑器、Git 和 Docker Desktop 已可用。
我是编程零基础。请用通俗语言解释浏览器、HTML、Git、Docker Desktop 和 Docker Compose 分别做什么，每项不超过两句话。
完成标志：能说出浏览器用来查看网页，Git 用来记录版本。
02 确认运行环境
自己操作：启动 Docker Desktop，打开 PowerShell，分别执行 git --version、docker version、docker compose version。
请教我在 Windows PowerShell 检查 Git、Docker 和 Docker Compose 是否可用。说明 docker version 中 Client 和 Server 各代表什么，以及看不到 Server 时先检查什么。
完成标志：三条命令可运行，docker version 同时显示 Client 和 Server；如失败先处理，不继续部署。
03 建立项目文件夹
自己操作：在“文档”中建立独立项目文件夹，名称为 goals-practice；在文件夹地址栏输入 powershell 回车。
我是 Windows 新手。请一步一步教我新建项目文件夹，并在该文件夹打开 PowerShell；说明怎样用 pwd 和 dir 确认位置，不要替我执行删除命令。
完成标志：终端显示的是自己的项目文件夹。
04 用 Git 开始记录
自己操作：在刚建的项目目录执行 git init，然后执行 git status。项目目录应独立，避免在已有仓库里再次初始化。
请解释 git init 和 git status 的作用，并告诉我怎样确认当前目录是我的项目目录。只管理本练习文件，不添加其他目录。
完成标志：git status 能显示当前仓库状态；不要输入密码或提交敏感文件。
05 明确要解决的问题
自己操作：决定给自己制作一个记录每日事项的工具，写下使用者和场景。
我想做一个“每日小目标清单”，使用者是没有技术基础的我，场景是每天记录待办。请帮我把想法整理为一句目标、三个核心功能和三个可检查的验收条件，不要直接写代码。
完成标志：需求明确包含添加、勾选、删除。
06 拆分最小功能
自己操作：检查 AI 的方案，确认先做单页、单人、无账号版本。
请把刚才的清单需求缩成适合零基础的最小版本：中文界面，添加、勾选、删除，不要登录、数据库或支付。给我逐条验收标准和暂不制作的功能。
完成标志：可以逐条判断是否实现。
07 生成完整网页
自己操作：新建名为 goals-practice 的独立文件夹；与 AI 保持同一对话，复制下面提示词。
请按刚才确认的需求，生成一个完整 index.html：HTML、CSS、JavaScript 均放在同一文件，中文界面，输入后添加、勾选完成、删除指定项目，适合电脑和手机；不使用外部依赖和网络。仅使用虚构示例。请输出完整代码及保存、打开、测试步骤。
完成标志：AI 返回从 <!doctype html> 到 </html> 的完整文件。
08 保存并打开
自己操作：把代码完整粘贴到记事本，另存为 index.html；保存类型选所有文件，编码 UTF-8。双击文件。
我使用 Windows 记事本。请逐步教我将你刚给的完整代码保存为 UTF-8 的 index.html，如何显示扩展名并确认不是 index.html.txt，怎样在浏览器打开。
完成标志：打开的是网页，而不是代码或空白文件。
09 测试添加
自己操作：输入“喝水”并点击添加，然后再输入“散步”添加。
请为我的清单列出添加功能的详细人工测试步骤，分别包含普通输入、连续添加两项和预期结果。
完成标志：两项分别出现，内容与输入一致。
10 测试空输入
自己操作：不输入任何文字点击添加，再输入空格点击添加。
请检查我的清单是否阻止空白内容和只包含空格的内容。如果没有，请只做必要修改，返回完整 index.html，并告诉我如何复测原有添加功能。
完成标志：没有空白项目；若 AI 修改了代码，保存后重新打开并复测。
11 测试勾选与删除
自己操作：分别勾选和取消勾选“喝水”，再只删除“散步”。
请列出勾选、取消勾选和删除单项的测试步骤，特别检查删除一项不会影响其他项。
完成标志：勾选状态可识别，删除后另一项保留。
12 提出界面改进
自己操作：先复制 index.html 作为备份，再让 AI 修改一项样式。
请保留添加、勾选和删除功能，把清单标题改成“我的每日小目标”，输入框文字加大，界面使用清爽的绿色。给我修改后的完整 index.html 和三个回归测试步骤。
完成标志：标题和字号改变；添加、勾选、删除仍正常。
13 增加清除已完成
自己操作：要求 AI 只增加一个按钮。
请保留现有功能，增加“清除已完成”按钮：只删除已勾选项，未勾选项必须保留；没有已完成项目时不删除任何项目。请输出完整 index.html 及测试步骤。
完成标志：混合完成和未完成项时，按钮只清除完成项。
14 增加本地保存
自己操作：明确让 AI 增加浏览器本地保存，然后按其步骤保存文件。
请保留现有功能，使用浏览器 localStorage 保存任务及完成状态；添加、修改和删除后及时保存；不可用时给出提示。请输出完整 index.html，说明本地数据限制和测试步骤。
完成标志：添加两项并勾选一项，刷新后内容与状态保留。
15 记录并修复问题
自己操作：找到一个测试失败点，或先检查刷新后状态是否正确；填写实际现象。
我做了【填写操作】，预期【填写预期】，实际【填写实际】，重复情况【填写】。以下是当前完整 index.html：【粘贴】。请先分析原因，尽量小范围修复，给完整文件和复测步骤。
完成标志：问题能复现、修复后再测，未发生问题时跳过修改。
16 进行完整回归
自己操作：逐项检查添加、空输入、勾选、删除、清除已完成、刷新保存和窄窗口。
请根据我的清单功能给我一张测试表：操作、预期结果、实际结果三列，包含空输入、删除单项、清除已完成及刷新。
完成标志：逐项记录通过或失败；失败时返回上一步处理。
17 准备容器文件
自己操作：在 goals-practice 目录准备 Dockerfile 与 compose.yaml。
请生成 Dockerfile 与 compose.yaml：Dockerfile 使用 swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/library/nginx:1.27-alpine 并复制 index.html 到 /usr/share/nginx/html/index.html；Compose 顶层 name 为 goals-practice，web 服务从当前目录构建，端口为 127.0.0.1:8091:80，不挂载卷。分别输出完整文件和保存方法。
完成标志：三个文件在同一目录；Dockerfile 无扩展名。
18 检查与提交初版
自己操作：执行 git status；只添加 index.html、Dockerfile、compose.yaml 并提交。
请教我查看 git status，然后仅提交 index.html、Dockerfile 和 compose.yaml，提交说明写“清单初版”。如果 Git 提示配置身份，说明如何只为当前仓库设置。
完成标志：版本提交成功，不包含其他项目或个人资料。
19 清理并部署
自己操作：执行 docker compose config；然后 docker compose down --remove-orphans；最后 docker compose up -d --build --force-recreate。
请解释下列命令各自用途：docker compose config、docker compose down --remove-orphans、docker compose up -d --build --force-recreate。说明清理范围仅为当前 Compose 项目。
完成标志：构建和启动成功，容器属于 goals-practice。
20 访问容器内清单
自己操作：运行 docker compose ps，访问 http://localhost:8091 并重新测试全部功能。
我在 localhost:8091 打开清单，请列出添加、勾选、删除、空输入和刷新保存的验收步骤；如果页面打不开，如何安全查看 docker compose ps 和 logs web？
完成标志：容器状态运行，页面功能正常。file:// 和 localhost 是不同来源，旧清单不会自动迁移。
21 更新并重新部署
自己操作：修改页面标题；先 down，再执行 up -d --build --force-recreate；刷新页面并复测。
我修改了 index.html，请给出仅针对当前 Compose 项目的清理和重建命令，并说明为什么要重新构建。不要删除卷或其他项目。
完成标志：新标题出现，原功能仍正常。
22 最终交付与复盘
自己操作：检查 git status，提交本次修改；展示作品并说明限制。
请根据我制作清单的过程，帮我生成一分钟演示提纲：需求、功能、遇到的问题、测试方法、Git 记录、Docker 地址和本地数据限制。
完成标志：能够向别人演示并说明数据存于当前浏览器。
进阶挑战：分类、优先级与筛选
在完成基础版本和保存 Git 版本后，把下列提示词发给 AI。修改后重新测试添加、勾选、删除和刷新保存。在自己的项目目录先执行 docker compose down --remove-orphans，再执行 docker compose up -d --build --force-recreate，重新访问并测试，然后提交 Git。
请在现有清单基础上增加任务分类（生活、工作、学习）和优先级（普通、重要），添加任务时可选择；列表显示分类和优先级。增加按完成状态和分类组合筛选，并显示总数、已完成数、待完成数。保存到 localStorage，旧任务缺少分类或优先级时分别按生活和普通显示。保留添加、勾选、删除、清除已完成及空输入处理。请返回完整 index.html，列出筛选组合、统计、旧数据兼容与刷新后的测试步骤。
验收：添加不同分类和优先级，组合筛选后仅显示符合条件的项目；勾选、删除后统计更新；刷新后数据仍在，原功能正常。
完成后：直接体验成品
在下方体验每日小目标清单；也可以在新窗口打开每日小目标清单。此演示供你对照，自己的作品仍需按上方步骤制作和部署。
课程 3：设计一个横版游戏
从游戏创意到容器运行，独立完成 23 步。
01 准备工具
自己操作：确认浏览器、AI 对话工具、纯文本编辑器、Git 和 Docker Desktop 已可用。
我是编程零基础。请用通俗语言解释浏览器、HTML、Git、Docker Desktop 和 Docker Compose 分别做什么，每项不超过两句话。
完成标志：能说出浏览器用来查看网页，Git 用来记录版本。
02 确认运行环境
自己操作：启动 Docker Desktop，打开 PowerShell，分别执行 git --version、docker version、docker compose version。
请教我在 Windows PowerShell 检查 Git、Docker 和 Docker Compose 是否可用。说明 docker version 中 Client 和 Server 各代表什么，以及看不到 Server 时先检查什么。
完成标志：三条命令可运行，docker version 同时显示 Client 和 Server；如失败先处理，不继续部署。
03 建立项目文件夹
自己操作：在“文档”中建立独立项目文件夹，名称为 jump-practice；在文件夹地址栏输入 powershell 回车。
我是 Windows 新手。请一步一步教我新建项目文件夹，并在该文件夹打开 PowerShell；说明怎样用 pwd 和 dir 确认位置，不要替我执行删除命令。
完成标志：终端显示的是自己的项目文件夹。
04 用 Git 开始记录
自己操作：在刚建的项目目录执行 git init，然后执行 git status。项目目录应独立，避免在已有仓库里再次初始化。
请解释 git init 和 git status 的作用，并告诉我怎样确认当前目录是我的项目目录。只管理本练习文件，不添加其他目录。
完成标志：git status 能显示当前仓库状态；不要输入密码或提交敏感文件。
05 明确游戏想法
自己操作：选择一个短关卡：角色向右移动、跳过障碍、到达终点。
我想做一款零基础能完成的 2D 横版跳跃游戏。请将想法整理成玩家目标、操作、失败、胜利和重新开始五条规则，不要写代码。
完成标志：规则说得清楚，关卡规模适合入门。
06 限定第一版范围
自己操作：确认只做单人、一个短关卡、固定障碍、键盘操作。
请帮我规划最小可用游戏：方向键移动、空格跳跃、固定障碍、终点、失败与重开。不要账号、联网、排行榜、外部素材或游戏引擎。列出可验收标准。
完成标志：能判断角色、障碍、胜负和重开是否正常。
07 生成完整游戏
自己操作：新建独立文件夹 jump-practice，在同一 AI 对话输入提示词。
请用一个完整 index.html 制作刚才规划的 2D 横版游戏，HTML、CSS、JavaScript 全放在一个文件。使用 Canvas 和简单几何图形，不依赖外部资源。中文说明，左右键移动，空格跳跃，落地后才能再跳，碰障碍失败，到终点胜利，按钮重开并重置状态。键盘操作时页面不滚动。请输出完整文件与测试步骤。
完成标志：AI 给出完整代码及运行说明。
08 保存并运行
自己操作：把完整代码保存为 UTF-8 的 index.html，双击打开；点击游戏画面获得焦点。
请教我用 Windows 记事本将完整游戏代码保存为 index.html，检查不是 .txt，并在浏览器运行。解释为什么可能需要先点击游戏区域。
完成标志：画面可见，点击后可进行键盘操作。
09 测试左右移动
自己操作：按住右键再按左键，检查角色是否按预期移动。
请列出测试 2D 游戏左右移动、松键停止、边界限制和页面不滚动的人工步骤及预期结果。
完成标志：移动方向正确，角色不离开画面。
10 测试跳跃和落地
自己操作：按空格跳起，观察落地，再尝试连续按空格。
请检查游戏跳跃和重力逻辑：空格跳起、落地停止下落、空中不能无限跳。若不符合请给完整修复代码和测试方法。
完成标志：角色落回地面，不穿地，也不能无限空中跳。
11 测试失败
自己操作：让角色直接碰到第一个障碍。
请为碰撞失败功能设计测试，要求碰障碍后显示失败，游戏不再继续移动或获胜，并能重新开始。
完成标志：失败提示出现，停止正常游戏。
12 测试胜利与重开
自己操作：重新开始，跳过所有障碍并抵达终点；再次点击重新开始。
请给我测试游戏胜利和重新开始的步骤，确认重开后角色位置、速度、按键状态及胜负提示都恢复。
完成标志：成功抵达终点；重开后状态重置。
13 调整关卡难度
自己操作：先复制 index.html 备份，要求 AI 只调整一项难度。
保留当前功能，只让第一个障碍稍低，让跳跃更容易。请给完整 index.html，并说明如何测试碰撞和通关没有被破坏。
完成标志：新手可以尝试通关，原有功能仍可用。
14 改进画面与说明
自己操作：让 AI 增加清晰的中文提示，保持功能不变。
保留游戏规则和操作，仅改善视觉：清楚区分地面、角色、障碍与终点，在画面旁显示中文键位说明；输出完整 index.html 和回归测试。
完成标志：画面要素可辨，操作说明清晰。
15 处理失焦和卡键
自己操作：按住方向键时点击画面外，再点击画面内测试。
请检查浏览器窗口或游戏画面失去焦点时是否会导致按键卡住。请以最小修改清除按键状态，返回完整代码和验证步骤。
完成标志：失焦后角色不会持续移动，重新聚焦后可操作。
16 描述并排查问题
自己操作：选一个失败测试，或确认当前测试均通过；记录操作、期望和实际。
我做了【操作】，期望【结果】，实际【结果】；是否稳定复现【填写】。以下是当前完整 index.html：【粘贴】。请先解释可能原因，最小修改并提供完整文件和复测步骤。
完成标志：如无问题可跳过修改；有问题先复现、再修复和复测。
17 全面游戏测试
自己操作：检查移动、跳跃、碰撞、胜利、重开、失焦和窗口变化。
请按操作、预期、实际三列生成横版游戏测试表，覆盖移动、跳跃、碰撞、胜利、重新开始、失焦以及较窄窗口。
完成标志：所有关键功能有明确测试结论。
18 准备容器文件
自己操作：在 jump-practice 目录准备 Dockerfile 和 compose.yaml。
请生成 Dockerfile 与 compose.yaml：Dockerfile 使用 swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/library/nginx:1.27-alpine 并复制 index.html 到 /usr/share/nginx/html/index.html；Compose 顶层 name 为 jump-practice，web 服务从当前目录构建，端口为 127.0.0.1:8092:80，不挂载卷。分别输出完整文件和保存方法。
完成标志：三个文件位于同一文件夹，Dockerfile 没有扩展名。
19 用 Git 保存初版
自己操作：执行 git status；只添加 index.html、Dockerfile、compose.yaml 并提交。
请教我在当前游戏仓库检查 git status，并只提交 index.html、Dockerfile、compose.yaml，提交信息写“游戏初版”。如果没有配置身份，说明如何仅对本仓库配置。
完成标志：提交成功，未包含其他文件。
20 清理并部署
自己操作：执行 docker compose config；docker compose down --remove-orphans；docker compose up -d --build --force-recreate。
请解释上述三个 Compose 命令，并说明为什么每次先清理本项目旧组件再重建。不要删除卷或其他项目。
完成标志：游戏镜像构建成功，容器启动。
21 访问容器里的游戏
自己操作：执行 docker compose ps，打开 http://localhost:8092，点击画面后使用键盘。
我在 localhost:8092 玩游戏。请列出检查容器状态、移动、跳跃、失败、胜利、重开与失焦的步骤，页面打不开时如何查看 logs web。
完成标志：页面可访问，关键游戏操作正常。
22 修改并重新部署
自己操作：修改标题；先 down，再执行 up -d --build --force-recreate；刷新并重新玩一遍。
我的游戏 index.html 已修改。请给出先清理当前 Compose 项目再重建并启动的命令，并解释改代码后为何需要重新构建。
完成标志：标题已更新；游戏仍可通关和重开。
23 最终交付与复盘
自己操作：检查 git status，提交本次修改，演示游戏并说明已知限制。
请帮我生成一分钟游戏演示稿：创意、操作、胜负规则、一次问题修复、Git 版本记录、Docker 本地地址，以及键盘操作限制。
完成标志：能独立演示游戏与重新部署过程。
进阶挑战：金币与生命值
基础游戏可运行并已保存 Git 版本后，增加规则。修改后重新测试碰撞、通关和重新开始。在自己的项目目录先执行 docker compose down --remove-orphans，再执行 docker compose up -d --build --force-recreate，重新访问并测试，然后提交 Git。
请保留现有横版游戏操作，增加 3 条生命和 3 枚固定金币。碰到障碍扣 1 条生命并回到起点，生命为 0 显示失败；已收集金币在本局保持。角色碰到金币时收集并显示进度，只有收集全部金币后到终点才胜利；未集齐时给出提示。重新开始重置生命、金币、位置和按键状态。请返回完整 index.html，并列出生命耗尽、金币收集、未集齐到终点、胜利及重开测试。
验收：依次测试三次碰撞失败；新游戏收集金币，未集齐到终点有提示，集齐后到终点胜利；重开后所有状态恢复。
完成后：直接体验成品
在下方体验2D 横版跳跃游戏；也可以在新窗口打开2D 横版跳跃游戏。此演示供你对照，自己的作品仍需按上方步骤制作和部署。
新手可能遇到的问题
以下为教学设计推演，非真实学员测试。教师可提前准备备用文件和脱敏截图。
| 现象 | 下一步 |
|---|---|
| AI 返回一大段代码 | 解释代码需要保存为 HTML；带学员完成保存和打开。 |
| 双击后显示文字 | 显示文件扩展名，检查是否误存为 .html.txt。 |
| 按钮没有反应 | 记录操作、期望和实际；提供完整代码请 AI 排查。 |
| 刷新后内容消失 | 确认是否要求保存；增加本地保存并实际验证。 |
| 修改后原功能坏了 | 恢复备份，一次只改一项，再测试新旧功能。 |
| AI 的解释看不懂 | 追问：“请用零基础能理解的语言说明下一步。” |
| 工具提示付费 | 停止并核对实际费用；使用教师备用文件继续。 |
随时可用的提示词工具箱
我想做一个【名称】。使用者是【谁】，使用场景是【何时、为什么用】。 最重要的功能：1.【功能一】2.【功能二】3.【功能三】。 界面希望：【语言、风格、设备】。 完成后，请告诉我如何使用、应该测试什么，以及目前有哪些限制。
请保留目前正常工作的功能，只修改：【具体修改】。 我希望修改后的效果是：【可观察、可测试的结果】。 请说明改了什么，并列出需要重新测试的步骤。
我是零基础用户，请用简单语言帮助我。 我刚才做了：【操作】；我期望看到：【期望】；实际看到：【结果】；我尝试过：【方法】。 请先解释可能原因，再告诉我下一步。如果需要修改，请尽量只改与问题有关的内容。