/ SUBMIT · DAY 5
提交 T02: 卡丁车竞速(Trae IDE 进阶)
D5
DAY 5 · 2026-07-25 · AI 图像风格 / 3D 打印准备 / Arduino 编程入门
/ 全部题目
图像生成 + 3D 打印 + 编程准备
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 大功能 + 调试 + 调样式
💡 提示:每题可分别提交,互不影响。已登录的账号会自动记录到所有提交。