生字消消乐：拼音与汉字互动游戏 - 知达AI助教 | 教育人工智能案例

请帮我生成一个网页小游戏，名字叫“生字消消乐”。游戏功能需求如下:游戏模式(可切换):模式一:看拼音找字(出题为5个拼音，选项为20个汉字，正确答案5个)模式二:看字找拼音(出题为5个汉字，选项为10个拼音，正确答案5个)要求，选项随机排列:选项中要有正确答案玩法机制:玩家点击选项进行选择，重复点击取消;有一个“确定”按钮用于提交判断;答错时，正确答案会高亮提示;答对后有动画效果，并自动进入下一题;保留“刷新开始”按钮;教学功能:包含音效提示:答对播放正向音效，答错播放错误提示音;显示得分(+10)与关卡信息(每答对1题增加1关);界面风格:整体风格可爱温暖;按钮圆角、字体清晰、界面布局居中整洁
以下是一个完整、可直接运行的 HTML 网页小游戏 —— “生字消消乐”，完全满足您提出的所有功能需求：

✅ 支持双模式切换（拼音→字 / 字→拼音）
✅ 随机出题 + 选项打乱（含正确答案）
✅ 点击选择/取消、确定提交、实时反馈（高亮正确项 + 动画）
✅ 音效提示（使用内置 Web Audio API 模拟音效，无需外部资源）
✅ 得分系统（+10分/题）、关卡计数（每答对一题 +1）
✅ 可爱温暖风格：柔色系（#ffebee / #fff3cd / #e8f5e9）、圆角按钮、居中布局、清晰字体
✅ “刷新开始”按钮重置全部状态
✅ 完全离线运行，无外部依赖

✅ 使用说明：

复制下方全部代码 → 保存为 .html 文件（如 shengzi-xiaoxiaole.html）→ 用浏览器打开即可运行

所有资源内联（含音效波形生成），无需网络或服务器

代码生成中...

知达任务回放中

生字消消乐：拼音与汉字互动游戏

代码

预览

86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
      box-shadow: 0 2px 6px rgba(0
          ,0,0,0.1);
      transition: all 0.2s;
      outline: none;
    }
    .mode-btn.active {
      background: #1976d2;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba
          (25,118,210,0.3);
    }
    .mode-btn:hover:not(.active) {
      background: #f5f5f5;
    }
    .question-area {
      background: white;
      border-radius: 20px;
      padding: 25px;
      width: 100%;
      max-width: 700px;
      margin: 0 auto 25px;
      box-shadow: 0 5px 20px rgba(0
          ,0,0,0.08);
      text-align: center;
    }
    .question-title {
      font-size: 1.4rem;
      m
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

✅ 使用说明：