我如何构建一个快速的多语言 Crossword 和 Sudoku 平台 (crossword.by)

Source: Dev.to

在过去的几个月里，我一直在做一个副项目，它最初只是一个小实验，逐渐发展成更大的东西——一个干净、快速且支持多语言的填字游戏、数独以及其他逻辑谜题平台：crossword.by。

我并没有计划“构建一个谜题平台”。我只是想要一个简单的地方来解填字游戏，且没有广告、弹窗、追踪器或慢速脚本。但我越深入，挑战就越有趣。

以下是故事、背后的技术以及我在过程中学到的东西。

为什么要再建一个谜题网站？

大多数谜题网站都属于以下两类之一：

• 广告泛滥
• 过时且慢
• 只支持一种语言
• 不适配移动设备

或以上全部。

我想要不同的东西

• 即时加载
• 干净的 UI
• 在任何设备上都能使用
• 支持多语言
• 无需注册
• 没有干扰

基本上：一个安静的思考空间。

多语言挑战

支持多语言（英语、德语、法语、西班牙语、乌克兰语、俄语等）成为最有趣的部分之一。

填字游戏与语言密切相关：

• 提示结构
• 单词长度
• 字母频率
• 文化引用

我必须重新思考谜题的存储、生成和校验方式。与其使用单一词典，我构建了一个模块化系统，每种语言都有自己的词表和元数据。这也打开了一扇门：为儿童设计的、使用简化词汇的友好谜题。

数独：比看起来更难

数独表面上看似简单，但生成高质量的数独是完全不同的挑战。

我的需求：

• 不需要猜测
• 合乎逻辑的求解路径
• 实际有意义的难度等级
• 线条简洁、提示最少的网格

我尝试了多种生成算法、剪枝策略和难度估算方法。最终，我构建了一种混合方法，平衡了：

• 约束传播
• 回溯
• 人类式求解启发式

结果：谜题感觉自然，而非随机。

性能很重要

我的目标之一是让一切都瞬间响应。

这意味着

• 不使用沉重的框架
• 最小化 JS
• 预渲染页面
• 为网格优化 SVG 渲染
• 尽可能使用缓存

整个站点在眨眼之间加载完毕，即使在慢速移动设备上也是如此。

为专注而设计

解谜是一种“流”体验。任何打断专注的因素都会破坏体验。因此，我把 UI 保持极度简约：

• 没有弹窗
• 没有模态框
• 没有动画
• 没有暗黑模式的诱导设计
• 没有杂乱

只有谜题、简洁的排版和少量必要的控制。

接下来我在做什么

还有很多想要加入的功能：

• 用户生成的谜题
• 社区挑战
• 每日连胜
• 可打印版本
• 更多语言
• 更多谜题类型

即使在当前的形态下，平台已经被来自不同国家的用户使用——这极大地激励了我。

试一试

期待听到你的反馈——UI、谜题质量、性能、缺失的功能，任何方面都欢迎。

感谢阅读！