一行代码没写,做了一个在线连词游戏

自媒体专栏1小时前发布 cansnow
47 0 0

一行代码没写,做了一个在线连词游戏

昨晚刷到的「字谜达人」,一款中文 Wordament

核心玩法很上瘾,我就想:为什么不尝试自己做个玩玩?

从看到原作到自己的版本跑起来,大约 2 小时。

一行代码没写,做了一个在线连词游戏

一行代码没写,做了一个在线连词游戏

这游戏到底怎么玩

打开页面,你会看到一个汉字网格。

默认 4x4,但你也可以选 3x3 快速局或者 5x5 地狱局。用手指(或鼠标)按住一个汉字,向任意方向拖动——横向、纵向、斜向都可以。滑过的汉字连成路径,如果这条路径上的字恰好组成了一个词库里存在的词语,就得分了。

如果你在短时间内连续命中,连击倍率还会往上叠,连击带来的节奏快感比单次高分更让人停不下来。

但真正的爽点不在分数和连击。

那些你认识了一辈子的字,以随机排列的方式出现在你面前时,你还是会被隐藏的词语组合惊喜到。

滑动路径会有实时高亮,手指划过去的地方亮起来,视觉反馈很即时。如果你连出了一个错误的词——路径上的字组合不在词库里——整个路径会抖动一下然后弹回。

如果你卡住了,还有提示可能的起点。

这些细节加起来,让整个操作手感还算舒服,尤其是在电脑上。(移动端体验暂时不佳,IOS自带的浏览器体验还凑合)

一行代码没写,做了一个在线连词游戏

四种模式,够你磨一个下午

每日挑战是主打,每天同一道题,所有人面对同一个网格。

棋盘通过日期生成固定种子,所以你没法靠刷新碰运气,拼的就是谁的语感更敏锐。

默认 4x4 棋盘、普通难度,180 秒内找出尽可能多的词,有点像 Wordle 的逻辑,但节奏更快。

每天首页还会展示当天的每日词语——包括拼音和英文释义。这个数据优先请求远程翻译接口,如果网络不行就自动回退到本地词库。所以你即使断网了,核心功能也能用。

计时模式是常规玩法,你可以自己搭配难度和棋盘:难度分简单、普通、困难三档,棋盘有 3x3、4x4、5x5 三种规格。固定时间冲刺最高分,想怎么组合都行。

练习模式适合摸鱼,没有时间限制,没有人催你,你可以在开会的时候慢悠悠地找词,找到一半切出去回个消息再回来。所有找到的词会自动保存,方便你复盘自己漏掉了哪些。

无尽模式是给硬核玩家的,固定 5x5 棋盘,180 秒一轮。你把当前盘面的词找完之后,系统会自动切到下一盘,计时不会停,理论上你可以一直玩下去,直到手酸或者脑子烧掉。(这个模式没有测试过,因为本人没玩通过第一关)

所有模式的词库都用开源词库 CC-CEDICT,一个收录了超过十万词条的开源中英词典。词库在构建时会自动过滤出长度在 2 到 6 个汉字之间的词语,然后构建成前缀树(Trie)结构。

每次你滑动路径的时候,前端会根据前缀树实时判断:当前路径还有没有继续延伸的意义。这个优化让滑动响应非常快,即使在 5x5 的大棋盘上也不会有延迟感。

配套的辅助系统也做了,历史记录会保留你最近 20 局的结果。成就系统会根据得分、模式完成情况等解锁对应的徽章。

持久化全部走 Cookie,没接数据库,没搭后端服务。成就、历史、每日完成标记、无尽模式统计,全写在你浏览器的 Cookie 里。

简单粗暴,但跑起来没有任何负担。

整个项目的技术栈是这样:

前端 Next.js 16 + App Router + React 19 + TypeScript 5 + Tailwind CSS 4;后端是 Next.js Route Handler;

数据层是 CC-CEDICT 词库加上 Cookie 持久化;

部署支持 Docker 和 PM2。

代码量大概几千行,涵盖前端界面、游戏逻辑、词库解析、Trie 前缀树、计时系统、计分规则、连击机制、多模式切换、棋盘生成、成就系统、历史记录、响应式布局等等。

我不是前端工程师,没学过 React,之前没太接触过 Next.js。

一行代码没写,做了一个在线连词游戏

来玩一把?

汉谜达人已经完全上线,PC 和手机都能玩,不需要下载,不需要注册,打开浏览器就行。

IOS Safari,安卓可以使用X浏览器,夸克悟空这种不行。

每天一题,180 秒,看看你能滑出多少词。

如果能帮我玩一下无尽模式找到 46 个词以上的,记得回来告诉我。

项目仓库:https://github.com/cansnow123/hanzi-word

zTab添加在线标签打开就能看到汉谜达人。

欢迎Fork、Star,如果你也正在用 AI 写代码,想交流心得,评论区随时聊。

项目成本:使用的Codex+中转站,GPT5.4,中转站消耗3.2元。

中转站推荐:https://vlabsx.com/sign-up?aff=A7y4

© 版权声明

相关文章

暂无评论

暂无评论...

网址设置

网址样式切换

详细

网址卡片按钮

显示

布局设置

左侧边栏菜单

展开

页面最大宽度

1700px

搜索框设置

搜索框背景上下位置

仅对图片背景生效

50%

自定义搜索框背景

  • 静图

    随机壁纸

  • 静图

    随机4K

自定义搜索框高度

  • 聚焦
  • 信息
  • 默认
设置