德语单词宾果游戏 (Deutsches Wort-Bingo)

一个帮助德语初学者学习基础词汇的互动游戏。通过有趣的宾果游戏形式，让学习德语单词变得更加轻松愉快。

游戏特点

• 🎯 简单直观的游戏界面
• 🔊 德语单词发音功能
• 📱 响应式设计，支持各种设备
• 🎨 现代化的UI设计
• 🎮 互动性强，适合初学者
• 🌐 纯前端实现，无需后端支持
• ⚙️ 智能单词选择系统
• 🎲 可控的游戏难度

技术实现

前端技术栈

• HTML5
• CSS3 (使用现代特性如Flexbox、Grid、渐变等)
• JavaScript (ES6+)
• Web Speech API (语音合成)

主要功能模块

1. 游戏核心逻辑

   • 智能单词选择系统（固定单词池）
   • 游戏状态管理
   • 胜利条件检查
   • 用户交互处理
   • 模态框交互系统

2. 语音合成系统

   • 使用Web Speech API
   • 支持德语语音
   • 可调节语速和音调
   • 自动语音初始化

3. 响应式设计

   • 桌面端优化 (>768px)
   • 平板设备适配 (480px-768px)
   • 移动设备适配 (<480px)
   • 自适应模态框

4. 用户界面组件

   • Bingo卡片（5个单词）
   • 控制面板
   • 单词显示区（带悬停效果）
   • 游戏说明（模态框形式）
   • 胜利提示（带动画效果）
   • 设置按钮（带动画效果）

游戏玩法

1. 开始游戏

   • 打开游戏页面，系统会自动生成一张包含5个德语单词的Bingo卡片
   • 系统会同时生成10个额外单词作为当前轮次的单词池
   • 点击"Wort ziehen"（抽取单词）按钮开始游戏

2. 游戏进行

   • 系统会从当前轮次的单词池（5个卡片单词 + 10个额外单词）中随机抽取一个单词并朗读
   • 如果抽到的单词在你的卡片上，点击对应的格子进行标记
   • 标记的格子会变成黄色，并显示一个勾号
   • 可以通过点击齿轮按钮(⚙️)查看详细的游戏说明

3. 获胜条件

   • 当你成功标记卡片上的所有单词时，游戏胜利
   • 系统会显示胜利消息并播放胜利音效
   • 点击"Neue Karte"（新卡片）按钮可以开始新的游戏

4. 游戏说明

   • 点击游戏说明区域右上角的齿轮按钮(⚙️)打开详细说明
   • 说明内容包括：游戏规则、部署指南和词汇列表
   • 可以通过点击关闭按钮、点击外部区域或按ESC键关闭说明

词汇库

游戏包含A1级别的德语基础词汇，涵盖以下类别：

• 动物（如：Hund, Katze）
• 日常用品（如：Haus, Buch）
• 家庭成员（如：Mutter, Vater）
• 自然（如：Sonne, Mond）
• 颜色（如：Rot, Blau）
• 数字（如：Eins, Zwei）

改进建议

1. 功能扩展

   • 添加更多词汇类别
   • 实现难度级别选择
   • 添加计分系统
   • 支持多人游戏模式
   • 添加单词释义和例句

2. 技术优化

   • 添加本地存储保存游戏进度
   • 优化语音合成性能
   • 添加更多动画效果
   • 实现离线支持
   • 添加多语言界面

3. 用户体验

   • 添加游戏教程
   • 优化移动端操作
   • 添加音效设置
   • 实现自定义主题
   • 添加成就系统

部署说明

1. 本地运行

   • 直接打开HTML文件即可在浏览器中运行
   • 确保浏览器支持Web Speech API
   • 建议使用现代浏览器（Chrome、Firefox、Safari等）

2. 在线部署

   • 支持部署到任何静态网站托管服务
   • 推荐使用GitHub Pages或Vercel
   • 无需特殊配置，直接上传文件即可

贡献指南

欢迎提交Issue和Pull Request来帮助改进游戏。主要改进方向：

1. 添加新的词汇
2. 优化游戏逻辑
3. 改进用户界面
4. 添加新功能
5. 修复bug

许可证

MIT License - 详见LICENSE文件

作者

[Katanad]

致谢

• 感谢所有测试和提供反馈的用户
• 感谢开源社区提供的技术支持
• 特别感谢德语学习者的宝贵建议