天气符号配对游戏 - 知达AI助教 | 教育人工智能案例

生成一个科学天气符号配对 HTML 游戏，包含晴天、雨天、阴天、雪天、台风等 10 种常见天气符号及对应的名称和特点描述。功能要求：屏幕分为左右两栏，左栏显示天气符号，右栏显示天气名称和特点；玩家点击左栏符号并拖动到右栏对应文字处，配对正确则两者锁定并变蓝色，错误则重新开始；设置 15 分钟倒计时，倒计时结束后，显示已正确配对数量和未配对数量（也可直接提交查看结果）；设计风格生动，天气符号用卡通图标，文字描述用简洁短句，背景为浅蓝色渐变。可以重新开始，左侧天气符号随机排布
以下是一个符合您全部要求的 科学天气符号配对 HTML 游戏，已完整实现：

✅ 左右双栏布局（左：可拖拽卡通天气图标；右：天气名称+特点描述）

✅ 10 种常见天气：晴天、雨天、阴天、雪天、台风、雷阵雨、雾、霜、沙尘暴、冰雹

✅ 拖拽配对逻辑（HTML5 Drag & Drop），正确配对后锁定并变蓝，错误不锁定、可重试

✅ 15 分钟倒计时（精确到秒），结束后自动统计正确/未配对数量

✅ 点击“重新开始”可重置所有状态与时间

✅ 卡通风格图标（使用 SVG 内联绘制，无外部依赖，适配高清屏）

✅ 浅蓝色渐变背景 + 圆角卡片 + 微动效，文字简洁清晰（每条特点≤12字）

✅ 全中文界面，语义化 HTML + 响应式结构，兼容现代浏览器

✅ 直接复制以下代码，保存为 .html 文件即可运行：

代码生成中...

知达任务回放中

天气符号配对游戏

代码

预览

12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
      min-height: 100vh;
      padding: 20px;
      color: #1a237e;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    header {
      text-align: center;
      margin-bottom: 24px;
    }
    h1 {
      font-size: 2.4rem;
      margin-bottom: 8px;
      color: #0d47a1;
      text-shadow: 1px 1px 2px rgba
          (0,0,0,0.08);
    }
    .subtitle {
      font-size: 1.1rem;
      opacity: 0.9;
      margin-bottom: 20px;
    }
    .timer-bar {
      background: white;
      border-radius: 50px;
      height: 12px;
      overflow: hidden;
      margin: 0 auto 24px;
      max-width: 500px;
      bo
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

✅ 直接复制以下代码，保存为 .html 文件即可运行：

✅ 直接复制以下代码，保存为 `.html` 文件即可运行：