第七课：创客马拉松

你是一个资深游戏程序员。请帮我用HTML+CSS+JS单文件写一个文字冒险游戏。
1. 界面：暗黑赛博朋克风，上方是文字剧情框，下方是2个选项按钮。
2. 逻辑：写一个简单的剧情数据结构（JSON格式）。场景1是“你醒来在一个实验室，门被锁了”，选项是“强行踹门”和“寻找密码”。选择不同会进入不同的场景节点。
请给我基础框架代码。

非常好。现在增加游戏复杂度：
1. 增加顶部状态栏，显示【生命值(HP)：100】和【背包：空】。
2. 剧情影响状态：修改剧情数据，如果玩家选择“踹门”，HP减少20并提示受伤；如果选择“搜索桌子”，背包里会多出一把“生锈的钥匙”。
3. 铁律：必须判断玩家背包里是否有对应物品才能解锁特定选项。
请在原基础上修改代码。

代码逻辑正常。现在做最后的游戏化包装：
1. 剧情文字不要一次性出现，要用JS实现“打字机特效”（一个字一个字蹦出来）。
2. 如果玩家扣血（HP减少），屏幕背景要闪烁红光，并用Web Audio API播放一声低沉的受伤音效。
3. 如果 HP 归零，弹出 Game Over 界面并提供重新开始按钮。

你是一个前端工程师。请帮我写一个单文件的网页倒计时工具。
1. 界面中间有巨大的时间显示“25:00”。
2. 下方有“开始专注”和“放弃”两个按钮。
3. 逻辑：点击开始后，倒计时开始走动，期间按钮变成“放弃专注”。如果时间归零，弹窗提示“专注完成”。
界面请使用元气可爱的多巴胺配色。

现在我们要把它变成游戏：
1. 在时间上方，用 SVG 画一个基础的“史莱姆”宠物。
2. 增加等级系统：显示【Level: 1 | EXP: 0/100】。
3. 核心逻辑：如果25分钟倒计时正常结束，EXP增加50点；如果玩家中途点击“放弃”，EXP扣除10点。EXP满了自动升1级，并且 SVG 宠物的颜色要发生变化（进化）。

最后一步，完善产品体验：
1. 使用 LocalStorage，让网页刷新后依然记住宠物现在的等级和经验值！
2. 当倒计时完成时，使用 Canvas 在屏幕上生成满屏掉落“知识星星”的特效，并用原生代码合成清脆的升级音效。
请保持所有既有逻辑不被破坏。

帮我写一个点名器网页。
1. 在 JS 里预设一个包含 10 个学生名字的数组。
2. 页面中间放一张写着“神秘卡牌”的矩形卡片。
3. 下方放一个“单抽”按钮。点击后，从数组里随机选一个名字，替换掉卡片上的文字。
要求使用深色科技感界面布局。

逻辑没问题，现在增加复杂视觉和机制：
1. 使用 CSS 的 `transform: rotateY` 属性，让点击按钮后，卡牌在 3D 空间翻转一圈，然后再显示名字，制造抽卡的悬念感。
2. 增加“不重复抽取”逻辑：抽过的人存入已抽列表，本次不再被抽到。
3. 界面侧边增加一个“今日欧皇记录”列表，记录刚才抽到的所有人。

最后注入灵魂：
1. 在学生名单里，挑 2 个人设置为“稀有 SSR”角色。
2. 如果抽到了普通人，卡牌翻面是蓝色边框；如果抽到了 SSR，卡牌翻面要变成耀眼的金色渐变光效，屏幕震动，并用纯代码合成极具气势的登场音效！
3. 请检查所有功能，输出完美运行的代码。