初赛专区 · Demo 作品帖（复制到初赛专区发新帖）
发帖位置：【大赛初赛专区】 - TRAE 官方中文社区 （初赛专区）
标题：【学习工作】EXAM SNIPER 试卷狙击手｜用 TRAE 把讲题做成 FPS
标签：学习工作
1. Demo 简介
- 是什么：一个纯前端单文件 HTML 应用（EXAM SNIPER｜试卷狙击手），把「AI 讲题」包装成军事狙击体验，无需后端、打开即用。
- 面向谁：中学生、备考党、家长——任何遇到不会的题、需要快速搞懂的人。
- 主要功能（配图见帖内截图）：
- 狙击镜框选：上传试卷后打开狙击镜，十字准星锁定单题，精准解析，不是整页 OCR 糊成一团；
- 武器模式：栓动狙击枪 / 突击步枪 / DMR，不同枪声 + 后坐力 + 弹壳动画，让学习像打游戏；
- 命中报告：解析步骤、涉及知识点、易错点（删除线标注错误做法 + 加粗标注正确做法），还能把单词一键发音；
- 题库背包：解析过的题目自动归档，10 科分类，随时回看。
2. Demo 创作思路
- 灵感来源：学生刷题时的挫败感——遇到不会的题，翻教辅慢、搜答案乱。我想把「求解一道题」包装成一次狙击行动：框选 = 瞄准，开火 = 调用 AI，命中报告 = 完整解析。
- 想解决的问题：讲题工具要么太重（要装 App、要登录），要么太糙（整页识别、答案不准）。狙击镜框选解决「精准定位单题」，单文件 HTML 解决「零门槛打开即用」。
- 为什么做这个方向：学习工作赛道最怕「伪需求」。讲题是初高中生的真实高频痛点，而「游戏化」能显著提升坚持意愿——把枯燥的错题本变成有反馈、有成就感的射击游戏，是我判断里最值得做的取舍。
3. Demo 体验地址
-
ZIP 打包下载（推荐，已上传社区附件），解压即用，不依赖任何本地服务
-
首次使用必读：打开后请先点右侧齿轮 
，填写你自己的 API Base URL / 模型名 / API Key（本地保存于浏览器 localStorage，不碰服务器）。未填 API Key 时无法解析题目，这不是 bug，是安全设计——源码无任何硬编码密钥。 -
使用流程：填好 Key → 上传试卷 → 狙击镜框选题目 → 开火 → 生成「命中报告」（解析步骤 + 知识点 + 易错点 + 英语词汇拓展）。
-
注：全部数据仅在本机处理，不上传任何用户内容，符合学生群体隐私要求。
4. TRAE 实践过程
本作品全程使用 TRAE Work 从零搭建，关键开发对话保留如下：
- 开发关键步骤截图（≥3 张）：
- 主题改造：用 TRAE Work 将页面改为三角洲军事狙击风格——暗绿HUD界面、狙击镜覆盖层、十字准星、武器模式交互流程；（2024-07-04 13:54）
- 狙击镜交互：圆形取景器实现（径向渐变遮罩 + 镜内光环 + 镜片反光135度光晕）+ 完整SVG狙击枪轮廓侧视图（枪托/枪身/弹匣/消音器/瞄镜）；（2024-07-04 14:23）
- 细节打磨：取景器改为完美正圆（min(62vw,62vh)）+ HUD数字绝对固定（pointer-events:none，不响应鼠标事件）。（2024-07-04 15:09）
以上截图均来自 TRAE Work 开发对话实录，展示了从视觉层→核心交互→体验优化的完整迭代过程。
关键任务对话 Session ID（≥3 个）：
3317648906266616:8a72a8cfe76f645df028a3bf8dbbe05a_6a47d0825ee0271a36fa5284.6a48a01c3a3d5e015ccac839.6a48a01b3a3d5e015ccac837— 三角洲军事狙击主题改造（视觉层+游戏化交互流程）3317648906266616:58995910675cfc4fe3da4c02552f488d_6a47d0825ee0271a36fa5284.6a48a6d33a3d5e015ccac94b.6a48a6d33a3d5e015ccac949— 圆形狙击镜取景器 + SVG狙击枪轮廓3317648906266616:f996ee98776ff59c015d0c5d2445786e_6a47d0825ee0271a36fa5284.6a48b18c3a3d5e015ccac9c7.6a48b18c3a3d5e015ccac9c5— 取景器完美正圆化 + HUD数字绝对固定
exam-analyzer.zip (3.6 MB)
exam-analyzer-single.html (3.3 MB)
- 附：通过的社区报名帖链接
【学习/教育】试卷狙击手｜用 TRAE 把讲题做成 FPS：框选即开火，解析进背包