海姆立克急救互动H5

请帮我制作一个移动端H5，主题是“海姆立克急救法”，风格温暖感人，适合在微信中打开和分享。 故事线： 小女孩念念的奶奶因吃汤圆噎住，念念不会急救，错过了最佳抢救时间。后来念念学会了海姆立克急救法。某天她思念奶奶闭眼落泪，穿越回到奶奶噎住的那一刻，用海姆立克救回了奶奶。获救后，以念念的视角科普噎食识别、老人易噎食原因、高危食物和日常预防。 技术要求： · HTML5 + CSS3 + JavaScript，移动端竖屏，375×667基准，适配750设计稿 · 支持微信内打开，可加音效（心跳声、汤圆出锅声、舒缓音乐） · 动画用CSS3或GSAP，插画用扁平温暖风 · 主色：暖橙 + 米白 + 深红；标题用手写体，正文用清晰黑体 页面结构（共6屏）： 第1屏 封面：标题《如果再来一次》，副标题“一个关于汤圆、奶奶和海姆立克的故事”，按钮“开始故事”，视觉是暖色厨房剪影和一碗汤圆。 第2屏 悲剧：奶奶吃汤圆噎住，念念手足无措。文案“那天，我不会急救。我失去了奶奶。”点击继续，画面渐暗，泪滴落下转场穿越光效。 第3屏 穿越救人（核心互动）：回到奶奶噎住那一刻，用户分步操作完成海姆立克： · 步骤1：点击“从背后抱住奶奶” · 步骤2：拖动“剪刀”到肚脐上方两横指，正确才可继续 · 步骤3：点击“石头”握拳，拳眼对准位置 · 步骤4：长按“布”包住拳头，向内向上冲击（长按蓄力条） 错误操作（拍背、抠喉、喂水）弹出提示“错误！这样会让异物更深”。成功后奶奶咳出汤圆，两人相拥，心跳声转舒缓。 第4屏 过渡：文案“这一次，我救回了奶奶。但还有很多人，需要知道这些。”按钮“进入急救课堂”。 第5屏 互动答题：5道题，答对显示解析，答错可重试，带进度条和得分。 题目如下： 1. 奶奶突然捂住喉咙、脸色发紫、说不出话，这是什么信号？答案B（完全气道梗阻，需立即海姆立克）。解析：能说话能咳嗽是不完全梗阻，鼓励咳嗽；不能说话不能咳嗽、脸色发紫、双手掐喉是完全梗阻，必须立即海姆立克。 2. 以下哪项不是老人容易噎食的原因？答案D（肺活量变大）。解析：主因是吞咽功能退化、咀嚼能力下降、吃饭太快等。 3. 以下哪种食物对老人噎食风险最高？答案B（汤圆、年糕、果冻）。解析：黏性强、易整块滑入、不易嚼碎；稀饭蒸蛋面条相对安全。 4. 海姆立克急救法冲击的位置在哪里？答案B（肚脐上方两横指）。解析：口诀“剪刀石头布”，剪刀两指放肚脐上方两横指，石头握拳拳眼对准，布包住拳头向内向上冲击。 5. 预防老人噎食，以下做法错误的是？答案C（边看电视边吃饭）。解析：吃饭分心会增加噎食风险，应坐直、专心、小口、慢咽。 第6屏 结尾：得分展示+称号（如“急救小卫士”），高危食物名单和预防要点卡片，按钮“分享给家人”和“再玩一次”。可加“生成海报”功能，把得分和高危食物名单做成图片方便分享家庭群。 关键动效： 穿越时泪滴放大→白光→场景切换；急救成功汤圆飞出、奶奶脸色恢复；答题正确绿色打勾、错误红色抖动。 请生成完整可运行的HTML文件，包含内联CSS和JS，插画可用CSS或SVG实现，不需要外部图片资源。

由 zyh06 发布