OnlinePuzzle.net 是一个包含 4 大玩法、365 天不重样内容、沉浸式 Noir 视觉体系的网页解谜平台。
这篇文章分享我在设计它的架构、内容体系和工程化流程中的经验。

---

# 01｜项目背景：不是“小游戏”，而是“完整的内容系统”

市面上的网页小游戏大多是独立玩法，而 OnlinePuzzle.net 的目标是：

• 4 个玩法组成一个世界观一致的侦探系统

• 每日案件（Daily Case）= 每天 4 个新谜题组合成一个“案卷”

• 2700+ 独立线索词库 → 全年不重样、无泄题风险

• 用户有自己的侦探档案、成就、等级、Streak 系统

这意味着：

这个项目本质上不是一个小游戏，而是
内容系统 + 解谜引擎 + Noir 视觉 Pipline + 轻量游戏 UI 的组合体。

因此工程架构必须：

• maintainable（可维护）

• scalable（可扩展）

• modular（可复用）

• verifiable（可验证）

这是整个技术方案的起点。

---

# 02｜整体技术栈选择

技术	作用
Next.js 14（App Router）	支持 SSG / ISR / RSC，适合多页面结构的轻量游戏
TypeScript	用于内容库类型定义、玩法引擎、安全验证
Tailwind CSS	快速构建 Noir UI（打字机字体 / 档案纸风格）
Framer Motion	Noir 场景动效、卡片翻页、印章效果
Web Audio API	打字机音效、翻卡、环境音
LocalStorage	轻存档（streak、成就、案件记录）
PWA + Service Worker	离线可玩、减少加载时间

这套技术栈让项目既保持 轻量性，又能满足 沉浸式体验。

---

# 03｜4 大玩法如何工程化拆解？

虽然 UI 不复杂，但玩法逻辑全部是独立模块化开发。

---

🎮 ① Daily 5（类似 Wordle）

核心逻辑：

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

该玩法的关键设计：

• 每个词有两个线索（主线索/副线索）

• 使用纯逻辑函数判断命中状态（green/yellow/gray）

• 点击键盘 → 状态写入 grid state

难点：

• 一天一个词 → 必须 去重、验证词库唯一性

• 提供 案件报告 需要生成结构化数据（分享卡片）

---

🎮 ② Scramble（字母重组）

逻辑非常纯粹：

function shuffle(word: string): string { return word.split('').sort(() => Math.random() - 0.5).join('') }

但为了保证游戏体验：

• 不能让打乱后的词与原词一致

• 不能出现无意义的打乱（如原本就有重复字母）

• 一次打乱 → UI 提供视觉位置变化（Framer Motion）

为了避免“泄题”风险：
词库 666 个全部人工筛选 + TS script 自动检测重复。

---

🎮 ③ Word Search（单词搜索）

工程量最大，因为：

• 365 个主题 × 每主题 8 个词 = 2920 条独立词条

• 每一条都必须严格匹配 Noir 世界观（犯罪、行动、法医等）

为了保证统一性：

我做了结构化词库：

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

然后用脚本自动验证：

• words 不重复

• theme 不重复

• 所有字母可水平/垂直/斜向放入 grid

• grid 生成可逆

相当于是一个 日历型的大型数据结构。

---

🎮 ④ Memory Clues（证据配对）

玩法简单，但内容体系庞大：

每一天是一对线索（365 对）：

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

这类内容的难点在于：

• 文风统一（Noir Detective Voice）

• 不能和 Daily 5、Word Search 的词条重复

• 需要写出“像证据但不失可玩性”的线索

这是整个项目最需要内容审校能力的模块。

---

# 04｜内容体系本身就是“工程项目”

为了保证 365 天 × 4 个玩法 = 无重复、不泄题、不撞词，
我写了一个脚本对整个 TS 内容库进行自动验证：

内容验证包括：

• 全部单词去重

• 跨玩法去重

• 大写小写标准化

• 空格规范

• ASCII/Unicode 清洗

• 自动检测潜在“击中字母模式泄题”问题

• 自动检测主题词是否相似度过高

这是一个非常典型的：

内容工程（Content Engineering）流程，而不是人工 Excel 管理。

---

# 05｜Noir UI / 动效系统怎么做？

亮点包括：

✔ 档案纸纹理：

Tailwind + CSS overlay，实现复古质感。

✔ 打字机字体：

font-family: "Special Elite", Courier, monospace;

✔ Red Stamp（红色案件印章动画）

Framer Motion + skew transform。

✔ 案件卡片视觉

组件化：

<Card variant="polaroid"> {/* content */} </Card>

✔ Web Audio API

音效全部本地缓存，减少延迟：

const audio = new Audio('/typewriter.mp3') audio.play()

这种沉浸式体验不是重 UI，而是 轻内容 + 轻动效组成强氛围。

---

# 06｜PWA：带来“离线可玩”的轻游戏体验

使用 Next.js + Workbox，实现：

• offline HTML shell

• offline assets

• gameplay 无需网络

这让网站变成接近“App 的体验”，但仍保持 Web 的轻量性。

---

# 07｜侦探档案系统（用户数据层）

无需后端 → 全本地 LocalStorage：

• streak

• best streak

• XP

• 成就

• 玩法进度

为什么不用后端？

• 门槛更低

• 速度更快

• 用户隐私更强

• 维护成本更低

• 游戏属于轻量体验，不必登录系统

逻辑非常清晰——做体验，而不是做平台锁定。

---

# 08｜工程上的经验总结

① 内容也是代码

必须结构化，否则无法验证。

② 组件化 UI 是 Noir 主题的关键

统一的视觉语言决定沉浸感。

③ 所有玩法都要模块化

四套玩法复用同一状态管理和 UI 模板。

④ 自动验证 = 内容质量的生命线

⑤ 黑色电影风格 ≠ 视觉皮肤，而是 UX 价值

氛围感决定留存与沉浸，而不是难度。

---

# 结语

OnlinePuzzle.net 本质不是一个小游戏，而是一个：

可持续更新、结构化内容驱动、沉浸式世界观的 Web 解谜平台。

它的挑战不在技术难度，而在：

• 系统设计

• 内容工程

• 体验一致性

• 模块化 + 可扩展

• 氛围式 UX

希望这些经验能给你在做 Web 游戏 / 内容驱动产品时带来一些启发。