0代码AI开发软件之《金山银山打字通》

如果做一个练习打字的html网页页面，帮我构思一些有趣的互动功能。

用html做一个打字游戏，《金山银山绿水青山打字通》，封面预留一个整屏幕的背景画面给我一个路径我按文件名放进去做首页欢迎页面，点击这个图片就进入打字游戏。这个图片我自己来做，你告诉我放在什么路径就行。在欢迎页面上有四种模式可以选择：1、游戏模式2、诗词模式3、歌词模式4、钢琴模式1、游戏模式：打地鼠，上面显示一行显示字母，下面是虚拟键盘按键，每个要打的按键上面冒出一个像素画的小土拨鼠，土拨鼠要很清晰。每次按对了就有一个木制的锤子敲打土拨鼠脑袋。打中冒星星。每个按键有 **粒子爆炸效果**。错误按键有 **抖动/红色闪烁**土拨鼠捂嘴在旁边偷笑。（打字的内容可以有一个复制粘贴的框，录入需要练习的文字段落。）2、诗词模式：录入汉字诗词的拼音即可，以唐诗三百首的内容，选择10首最有名的做备选。3、歌词模式：录入汉字歌词的拼音即可，默认为《我爱北京天安门》的歌词。（打字的内容可以有一个复制粘贴的框，录入需要练习的文字段落。）打字的时候，用midi音乐播放我爱北京天安门的旋律。另外再备选5首爱国歌曲，并带有MIDI音乐。4、钢琴模式：炫舞音乐，有钢琴midi声音发出，midi音乐用卡农的曲调，字母和音乐不用对应关系，只要按对字母就行。字母从屏幕顶部往下掉，有闪光通道的效果，下面是一排钢琴按键。每个按键对应着正确的字母，打对了的话发光通道就闪亮，按住的时候对应的字母通道发亮，不按的通道都不亮也不发声。只有按住的通道发光发声，连续按就会播放出卡农的midi旋律。（打字的内容可以有一个复制粘贴的框，录入需要练习的文字段落。）## 🎮 打字练习 — 互动功能构思### 1️⃣ 核心玩法| 模式 | 说明 ||------|------|| **🎯 关卡模式** | 从易到难：单词 → 短语 → 长句 → 代码片段 → 乱序键盘位置 || **⚡ 限时挑战** | 30s / 60s / 120s 倒计时，打完看 WPM 和正确率排名 || **📖 文章模式** | 选一篇短文/新闻/歌词，边打字边阅读 || **🎵 歌词跟打** | 显示歌词，跟着节奏打，打完了自动切下一句 |**🎨 视觉反馈**- 每个按键有 **粒子爆炸效果**（打对了撒花 🎉）- 错误按键有 **抖动/红色闪烁**- 正确率实时显示：**绿色进度条** 随准确率伸缩- WPM 计数器像跑分一样跳数字**🏆 成就系统**| 成就 | 解锁条件 ||------|---------|| 🥚 新手上路 | 打完第一篇文章 || ⚡ 闪电手 | WPM > 80 || 🎯 百发百中 | 正确率 100% 完成一关 || 🔥 连击大师 | 连续正确 50 个词 || 💀 不死鸟 | 打怪模式无伤通关 || 🤖 码农之魂 | 打完一段代码片段 |**📊 数据追踪**- 历史 WPM 曲线图（用 Canvas 画折线图）- 常见打错的字母统计（红色热力图）- 每日 streak（连续打卡天数）### 3️⃣ 实用小功能| 功能 | 说明 ||------|------|| 🔄 实时预览 | 打到的字自动高亮，下一个字有光标指示 || 🔊 键盘音效 | 打字有机械键盘声（Cherry 青轴/红轴可选），有midi音乐的不发这个声|| 🎚️ 难度调节 | 单词长度、速度、是否显示键盘布局 || 📋 自定义文本 | 粘贴自己的内容来练习 || 🌙 深色模式 | 护眼主题 |### 4️⃣ 技术实现要点```├── HTML 结构│   ├── 打字区域（当前句子 + 光标 + 预览）│   ├── 状态栏（WPM / 正确率 / 时间 / combo）│   └── 模式切换 / 设置面板├── CSS│   ├── 打字动画（逐字高亮、错误闪烁）│   ├── 粒子特效（Canvas 或 CSS animation）│   └── 深色/浅色主题└── JS    ├── 打字引擎（键盘事件 → 匹配逻辑 → 光标移动）    ├── 数据统计（localStorage 存历史成绩）    ├── 音效引擎（Web Audio API 生成键盘声）    └── 词库管理（内置 + 自定义）