这个项目是什么
Wordless就是个类似 Wordle 的猜单词游戏,用 Next.js 搭建的。玩家有 6 次机会猜出单词,支持 3 到 8 个字母的单词。说实话,开始只是想做点跟 wordle 不一样东西,没想到做着做着就越来越有意思了。
我用了一个周末把代码撸完以后,直接发布上线,也没怎么关注,没想到几个月过去了,这个小游戏的流量一直很稳定,有 50%的自然搜索,40%的直接访问流量,这可是个非常漂亮的流量数据呀。
用了什么技术
主要框架
- React 18.3.1 - 没什么好说的,前端必备
- Next.js 14.2.4 - 选它主要是因为 API 路由很方便
- TypeScript - 虽然写起来麻烦点,但能避免很多低级错误
- Tailwind CSS - 写样式贼快,不用想类名
UI 相关
- Radix UI - 弹窗、通知这些组件用的,无障碍做得不错
- Lucide React - 图标库,简洁好看
- Canvas Confetti - 猜对了撒彩带的特效,挺有意思的
其他工具
- SWR - 数据获取用的,缓存机制不错
- Zod - 数据验证,比手写 if-else 强多了
- nspell - 检查单词拼写是否正确
文件结构
核心功能实现
1. 游戏状态管理
游戏使用 React Hooks 管理复杂的状态:
2. 单词生成系统
采用优化的单词生成器,避免重复选择同一单词:
3. 游戏逻辑算法
4. 游戏网格组件
5. 虚拟键盘组件
使用 memo 优化渲染性能:
数据结构
单词词库
词库按长度分类存储,每个长度包含 500+ 个单词:
API 设计
Edge Runtime API
使用 Next.js Edge Runtime 提供快速的 API 响应:
用户体验优化
1. 动画效果
- 卡片翻转动画:使用 CSS
animate-flip
类 - 按键反馈:按键按下时的视觉反馈
- 胜利庆祝:使用 canvas-confetti 库
2. 响应式设计
- 移动端优化的键盘布局
- 自适应网格大小
- 触摸友好的交互
3. 性能优化
- 使用 React.memo 减少不必要的重渲染
- useCallback 和 useMemo 优化函数和计算
- 单词生成器的缓存机制
部署和 SEO
SEO 优化
分析工具
- Google Analytics 用户行为追踪
- 自定义事件追踪
开发工具
代码质量
- ESLint - 代码规范检查
- Prettier - 代码格式化
- TypeScript - 类型安全
包管理
- PNPM - 快速、节省磁盘空间的包管理器
游戏流程
- 初始化:选择单词长度(3-8个字母)
- 生成目标单词:从词库中随机选择
- 用户输入:通过虚拟键盘或物理键盘输入
- 验证输入:检查是否为有效单词
- 匹配算法:计算字母匹配情况
- 视觉反馈:显示颜色提示(绿色=正确位置,黄色=错误位置,灰色=不存在)
- 游戏结束:6次尝试后或猜中单词后结束
- 结果展示:显示结果弹窗和庆祝动画
特色功能
1. 可变单词长度
支持 3-8 个字母的单词,增加游戏难度选择
2. 智能单词生成
避免重复,确保每次游戏都有新鲜感
3. 实时反馈
即时的视觉和交互反馈,提升用户体验
4. 无限游戏
没有次数限制,可以连续游戏
5. 响应式设计
适配各种设备屏幕尺寸
技术亮点
- 现代化技术栈:使用最新的 React、Next.js 和 TypeScript
- 性能优化:多层次的性能优化策略
- 可维护性:清晰的代码结构和组件分离
- 用户体验:流畅的动画和交互效果
- 可扩展性:模块化设计便于功能扩展
总结
Wordless 是一款用现代 Web 技术打造的游戏,干净利落,跑得飞快,代码还容易维护。没堆花里胡哨的东西,但该有的全都有——好玩、流畅、写得明白。
欢迎来体验: https://wordless.online/