引言在熟悉了前端项目搭建后开始想做一个真正能玩的东西。作为一个后端开发者本能地想做什么项目能同时覆盖前端核心技能又不至于太复杂答案是一个小游戏 一个视觉特效。这篇文章记录从“想做连连看”到“想加粒子消散效果”的完整思路以及在这个过程中学到的技术方案。一、为什么选连连看作为第一个游戏连连看看似简单但它刚好覆盖了前端开发的核心技能状态管理棋盘数据、选中状态、步数、剩余数量事件处理点击格子、判断选中、触发消除算法实现连通性判断直线、单折点、双折点条件渲染已消除格子不显示、选中格子高亮后端类比连通性判断就像你在后端写的路径搜索算法只不过数据从图变成了二维数组。1.1 核心数据结构interfaceTile{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每帧更新并重绘关键代码// 弹簧物理粒子从随机位置弹回目标位置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.vy0.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 effectUI 灵感站酷、花瓣、UI 中国、Curated Design、Craftwork Curated3D 效果react-three-fiberdrei滚动动画framer-motionlenis小结做小游戏是练前端核心技能的最佳方式加粒子特效是提升“科技感”的最快路径。作为后端开发者你不需要成为 UI 设计师但需要能看懂设计稿、会找参考、能实现动效。这三件事做到全栈就成功了一半。