t【标签】生活娱乐
【标题】生活娱乐 | 垃圾分类从我做起 - 趣味垃圾分类游戏
【正文】
1. Demo 简介
- 是什么：一款基于 React + TypeScript 开发的趣味垃圾分类网页游戏，通过多种游戏模式帮助用户学习和巩固垃圾分类知识。
- 面向谁：面向所有年龄段用户，特别适合中小学生进行垃圾分类知识学习，以及社区居民进行日常垃圾分类练习。
- 主要功能：
经典模式
- 物品从顶部掉落，玩家需要在物品落到底部前点击正确的垃圾桶进行分类
- 支持计时计分，连续正确分类获得连击奖励
学习模式
- 展示各类物品的分类知识
- 包含可回收物、有害垃圾、厨余垃圾、其他垃圾四大类。分错会提示正确答案
数独模式
- 4x4数独玩法，每行每列每个2x2宫格都需要包含4种不同类型的物品
- 支持两种操作方式：点击空格选中再点击物品，或点击物品再点击空格
- 填满后自动验证规则，显示完成时间
2. Demo 创作思路
- 灵感来源：随着垃圾分类政策的推行，垃圾分类已成为每个人的日常必修课。但很多人对具体物品的分类仍存在困惑，希望通过游戏化的方式让垃圾分类学习变得更有趣。
- 想解决的问题：用户对垃圾分类知识掌握不牢固，特别是一些易混淆的物品分类；传统的学习方式枯燥乏味，难以坚持。
- 为什么做这个方向：游戏化学习是最有效的学习方式之一，通过趣味游戏可以让用户在娱乐中掌握垃圾分类知识，同时培养环保意识。
3. Demo 体验地址
部署体验链接：http://www.fenyfen.cn/
4. TRAE 实践过程
开发关键步骤截图说明，每个截图下的sessionID是截图的对应的sessionID
.2187354540086332:25130c1febd62cc24fc2137e58f17920_6a392444d1f389f5cf9f5f12.6a39276fd1f389f5cf9f5f4f.6a39276e8ee33b7e189e284b:Trae CN.T(2026/6/22 20:15:43)
.2187354540086332:6ce08fb1fc6c896defa49adf73a127ea_6a392444d1f389f5cf9f5f12.6a392ab9d1f389f5cf9f5f6b.6a392ab88ee33b7e189e284c:Trae CN.T(2026/6/22 20:29:45)
.2187354540086332:9922901a9bd58f85447f92e841d9da3b_6a392444d1f389f5cf9f5f12.6a3d266bdd4f3c8ad52c8370.6a3d266b018e90ce301e54a0:Trae CN.T(2026/6/25 21:00:27)
.2187354540086332:824e450479dc921cf630586e8581ac6a_6a392444d1f389f5cf9f5f12.6a3d2830dd4f3c8ad52c83a2.6a3d282f018e90ce301e54a1:Trae CN.T(2026/6/25 21:08:00)
.2187354540086332:a2bca3bdf113afd215ed0b150e77c428_6a392444d1f389f5cf9f5f12.6a3fa12c47ae09e42186606c.6a3fa12b0a083ab48c172ca2:Trae CN.T(2026/6/27 18:08:44)
.2187354540086332:672e87fb18470aa5d55494deea4a62b3_6a392444d1f389f5cf9f5f12.6a3fa49847ae09e4218660a3.6a3fa4970a083ab48c172ca3:Trae CN.T(2026/6/27 18:23:20)
.2187354540086332:cd5c94b18ca5b75fcd857bf0d491c8c6_6a392444d1f389f5cf9f5f12.6a3fa7d547ae09e4218660ea.6a3fa7d50a083ab48c172ca7:Trae CN.T(2026/6/27 18:37:09)
.2187354540086332:4f7853a12ccdc7cb678f828e710331ea_6a392444d1f389f5cf9f5f12.6a3932cdd1f389f5cf9f617c.6a3932cb8ee33b7e189e284d:Trae CN.T(2026/6/22 21:04:13)
.2187354540086332:83b4be6034febd8e39f3ab1fd82f1914_6a392444d1f389f5cf9f5f12.6a393e43d1f389f5cf9f62b6.6a393e428ee33b7e189e2857:Trae CN.T(2026/6/22 21:53:07)
.2187354540086332:19341e427d45613ae436cc00e80f8780_6a392444d1f389f5cf9f5f12.6a3fc80b47ae09e421866118.6a3fc80b0a083ab48c172ca9:Trae CN.T(2026/6/27 20:54:35)
.2187354540086332:ce94fa4eceae959d3e8369eaf881d810_6a392444d1f389f5cf9f5f12.6a3fdd5e47ae09e421866201.6a3fdd5e0a083ab48c172cb0:Trae CN.T(2026/6/27 22:25:34)
.2187354540086332:b2e030912d539bbd754013bd62c18c6d_6a392444d1f389f5cf9f5f12.6a4124732d7ed51e1969fea7.6a412473e09c9444127e1d18:Trae CN.T(2026/6/28 21:41:07)
.2187354540086332:5642fec9a320df75af9da0e8fad26c93_6a392444d1f389f5cf9f5f12.6a4513b58e17ded9d250c84c.6a4513b5e8f3b014d5b35f19:Trae CN.T(2026/7/1 21:18:45)
报名通过帖链接： 【生活娱乐】小小分类大大智慧 —— 一款边解压边学会垃圾分类的轻量小游戏