引言
在熟悉了前端项目搭建后，开始想做一个真正能玩的东西。作为一个后端开发者，本能地想：做什么项目能同时覆盖前端核心技能，又不至于太复杂？
答案是：一个小游戏 + 一个视觉特效。
这篇文章记录从"想做连连看"到"想加粒子消散效果"的完整思路，以及在这个过程中学到的技术方案。
一、为什么选连连看作为第一个游戏
连连看看似简单，但它刚好覆盖了前端开发的核心技能：
- 状态管理：棋盘数据、选中状态、步数、剩余数量
- 事件处理：点击格子、判断选中、触发消除
- 算法实现：连通性判断（直线、单折点、双折点）
- 条件渲染：已消除格子不显示、选中格子高亮
后端类比：连通性判断就像你在后端写的路径搜索算法，只不过数据从图变成了二维数组。
1.1 核心数据结构
typescript
interface Tile {
id: number;
icon: string;
row: number;
col: number;
removed: boolean;
}1.2 核心算法：三种连通情况
- 直线连通：同行或同列，中间格子全空
- 单折点连通：两个候选折点，任一路径畅通
- 双折点连通：遍历所有空格作为中间转折点
对于 8×10 的棋盘，性能完全够用，不需要优化。
二、粒子消散效果：从前端特效到技术实现
2.1 想做的效果
在找参考时，看到了一个网站：鼠标点击一团动态图形，它会碎成粒子飞散。这种"粒子消散"效果科技感很强，想把它用到自己的项目里。
2.2 三种实现路径
路径一：用现成的 React 粒子库
particles-storm 或 react-vanish-box，安装即用，传入粒子数量、颜色、速度等参数就能渲染。适合快速看到效果。
路径二：Canvas 手写粒子系统
核心步骤：
- 捕获内容 ：用
html2canvas或fillText把内容画到 Canvas 上 - 像素采样：遍历像素数据，有颜色的位置生成粒子
- 赋予运动属性：位置、速度、寿命、透明度
- 动画循环 ：用
requestAnimationFrame每帧更新并重绘
关键代码：
javascript
// 弹簧物理：粒子从随机位置弹回目标位置
p.vx += (p.tx - p.x) * 0.08;
p.vy += (p.ty - p.y) * 0.08;
p.vx *= 0.85; // 阻尼
p.vy *= 0.85;
// 爆炸：给随机初速度 + 重力 + 透明度衰减
p.vx = (Math.random() - 0.5) * 16;
p.vy = -5 - Math.random() * 10;
p.vy += 0.15; // 重力
p.alpha -= 0.008;路径三：GPU 加速方案
如果粒子数量很大（几千个以上），可以用 WebGL/WebGPU 在 GPU 上计算粒子运动。适合高频交互场景。
2.3 选择
决定先用 particles-storm 把效果做出来，感受"粒子从消除位置飞出去"的视觉反馈。等跑通了，再切换到 Canvas 像素采样方案，做到"🍎 碎成粒子飞走"的精确效果。
三、UI 设计师和前端开发的区别
在找参考的过程中，一度困惑：这种粒子效果是 UI 设计师的工作，还是前端的工作？
答案很明确：是前端的活。
| 角色 | 职责 | 交付物 |
|---|---|---|
| UI 设计师 | 决定界面"长什么样"：配色、布局、字体、交互示意 | Figma 设计稿 |
| 前端开发 | 把设计稿变成能跑的代码：还原布局、实现交互、对接数据 | 可运行的页面 |
关键区别：设计师决定"粒子应该长什么样、什么时候飞"，前端决定"粒子怎么在浏览器里真的飞起来"。
后端类比：UI 设计师就像产品经理 + 架构师，出"图纸"；前端开发就像后端开发，负责"施工"。图纸再好，没人施工也住不了人。
四、实用的学习资源
- 粒子效果 ：
tsparticles（背景粒子）、react-vanish-box（消散效果）、CodePen 搜particle click effect - UI 灵感：站酷、花瓣、UI 中国、Curated Design、Craftwork Curated
- 3D 效果 ：
react-three-fiber+drei - 滚动动画 ：
framer-motion+lenis
小结
做小游戏是练前端核心技能的最佳方式，加粒子特效是提升"科技感"的最快路径。作为后端开发者，你不需要成为 UI 设计师，但需要能看懂设计稿、会找参考、能实现动效。这三件事做到，全栈就成功了一半。