D05 图像生成 + 3D 打印 + 编程准备

今天我们要用 Trae IDE（字节跳动出的 AI 原生代码编辑器）配合 AI 助手，让你的第一个网页游戏上线。

不需要你写一行代码 — 全部让 AI 写，你负责：提需求 → 试玩 → 改三处 → 截图。

🛠 Trae IDE 启动（5 分钟）

1. 下载安装：trae.ai（免费）
2. 新建项目 → 选 HTML 项目 → 选个文件夹
3. 点左边栏的 "AI 对话"（💬 图标）
4. 右侧 选模型：GLM 5.2或 DeepSeek
5. 切换 "Builder" 模式（让 AI 自己写代码、改文件、跑命令）

🎮 第 1 轮：写猜数字游戏（10 分钟）

在 AI 对话框输入：

请你帮我写一个 网页"猜数字"游戏（HTML + CSS + JavaScript，单文件）。

要求：
1. 游戏规则：1-100 之间随机生成一个数字，玩家输入猜测，提示"大了"或"小了"，猜中显示"恭喜"
2. 页面布局：标题 + 提示文字 + 输入框 + "猜"按钮 + 重玩按钮
3. 次数统计：已经猜了几次
4. 页面风格：深色背景（#0a0a23）+ 霓虹色按钮（青色 + 黄色）
5. 响应输入：按下回车也能猜

请直接修改 index.html 文件，完成后告诉我。

💡 小技巧：AI 写完后会自动改文件，你可以点 "Apply" 应用。点上面的 运行按钮（▶）就能预览。

🧪 第 2 轮：试玩 + 改 3 处（15 分钟）

点击上方预览，自己玩 3 次。挑 3 个想改的地方，输入：

我想改 3 个地方：
1. [比如：限次数，只有 7 次机会]
2. [比如：加计时器，看猜中用了多久]
3. [比如：猜中的时候撒花动画]

🎨 第 3 轮：调样式（15 分钟）

挑一个最丑的地方让 AI 改：

请帮我把 [这个按钮 / 这个标题 / 这个背景] 改得更好看。要求：
1. 字号 / 颜色 / 边框都改一下
2. 加点动画效果（比如按钮 hover 放大 1.1 倍）

📸 第 4 轮：截图交作业（15 分钟）

让同学玩一下你的游戏，用截图工具（Windows: Win + Shift + S）截 2 张图：

• 第 1 张：游戏进行中（猜错了提示"大了"）
• 第 2 张：猜中了的画面

📝 提交内容（5 分钟）

• ✅ index.html 文件（压缩成 zip）
• ✅ 截图 2 张
• ✅ 100 字心得：AI 写的代码你能看懂多少？改 3 处哪处最难？

延续 Day 1-4 的卡丁车主题，今天用 Trae IDE 做一个真实的卡丁车竞速游戏。

这次是大挑战：游戏有 5 大功能，需要你用 4 轮迭代让 AI 帮你完成。

🎯 拆需求：5 大功能

1. 🏎 玩家小车：可以用方向键控制 ↔ ↑↓
2. 🛣 跑道：黑色背景 + 路面 + 双道线
3. 🟥 障碍物：随机生成红色方块 / 石头
4. ⚡ 加速道具：黄色圆圈，吃到加速 3 秒
5. ⏱ 计时 + 计分 + Game Over：撞到扣 1 血，0 血 / 跑 60 秒结束

🎮 第 1 轮：场景 1（玩家 + 跑道）（20 分钟）

请你帮我写一个 网页"卡丁车"游戏（HTML + CSS + JavaScript，单文件 index.html）。

第一步只实现：
1. 一个 800x600 的画布（canvas），深绿色背景
2. 画布中央出现一辆黄色方块代表我的卡丁车（30×40）
3. 我能用方向键控制它上下左右移动（每次移动 5 像素）
4. 屏幕顶部显示 "🎮 键盘：↑↓←→ 移动" 提示

不要做障碍物、不要做道具、不要做计时。先写这一个！

第 1 轮要求：跑通就行，不改样式。跑通后 截图交给我。

🟥 第 2 轮：场景 2（障碍物 + 碰撞）（25 分钟）

继续完善卡丁车游戏：
1. 每 2 秒 在跑道右侧随机位置生成一个红色方块障碍物（向左移动）
2. 当我的卡丁车碰到红色方块时，让它闪 3 下红光并扣 1 血
3. 在屏幕右上角显示 "❤️ 血量：3"
4. 血 = 0 时屏幕中央显示 "💥 GAME OVER" + 重玩按钮

调试小贴士：用浏览器打开 开发者工具（F12 或右键 → 检查）看 console 报错。

⚡ 第 3 轮：场景 3-4（道具 + 计时）（30 分钟）

继续完善卡丁车游戏：
1. 每 5 秒 在跑道某处生成一个 黄色圆圈"加速道具"
2. 吃到后，右上角显示 "⚡ 加速 3 秒"，我的卡丁车移动速度 × 2
3. 屏幕左上角显示倒计时 60 → 0，到 0 时自动显示 "🎉 WIN!"
4. 撞到障碍不光是扣血，短暂减速 0.5 秒作为反馈

🏁 第 4 轮：场景 5 + 调样（25 分钟）

最后一步，让游戏更"卡丁车"：
1. 把黄色方块换成 赛车的 emoji 🚗（用 canvas drawImage + emoji 文字）
2. 跑道上加 虚线车道线（两条白色虚线，像真实公路）
3. 障碍物旁加速度线（装饰游戏感）
4. 把 GAME OVER 改成"🏁 撞车啦！再来一局？"
5. 加 背景音乐（用 Web Audio API 合成一段，不用下载文件）

📸 提交内容：

• ✅ 4 轮迭代的提示词（保存为 prompts.txt）
• ✅ 4 张截图（每轮跑通后截 1 张）
• ✅ index.html 完整文件（zip）
• ✅ 150 字心得：4 轮迭代哪轮最难？为什么？AI 哪次让你最惊喜？

💡 高手提示：

• ⏱ 经常 commit！Trae 自带 Git，每轮跑通就 commit 一次
• 🪟 一次只让 AI 改一个功能，别贪多
• 🔄 报错不用慌，把整段报错贴给 AI："这个错怎么修"