【标签】 社会服务
【标题】 社会服务+ 海啸科普
【正文】
先和大家打个招呼
大家好，我是一名学生，也是 TRAE 的重度用户。
说实话，在做这个 Demo 之前，我从来没有独立完成过一个完整的产品。但这次和 TRAE「配合」下来，我感觉自己像找到了一个永远不会嫌我烦的技术搭档。
整个过程就是「把脑子里的想法一句句讲给它听」：
-
我说"我想要一个海啸连连看游戏"，它就给我生成了完整的游戏框架
-
我说"背景太丑了，换成视频背景"，它就真的把视频集成进去了，还帮我调了排版和配色
-
我说"图标怎么消不掉"，我以为这个bug很难搞，结果它直接帮我定位到data.js里emoji重复的问题，改了一个字符就修好了
-
最让我惊喜的是那一整套视觉规范——我给出详细的色值、圆角、间距参数，它就一丝不苟地全部落地，从首页到游戏页到结算弹窗，风格完全统一。那一刻真的觉得"原来这么简单"。
1. Demo 简介
是什么： 一个基于Web的互动式连连看游戏，打开浏览器即用，免安装。
面向谁： 学生群体（小学至大学）、社区居民、沿海地区居民、对防灾知识感兴趣的公众。
主要功能：
连连看核心玩法
-
BFS路径匹配算法，最多允许两次转弯
-
难度分级系统（简单/中等/困难），格子尺寸自适应
-
180秒倒计时，倒计时结束才结束游戏
-
匹配成功弹出海啸知识卡片，寓教于乐
海啸知识科普
-
20条核心知识卡片，覆盖海啸成因、预警信号、紧急疏散、应急自救
-
匹配成功即时学习，反复游戏加深记忆
-
图标均为海啸主题（
等），强化主题认知
视频背景+纸雕质感UI
-
视频背景保留原色，营造海洋氛围
-
蓝色系梯度配色，统一海洋主题
-
棋盘磨砂玻璃衬底，格子纸雕质感投影
-
时间预警色值（≤30s橙色，≤10s红色闪烁）
2. Demo 创作思路
灵感来源 近年来印尼、日本等地海啸灾害频发，造成重大人员伤亡。然而传统防灾教育形式枯燥乏味——讲座被动听、宣传册懒得看，导致公众学习意愿低、知识留存率差。如果能让防灾知识变得有趣，更多人愿意主动学习，就能在关键时刻挽救生命。
想解决的问题
-
传统防灾教育形式单一枯燥，难以吸引年轻人
-
防灾知识点分散，缺乏系统性学习途径
-
学后易忘，缺乏反复巩固机制
-
沿海居民防灾意识薄弱
为什么做这个方向 防灾教育是关乎生命的社会需求。比起做一个"大而全"的科普平台，我更想聚焦"连连看游戏→知识卡片→反复练习"这个闭环，把寓教于乐做到极致。而且：
-
单HTML文件即可运行，零部署门槛
-
游戏化学习+知识科普的组合，市面少见
-
自己作为学生，最懂如何让学习变得有趣
3. Demo 体验地址
选择方式： 交互式可体验的HTML格式文件，Zip打包上传到社区
附件：海啸连连看-Demo.zip（内含 海啸连连看.html + video/bg.mp4，双击即可在浏览器运行）
也可解压后在本地起一个静态服务器访问。
4. TRAE 实践过程
开发完整流程
Step 1：创意构思 和 TRAE 对话梳理产品构想，从"海啸防灾教育"出发，确定了"连连看游戏→匹配成功弹知识卡片→反复练习巩固"的产品闭环。
Step 2：项目搭建（TRAE IDE） 让 TRAE IDE 生成完整的文件结构，包括index.html、style.css、data.js、matcher.js、board.js、game.js，搭建出游戏整体框架。
Step 3：核心算法实现（TRAE IDE） 实现BFS路径匹配算法（最多两次转弯）、难度分级系统、180秒倒计时、得分计算、LocalStorage最高分记录。
Step 4：知识内容填充（TRAE IDE） 编写20条海啸知识卡片数据，涵盖成因、预警、自救全流程，设计海啸主题图标库。
Step 5：视觉迭代（TRAE IDE） 通过对话不断调整样式，经历了多轮迭代：
-
初始渐变背景 → 视频背景替换
-
视频背景 → 保留原色，移除遮罩
-
按照详细视觉规范落地：蓝色系梯度按钮、纸雕质感、磨砂玻璃衬底、时间预警色值
Step 6：调试与整合（TRAE IDE） 解决了emoji重复导致无法消除的问题、端口占用问题、中文路径编码问题，最终将所有代码整合为单一HTML文件。
开发关键步骤截图
-
截图1：游戏首页界面
-
截图2：游戏对局界面
-
截图3：知识卡片弹窗
-
截图4：游戏结算界面
关键任务对话 Session ID
- Session 1：6a4f3d6866142461fd1dfdcb - 游戏核心逻辑开发
Session 2：6a4f3d6866142461fd1dfdcb - 视频背景与视觉规范迭代
Session 3：6a4f3d6866142461fd1dfdcb - 代码整合为单HTML文件
5. 报名审核通过的帖子链接
报名帖：【社会服务赛道做一个防范海啸应用】
报名帖位于 TRAE 社区报名专区，已通过官方审核
海啸连连看.html (47.6 KB)
