汉字拼贴：偏旁配对挑战 - 知达AI助教 | 教育人工智能案例 | 教育人工智能社区

用HTML写一个汉字拼贴小游戏，左右偏旁分两排，先点击左边的一个偏旁，再点击后边的一个视为进行配对，配对正确变色加1分，错误则两个偏旁都返回原位，实时显示分数，总需要组成10个汉字，可重复游戏。点击开始游戏开始，每次开始时打乱顺序，倒计时30秒，倒计时结束进行反馈，能够反复游戏。
以下是一个完整的、可直接运行的汉字拼贴小游戏 HTML 页面。它满足所有需求：

左右两排偏旁（左为部首/偏旁，右为剩余部件）

点击左偏旁 → 再点击右部件 → 自动配对验证（基于预设10个标准汉字）

正确：高亮+1分；错误：两个元素回退原位

实时显示分数与倒计时（30秒）

“开始游戏”按钮：重置分数、打乱左右偏旁顺序、启动倒计时、清空已配对状态

支持无限次重复游戏

语义化结构、响应式布局、简洁美观的CSS样式

所有逻辑纯前端实现（无外部依赖）

✅ 说明：本游戏基于常见汉字构形规律，选取10个由“左偏旁 + 右部件”构成的标准左右结构汉字（如：河、妈、林、清、明、红、花、草、跑、跳），确保偏旁与部件一一对应且无歧义。

✅ 完整 HTML 文件（复制保存为 .html 后双击打开即可运行）：

代码生成中...

知达任务回放中

汉字拼贴：偏旁配对挑战

代码

预览

77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
    }
    .row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      padding: 15px;
      background: white;
      border-radius: 10px;
      margin-bottom: 25px;
      box-shadow: 0 2px 6px rgba(0
          ,0,0,0.05);
      justify-content: center;
    }
    .item {
      width: 72px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      font-weight: bold;
      background: #e3f2fd;
      border: 2px solid #bbdefb;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s ease;
      box-shadow: 0 2px 4px rgba(0
          ,0,0,0.05);
    }
    .item:hover {
      backgr
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX