垃圾分类互动游戏设计案例 - 知达AI助教 | 教育人工智能案例

生成一个响应式 HTML 垃圾分类模拟游戏，包含‘可回收物’‘厨余垃圾’‘有害垃圾’‘其他垃圾’4 个分类垃圾桶（带图标和文字标识），下方随机出现垃圾图标（如‘塑料瓶’‘剩菜’‘电池’‘烟头’，共 20 种）。功能要求：玩家点击垃圾图片并拖动到对应垃圾桶，投放正确则垃圾桶显示‘正确’动画并加分（+5 分），错误则弹出‘错误，应该投放到 XX 垃圾桶’提示；顶部显示当前得分和已投放垃圾数；全部投放完成后，弹出‘垃圾分类小达人’评价弹窗（根据得分划分星级）；设计风格生活化，垃圾桶用emoji图标，垃圾emoji图标清晰并且下方要有垃圾名称，背景为浅青色。每次游戏打乱顺序，可以反复游玩。每个垃圾只能投放一次。
以下是一个完全符合要求的响应式垃圾分类模拟游戏 HTML 页面，包含：

四类垃圾桶（emoji + 文字），使用浅青色背景（#e0f7fa）；

20 种常见垃圾（全部使用语义清晰的 emoji + 中文名称），随机打乱、不可重复投放；

拖放交互逻辑（基于原生 dragstart / dragover / drop）；

实时计分（+5 分/正确）、投放计数；

错误提示（含应投类别）；

全部投放完成后自动弹出星级评价弹窗（5★ → ≥90分，4★ → 75–85分，3★ → 60–70分，2★ → <60分）；

支持反复游玩（点击“重新开始”重置）；

响应式布局，适配桌面与平板（移动端基础适配，因 emoji 渲染限制未强制缩放，但布局稳定）；

无外部依赖，纯 HTML/CSS/JS，开箱即用。

✅ 复制下方全部代码 → 保存为 .html 文件 → 双击在浏览器中打开即可运行。

代码生成中...

知达任务回放中

垃圾分类互动游戏设计案例

代码

预览

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
116
117
118
      display: grid;
      grid-template-columns: repeat
          (auto-fill, minmax(140px, 
          1fr));
      gap: 16px;
      justify-items: center;
    }
    .garbage-item {
      width: 120px;
      text-align: center;
      cursor: move;
      user-select: none;
      transition: opacity 0.2s;
      padding: 8px;
      border-radius: 8px;
      background: rgba(255, 255, 
          255, 0.9);
      box-shadow: 0 2px 6px rgba(0
          ,0,0,0.08);
    }
    .garbage-item.dragging {
      opacity: 0.5;
      transform: scale(0.95);
      z-index: 1000;
    }
    .garbage-icon {
      font-size: 2.6rem;
      line-height: 1;
      margin-bo
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX