/ SUBMIT · DAY 5
提交今日作业
D5
DAY 5 · 2026-07-25 · AI 图像风格 / 3D 打印准备 / Arduino 编程入门
图像生成 + 3D 打印 + 编程准备
T01
猜数字游戏(Trae IDE 入门)
text ★☆☆用 Trae IDE + AI 让豆包写一个完整的网页游戏
查看完整题目 / 参考 / 提示词
今天我们要用 Trae IDE(字节跳动出的 AI 原生代码编辑器)配合 AI 助手,让你的第一个网页游戏上线。
不需要你写一行代码 — 全部让 AI 写,你负责:提需求 → 试玩 → 改三处 → 截图。
🛠 Trae IDE 启动(5 分钟)
- 下载安装:trae.ai(免费)
- 新建项目 → 选 HTML 项目 → 选个文件夹
- 点左边栏的 "AI 对话"(💬 图标)
- 右侧 选模型:GLM 5.2或 DeepSeek
- 切换 "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 处哪处最难?
猜不对就问问豆包,它会教你改
T02
卡丁车竞速(Trae IDE 进阶)
text ★★★用 Trae IDE + AI 做一个完整的卡丁车竞速游戏
查看完整题目 / 参考 / 提示词
延续 Day 1-4 的卡丁车主题,今天用 Trae IDE 做一个真实的卡丁车竞速游戏。
这次是大挑战:游戏有 5 大功能,需要你用 4 轮迭代让 AI 帮你完成。
🎯 拆需求:5 大功能
- 🏎 玩家小车:可以用方向键控制 ↔ ↑↓
- 🛣 跑道:黑色背景 + 路面 + 双道线
- 🟥 障碍物:随机生成红色方块 / 石头
- ⚡ 加速道具:黄色圆圈,吃到加速 3 秒
- ⏱ 计时 + 计分 + 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:"这个错怎么修"
大挑战 = 4 轮迭代 + 5 大功能 + 调试 + 调样式
T03
3D打印
text ★★★想要3D打印自己设计的东西,交到这里。
查看完整题目 / 参考 / 提示词
💡 提示:每题可分别提交,互不影响。已登录的账号会自动记录到所有提交。