关灯・许愿・吹蜡烛(1:1 复刻 + 三项增强)
用途
用户要"关灯 → 许愿 → 对着麦克风吹气 → 蜡烛依次熄灭 → 玩具礼物迸发"的网页交互时,交付 assets/template.html 复制品 index.html(按寿星姓名替换 BIRTH_NAME 后交付)。
页面能力:真实麦克风气流检测(区分吹气与说话/音乐)、三根蜡烛按风力依次熄灭、火焰被气流实时吹弯、关灯换暗场底图、浮尘与星愿粒子、愿望回显、BGM 与静音开关、终场黑幕 + 玩具礼物物理弹跳 + 终场「生日快乐」文案 + 音效。
固定部分(严格复刻,禁止改动)
- 火焰位置:烛芯坐标(左
37.19%/ 中50.70%/ 右63.67%,bottom66.9%)、四层火焰结构(halo/outer/mid/core)、@property注册、气流吹弯参数(tilt v38、shear v16、stretch 1+v*0.6、shudder),全部以模板为准,禁止重新调参。 - 图片素材:模板引用 CDN 远程地址(日间底图
https://aka.doubaocdn.com/s/1EvjUfgcEn、夜间底图https://aka.doubaocdn.com/s/HT4LYQVLv6、BGMhttps://aka.doubaocdn.com/s/pd3CfrJwgf、终场音效https://aka.doubaocdn.com/s/2cxQXD6wfd、玩具图TOYS数组 8 个地址),原样保留,禁止替换。 - 交互与文案:点烛节奏(760/1040/1290ms)、熄灭阈值(.34/.62/1.0)、粒子系统、四步文案(把灯关了吧→许个愿→对着话筒吹→灭了)与终场文案,全部以模板为准。
设计内改动点(本技能已内置,生成时禁止再改)
- 姓名祝福:模板脚本顶部
var BIRTH_NAME="付鑫鑫";(当前内置示例)。生成页面时替换引号内为实际寿星姓名;首页与终场(尾页)的「生日快乐」上方都会显示「祝+姓名」;留空则两处祝福行均隐藏。交付校验时允许且仅允许这一处与模板不同。 - 吹气检测(已修复):
getUserMedia开启autoGainControl(补足弱麦增益),关闭回声消除与降噪(避免降噪把吹气声当环境噪声掐掉);检测改为低频 40–420Hz(主体)+ 中频 420–2400Hz + 高频 2400–7600Hz 三频段,以「低频抬升 + 中频或高频同步抬升」确认吹气(吹气是宽带噪声,各频段同时抬升),替代旧版lo<hi+8的一刀切误杀。说话/音乐被校准进底噪基线,不影响检测。 - 终场蹦跳礼物:三根蜡烛全灭后 2.6s 落黑幕(
.curtain),黑幕上玩具礼物(.party+ 24 件物理弹跳玩具,底部持续喷涌)迸发,同时显示终场「生日快乐」大标题、愿望回显与「再来一次」按钮,并播放终场音效;点「再来一次」清理终场并回到首页。
交付流程
- 复制
assets/template.html为任务目录下的index.html。 - 按寿星姓名替换
index.html脚本顶部BIRTH_NAME引号内的姓名。 - 用
diff校验:除BIRTH_NAME一行外与模板完全一致。 - 交付时告知用户:必须发布成 https 或 localhost 访问,
file://下麦克风与音频自动播放会被浏览器拦截(页面会自动降级为"按住代替吹气")。 - 用户索要在线链接时,引导其在预览界面点「发布」按钮,不代为发布。
CDN 失效时的兜底(仅此场景可替换资源)
assets/media/ 下有备份:scene_day.jpg(日间底图)、scene_night.jpg(夜间底图)、bgm.wav(BGM)。
仅当上述 CDN 链接失效时:把对应备份上传到可用 CDN,用新 URL 只替换 template.html 里对应那一行引用,其余内容一律不动(终场音效与玩具图同理,替换对应 URL 行)。
验证要点
- 复制后与模板逐字节一致(
diff -q无差异,BIRTH_NAME行除外)。 - 页面运行时控制台无报错;首页与终场(尾页)「生日快乐」上方均显示「祝+姓名」。
- 关灯后三根蜡烛依次点亮;在 https/localhost 下对着麦克风吹气能吹弯火苗并依次熄灭(风力计百分比上升);说话不应误触。
- 三根全灭后黑幕落下、玩具礼物弹跳迸发、终场「生日快乐」与愿望回显出现、音效播放;点「再来一次」回到首页且终场层完全清理。
- 需要浏览器实测时,用干净标签页验证,勿复用旧会话。