幼儿垃圾分类小程序产品系统

该项目是一款面向幼儿教育领域的垃圾分类互动游戏，适用于幼儿园教学、家庭教育等场景。通过游戏化方式帮助 3-6 岁儿童认识垃圾分类的基本概念，培养环保意识，符合当前垃圾分类政策推广及幼儿启蒙教育的需求。可作为幼儿园环保课程的辅助工具，或家长引导孩子学习垃圾分类的互动玩具。

多关卡渐进式学习
第一关（配对垃圾桶）：通过拖拽标签匹配不同颜色的垃圾桶（红、绿、蓝、灰）与对应垃圾类型（有害垃圾、厨余垃圾、可回收物、其他垃圾），帮助幼儿建立颜色与垃圾类型的关联认知。
第二关（垃圾分类实践）：随机展示具体垃圾物品（如苹果核、废电池等），需拖拽至对应类型的垃圾桶，检验学习成果，强化分类记忆。
互动反馈机制
操作反馈：拖拽过程中物品有缩放效果，正确分类时触发弹跳动画并播放悦耳音效，错误时物品左右抖动并播放提示音效。
进度追踪：第二关通过进度条显示当前完成比例，通关后展示最终得分，增强成就感。
适配幼儿认知特点
视觉设计：采用鲜明色彩、卡通风格界面，垃圾物品以图片形式呈现（如苹果核、塑料瓶），符合幼儿形象思维特征。
操作简化：支持鼠标拖拽（电脑）和触摸拖拽（平板 / 手机），交互流程简单直观，无需复杂操作。
完整游戏流程
包含开始界面、关卡切换、通关动画及重新开始功能，形成闭环体验，适合幼儿独立操作。

技术栈
前端：HTML5 + CSS3 + JavaScript
交互实现：原生 DOM 操作、拖拽 API（dragstart/dragover/drop）、CSS 动画（@keyframes）
适配方案：使用clamp()实现响应式字体，flex布局适配不同屏幕尺寸，touch-action: manipulation优化触摸设备体验。
核心模块设计
界面管理：通过screen类和hidden类控制多界面切换（开始页 / 关卡页 / 通关页），使用z-index层级管理避免元素冲突。
拖拽逻辑：
第一关：建立标签与垃圾桶的映射关系（level1Matches对象），通过dataTransfer传递标签 ID，验证匹配结果。
第二关：随机打乱垃圾数据（trashData），动态生成垃圾元素，通过dataset存储垃圾类型，与垃圾桶类型比对判断分类正确性。
反馈系统：通过 CSS 类（correct/incorrect）触发动画，使用Web Audio API生成简单音效（正确为高音阶，错误为低音阶）。
进度管理：通过gameState对象记录游戏状态（当前关卡、得分、进度索引），实时更新进度条宽度。
数据结构
垃圾数据（trashData）：数组存储各类垃圾的类型（type）、图片（emoji）和名称（name），按厨余 / 有害 / 可回收 / 其他分类。
游戏状态（gameState）：记录当前屏幕、关卡完成情况、得分等关键信息，实现状态持久化管理。
用户体验优化
防误触设计：按钮点击有缩放反馈，拖拽元素有视觉区分（dragging类）。
动画过渡：界面切换、元素移动均添加平滑过渡效果，避免突兀跳转。
适配多设备：通过vw/vh和弹性布局，确保在手机、平板、电脑上均有良好显示效果。