我如何打造一个黑色主题的解谜平台，提供365天独特内容

Source: Dev.to

构建 OnlinePuzzle.net 让我认识到，即使是轻量级的 Web 应用，也可能需要重量级的工程——尤其是当内容、世界观构建和用户体验必须保持一致时。

当我开始构建这个站点时，我的目标并不是仅仅做一个普通的解谜游戏。我想打造一个 完整工程化的侦探世界，让人有置身 1940 年代案卷的感觉，能够在浏览器中流畅运行、瞬间加载，并且无需任何上手教程。

为此，我必须设计：

• 四个独立的谜题引擎
• 一个拥有 零重复 的 365 天内容系统
• 一个可验证的数据管道
• 一致的 Noir（黑色电影）用户体验
• 一个不依赖后端的轻量化架构

---

01 — 为什么架构比游戏玩法更重要

每种谜题表面上都很简单：

• Daily 5 – 类似 Wordle 的推理
• Scramble – 文字重排解谜
• Word Search – 主题化的 8 词网格
• Memory Clues – 匹配故事碎片的配对

但愿景要求：

• 365 个独一无二的每日案件
• 2700+ 手工制作的线索和单词
• 一个内部自洽的世界观
• 不出现谜题类型之间的意外复用或交叉泄漏

真正的挑战是 内容工程，而不是 JavaScript 或 UI。因此，架构把内容视作代码，而不是松散的文本文件。

02 — TypeScript 作为内容骨干

我没有把文本存放在 JSON、Google Sheet 或 Markdown 中，而是把每一条游戏内容都结构化为 强类型对象：

export interface DailyClue {
  word: string
  hintPrimary: string
  hintSecondary: string
}

export interface WordSearchPack {
  id: number
  theme: string
  words: string[]
}

export interface MemoryPair {
  clueA: string
  clueB: string
  category: 'evidence' | 'person' | 'location' | 'action'
}

为什么这么做？

• 编译时校验
• 基于脚本的一致性检查
• 零运行时意外
• 便于未来扩展

自动化脚本验证了：

• 所有 2700 条目中没有重复
• 没有隐藏冲突（例如相似词根）
• 所有单词符合 Noir 风格指南
• 主题和类别保持一致

内容因此成为一等工程，而不是装饰。

03 — 四个谜题引擎，一个可复用框架

游戏玩法引擎与 UI、内容完全解耦。每个引擎共享：

• 统一的接口
• 计时与连击模块
• 动画钩子
• 错误处理
• 可访问性辅助

示例： Daily 5 检查器是一个纯函数：

export function evaluateGuess(guess: string, answer: string) {
  return guess.split('').map((char, i) => {
    if (char === answer[i]) return 'correct'
    if (answer.includes(char)) return 'present'
    return 'absent'
  })
}

同样的纯粹原则同样适用于：

• Scramble 洗牌
• Word Search 网格生成
• Memory Clues 配对逻辑

这些引擎保持小巧、可测试且易于替换。

04 — Noir UX 层：轻量却一致

为了在不使用沉重资源的情况下营造美学，我依赖：

• Tailwind CSS 实现排版和纸张质感
• Framer Motion 用于邮票、卡片翻转和场景切换
• Web Audio API 提供打字机点击声和环境噪音
• 组件级变体实现侦探风格的卡片、文件夹和案卷

一个典型的 Noir 卡片组件如下：

{/* Noir card component */}
{ /* component markup goes here */ }
{text}

所有样式均通过组合而非图片实现，这让应用保持：

• 快速
• 响应式
• PWA 友好
• 易于换主题

Noir 体验是通过设计系统产出的，而不是依赖重型图形。

05 — PWA + 离线 = 轻量的“每日习惯”应用

整个平台通过 Service Worker 实现离线能力：

• 资源缓存
• 游戏逻辑自包含
• 用户进度存储在 localStorage

收益

• 闪电般的加载速度
• 更高的每日留存率
• 全球玩家均可访问

解谜游戏不应依赖后端才能运行，而本项目正是如此。

06 — 侦探档案系统（无后端）

用户数据——连击、XP、成就——全部本地存储：

interface DetectiveProfile {
  streak: number
  bestStreak: number
  xp: number
  achievements: string[]
}

为何不同步到服务器？

• 隐私
• 即时写入
• 离线模式
• 降低复杂度
• 无登录摩擦

这与我们的理念相符：最大沉浸，最小阻力。

07 — 经验教训

• 内容需要和后端代码同等严谨。
  非结构化文本在规模化时会成为负担。

• 美学一致性是系统，而不是皮肤。
  Noir 体验 = 排版 + 动效 + 音效 + 叙事基调。

• 谜题引擎必须是纯函数。
  能保证可测试性和可移植性。

• PWA 在每日复访的场景下表现出色。
  每日谜题 + 离线能力是完美组合。

• 轻量工具同样可以交付深度体验。
  人们不需要 AAA 级画面——他们需要的是凝聚感、打磨感和情感纹理。

08 — 试用平台

如果你对以下内容感兴趣：

• 设计叙事驱动的系统
• 构建轻量级 Web 应用
• 工程化大型结构化内容集

那么 OnlinePuzzle.net 也许能给你带来灵感。