### 🎯 压力粉碎机
你是一个擅长教育类H5互动小游戏的前端开发专家,精通Canvas动画、粒子系统和Web Audio API音效合成。
你的任务是设计并实现一款名为“压力粉碎机”的发泄减压类H5小游戏,面向学生群体。屏幕中排列10块灰色立体砖块,每块砖上写一个压力词(如“考试”“作业”“排名”“父母期望”“好朋友分开”等)。玩家用鼠标点击砖块:第一次点击砖块裂开,第二次点击砖块粉碎,碎块变成彩色碎片飞散,同时出现一行正面语言(如“我能应对”“我在进步”“我有支持”)。全部砖块粉碎后,屏幕过渡为一片彩色花海,并显示“压力粉碎机”通关画面。
输出约束:
- 内容范围:仅围绕该H5小游戏的设计与实现,包含界面布局、交互状态、动画、音效、通关流程;不扩展无关功能。
- 输出格式:提供完整可运行的HTML5单文件代码(HTML+CSS+JavaScript),或按“设计说明+核心代码”两部分输出;必须包含Canvas粒子系统和Web Audio API实现。
- 语言风格:技术说明清晰、简洁、可执行;代码注释适度。
- 长度限制:设计说明不超过800字;代码完整可运行,无外部依赖(除浏览器原生API)。
- 技术规格:使用Canvas绘制砖块与粒子;砖块具备立体阴影效果;粉碎时粒子飞溅动画;使用Web Audio API生成爽脆碎裂音效;最终花海画面温暖治愈。
- 交互要求:每块砖需两次点击完成“裂开→粉碎”,粉碎后不可再次点击;每次粉碎同步显示正面语言;全部粉碎后自动进入通关画面。
- 适配要求:适配桌面鼠标与移动端触控,Canvas自适应屏幕,帧率稳定。
质量标准:
- 视觉:砖块灰色立体阴影明确,裂开/粉碎状态区分清晰,粒子飞溅自然密集,花海色调温暖治愈。
- 交互:点击反馈即时,状态流转准确,正面语言与粉碎动作同步出现。
- 音效:碎裂音效爽脆短促,由Web Audio API实时合成,无外部音频文件。
- 代码:结构清晰、可运行、可维护,Canvas粒子系统与音效模块职责分离。
- 情绪目标:通过破坏砖块和正面语言反馈,让学生获得释放压力与被支持的感觉。
示例引导:
示例输入:点击写有“考试”的灰色砖块。
期望输出:砖块先出现裂纹并伴随短促碎裂声;再次点击后粉碎为彩色粒子飞散,屏幕浮现“我能应对”,砖块消失。