主题
第5课：做一个创意小游戏
🎮 今天我们来做游戏！而且你会学到程序员最重要的技能之一——找bug和修bug。
⏱️ 预计用时：50 分钟
学习目标
学完这节课，你将会：
- 了解一个游戏需要哪些基本要素
- 用 Claude Code 做出一个记忆翻牌游戏
- 学会调试思维——遇到bug时不慌张，像侦探一样找到问题
- 掌握向 Claude Code 描述bug的正确方式
概念时间：游戏的三大要素
你玩过的所有游戏——不管是手机游戏、电脑游戏还是桌游——都有三个核心要素：
1. 规则（Rules）
游戏需要规则来告诉玩家"能做什么"和"不能做什么"。
比如记忆翻牌游戏的规则：
- 每次只能翻两张牌
- 如果两张牌图案一样，就配对成功，保持翻开
- 如果不一样，两张牌都翻回去
- 翻完所有牌就赢了
2. 计分（Scoring）
游戏需要某种方式来衡量"你做得好不好"。
可以是：
- 分数（翻对一次加10分）
- 时间（用时越短越好）
- 步数（翻的次数越少越好）
- 等级（通过不同难度关卡）
3. 反馈（Feedback）
游戏需要让玩家感受到自己的操作产生了效果。
- 👀 视觉反馈：卡片翻转的动画、配对成功时的闪光
- 🔊 声音反馈：翻牌的声音、匹配成功的叮咚声
- 📳 交互反馈：按钮按下去的变化、鼠标悬停时的效果
小贴士
反馈是让游戏"好玩"的秘密武器！同样的游戏规则，加了好的反馈效果就会感觉完全不一样。你可以试试让 Claude Code 多加点动画和音效。
动手时间：做一个记忆翻牌游戏！
游戏介绍
记忆翻牌游戏（Memory Matching Game）是一个经典的小游戏：
- 桌面上有一些扣着的卡片
- 每张卡片背面有一个图案，每个图案出现两次
- 玩家每次翻两张牌，尝试找到配对的图案
- 找到所有配对就赢啦！
第一步：基础版——能翻牌就行
还记得上节课学的渐进式开发吗？我们继续用这个方法！
魔法咒语
帮我做一个记忆翻牌游戏网页，先做最基础的版本：
1. 4x4的网格，共16张卡片（8对）
2. 卡片背面都是一样的颜色，正面用不同的emoji表情作为图案
3. 点击卡片可以翻转（显示emoji）
4. 每次最多翻两张，如果匹配就保持翻开，不匹配就翻回去
5. 页面加载时卡片随机排列
6. 用一个HTML文件实现，包含CSS和JavaScript
7. 先不管太多细节，让核心玩法能跑起来就行
请把文件保存为 memory-game.html打开文件试试看！点击卡片能翻转吗？能匹配吗？
第二步：加上计分和步数
魔法咒语
给记忆翻牌游戏加上计分系统：
1. 页面顶部显示"翻牌次数"（每翻两张算一次）
2. 显示"已找到配对数 / 总配对数"
3. 加一个计时器，从开始翻第一张牌时开始计时
4. 所有配对都找到时，显示恭喜信息，包含用时和翻牌次数
5. 加一个"重新开始"按钮第三步：加上动画和反馈
这一步是让游戏变得"好玩"的关键！
魔法咒语
给记忆翻牌游戏加上动画和反馈效果：
1. 卡片翻转要有3D翻转动画（像真的翻牌一样）
2. 配对成功时，两张牌有一个庆祝动画（比如轻微弹跳或发光）
3. 配对失败时，卡片先短暂摇晃，然后翻回去
4. 鼠标悬停在卡片上时，卡片轻微浮起（加阴影）
5. 用 Web Audio API 加上简单的音效：翻牌声、匹配成功声、匹配失败声
6. 全部配对成功时，来一个撒花/彩带动画第四步：美化界面
魔法咒语
美化记忆翻牌游戏的整体界面：
1. 使用可爱的配色方案（柔和的粉紫色系或薄荷绿系）
2. 卡片背面加上好看的图案或花纹
3. 卡片用圆角设计，加上好看的边框
4. 页面标题用有趣的字体和样式
5. 计分区域设计成游戏HUD（信息面板）的感觉
6. 游戏结束的弹窗要好看，显示星级评价（根据翻牌次数评1-3星）
7. 整体要适配手机屏幕，在手机上也能玩重要技能：调试思维（Debug Thinking）
做游戏的时候，你一定会遇到bug。这不是"如果"的问题，是"什么时候"的问题。
遇到bug太正常了！ 全世界所有程序员每天都在和bug打交道。区别不在于"会不会遇到bug"，而在于"遇到bug怎么办"。
什么是bug？
bug就是程序的行为和你期望的不一样。比如：
- 你点了卡片，但它没翻转 ← 这就是bug
- 两张不一样的卡片却显示"匹配成功" ← 这也是bug
- 翻了三张牌才判断匹配 ← 还是bug
- 游戏画面超出了屏幕 ← 也算bug
调试思维：像侦探一样思考
遇到bug时，请像侦探一样按这四步来：
第1步：观察现场 —— 发生了什么？
"我点击了第一张卡片，它翻开了，显示了一个星星。然后我点击了第二张卡片，它也翻开了，显示了一个月亮。但是这两张牌没有翻回去，一直保持翻开的状态。"
第2步：确认预期 —— 应该发生什么？
"两张不同的牌应该在1秒后自动翻回去。"
第3步：描述差距 —— 实际和预期有什么不同？
"实际情况是两张不匹配的牌一直保持翻开，没有翻回去。"
第4步：告诉 Claude Code，让它帮你修！
魔法咒语
我的翻牌游戏有一个bug：
- 我做了什么：点击了两张不同图案的卡片
- 发生了什么：两张牌都保持翻开状态，没有翻回去
- 应该怎样：两张不匹配的牌应该在短暂停留后自动翻回去
请帮我找到问题并修复注意
描述bug的时候，越具体越好。不要只说"游戏坏了"或"不能玩"，要说清楚你做了什么、看到了什么、期望的是什么。这就像去看医生——你说"我不舒服"医生没法帮你，但你说"我吃了冰激凌之后肚子疼"医生就能快速诊断了。
常见bug和描述方式
下面列几个你可能会遇到的bug，以及怎么跟 Claude Code 描述它们：
bug 1：卡片翻转动画不正常
魔法咒语
翻牌游戏的bug：点击卡片后没有翻转动画，图案是直接出现的，没有那种翻过来的效果。应该是点击后卡片有一个3D翻转动画，从背面翻转到正面。bug 2：可以同时翻三张牌
魔法咒语
翻牌游戏的bug：我快速连续点击三张卡片，三张都翻开了。应该是同时最多只能翻两张牌，在两张牌判断匹配的过程中，点击其他卡片应该没有反应。bug 3：已经配对的卡片还能点击
魔法咒语
翻牌游戏的bug：已经配对成功保持翻开的卡片，再次点击还会有反应（好像被重新选中了）。应该是已经配对成功的卡片不能再被点击。调试流程图
遇到bug了！
↓
观察：发生了什么？
↓
思考：应该发生什么？
↓
描述差距：实际 vs 预期
↓
告诉 Claude Code
↓
测试修复结果
↓
修好了？ → 太棒了！继续！
没修好？ → 补充更多细节，再来一次小贴士
调试是一个循环过程，有时候需要好几轮才能修好一个bug。这很正常！每次给 Claude Code 更多的信息，它就能更准确地帮你找到问题。就像跟朋友描述一个你见到的奇怪事情，细节越多，对方越能理解。
想了解更多？
"bug"这个词的来历
"bug"在英文里是"虫子"的意思。1947年，一位叫 Grace Hopper 的计算机科学家在检查一台出故障的计算机时，真的在机器里找到了一只飞蛾！她把飞蛾粘在工作日志上，写着"第一个被发现的真正的bug"。从那以后，程序里的错误就被叫做"bug"了，修复错误就叫"debug"（去虫）。
Grace Hopper 是计算机历史上最了不起的女性之一哦！她还发明了世界上第一个编译器（把人类语言翻译成计算机语言的工具）。
完整的开发过程回顾
让我们看看今天的开发过程：
| 阶段 | 做了什么 | 学到了什么 |
|---|---|---|
| 第1步 | 基础翻牌功能 | 从MVP开始 |
| 第2步 | 计分系统 | 游戏需要计分 |
| 第3步 | 动画和音效 | 反馈让游戏好玩 |
| 第4步 | 美化界面 | 视觉设计很重要 |
| 调试 | 修各种bug | 调试思维 |
小测验
来检验一下这节课学到了多少吧！
1. 游戏中的「反馈」是什么意思？
2. 怎样向 Claude Code 描述一个 bug？
3. Bug 这个词的来历是什么？
今日挑战
你的记忆翻牌游戏已经很好玩了！现在来挑战一下：
挑战A：加上难度等级
魔法咒语
给记忆翻牌游戏加上难度选择功能：
1. 简单模式：3x4 网格（6对，12张牌）
2. 普通模式：4x4 网格（8对，16张牌）
3. 困难模式：4x5 或 5x6 网格（更多配对）
4. 在游戏开始前让玩家选择难度
5. 不同难度的星级评价标准也不一样挑战B：加上倒计时模式
魔法咒语
给记忆翻牌游戏加上倒计时挑战模式：
1. 开始游戏时有60秒倒计时
2. 配对成功加5秒，配对失败减2秒
3. 时间耗尽游戏结束，显示已完成的配对数
4. 倒计时快到时（最后10秒），数字变红并闪烁
5. 在原来的模式基础上增加，让玩家可以选择"经典模式"或"限时挑战"选一个挑战来做，或者两个都做！
小贴士
做挑战的时候如果遇到bug，别忘了用今天学到的调试思维：观察发生了什么 → 想想应该怎样 → 描述差距 → 告诉 Claude Code。多练几次你就会发现，描述bug会变得越来越自然！
本课小结
今天的收获超级多：
- 你知道了游戏的三大要素：规则、计分、反馈
- 你做出了一个好玩的记忆翻牌游戏，有动画、有音效、有计分！
- 你学会了最重要的调试思维——遇到bug不慌，像侦探一样分析和描述
- 你掌握了向 Claude Code 描述bug的正确方式
记住：bug不是敌人，而是让你变得更厉害的练习机会。每修一个bug，你就多了一点经验。专业的程序员就是这样一步步成长起来的！
下节课更酷——我们要给你的作品加上 AI 超能力！
留言讨论