网站程序流程图俄罗斯搜索引擎yandex推广入口

之前一直玩一个益智游戏网站，里面有40款完成度极高的智力游戏。最近呢，我改造了下它，让它更现代化。当然本人没啥前端开发经验，全程用 cursor 和 Claude 辅助开发。

我想在这里分享一下，我为什么要重构这套经典游戏，以及我是如何借助 AI（特别是像 Claude 这样的工具）高效完成这项工作的。

一、我的初心：致敬经典，拥抱现代

许多年前，我第一次接触到 Simon Tatham 的便携式谜题集。这是一套构思绝妙、逻辑严谨的智力游戏，全部用 C 语言写成，可以在各种老旧设备上运行。我沉迷其中，为其巧妙的设计所折服。中间还看了下他的C源码，写的是真漂亮。作者好像是 Putty 的开发，还挺厉害的。

然而，随着时间推移和技术发展，这套经典的谜题集在现代 Web 环境下面临一些问题：

• 过时的技术栈：原始实现依赖于 Java Applets 或需要本地编译，在现代浏览器中难以直接运行。
• 陈旧的 UI/UX：界面停留在上个世纪的风格，缺乏对触摸操作和响应式布局的支持。
• 手机web端没法玩：不支持手机端，与"打开浏览器即玩"的现代 Web 体验相去甚远，每次休闲的时候，想打开链接玩都是个问题。

我的想法很简单：保留其最核心、最精华的 C 语言逻辑，但为其披上一层现代化的"外衣"。我希望将这些游戏带给新一代的玩家，让他们可以在手机、平板、电脑上随时随地享受解谜的纯粹乐趣，同时拥有深色模式、多语言切换等现代化的体验。

后续我也会考虑增加一些解题记录功能，把它完善的更好。

二、挑战与奇遇：AI 辅助重构之旅

重构 40 多款游戏是一个巨大的工程，如果完全手动操作，将耗费数月甚至更长时间。幸运的是，我处在一个 AI 技术爆发的时代。我决定将 AI 作为我的"编程副驾驶"，探索一种全新的开发模式。

我的核心思路是：

1. 保留 C 语言核心：将原版的 C 源码通过 Emscripten 编译成 WebAssembly (WASM)，使其能在浏览器中以接近原生的性能运行。这保证了游戏谜题的生成和判定逻辑 100% 忠于原作。
2. 重写前端交互：使用现代前端框架 (React/Next.js) 搭建全新的用户界面。
3. AI 深度介入：在所有"粘合"工作和重复性劳动中，最大限度地利用 AI 提效。

这个过程 Claude 如何助我一臂之力被？在整个重构过程中，Claude 扮演了多个关键角色：

• WASM 胶水代码生成器：编写 JavaScript 与 WASM 模块的交互代码相当繁琐，涉及内存读写、函数调用签名匹配等。我只需将 C 函数的头文件定义丢给 Claude，它就能迅速生成对应的 JS 绑定代码，为我节省了大量查阅文档和手动编写的时间。

• React 组件模板匠：每款游戏都需要一套 UI 组件（游戏网格、控制按钮、设置面板等）。我为第一款游戏设计好基本架构后，在重构后续游戏时，Claude 就可以根据新的游戏逻辑和参数，快速生成结构相似的 React 组件代码，我只需进行少量修改和调试。

• 多语言翻译与内容填充：项目支持中英双语。当我完成 zh.json 中的所有中文描述后，我把整个文件交给 Claude，它便能高质量地翻译出对应的 en.json 文件。同样，各款游戏的玩法介绍、规则描述等文本内容，也多由 AI 辅助生成和润色。

• 调试与重构顾问：在开发中遇到棘手的 bug，或者想优化某段代码的逻辑时，与 Claude 对话就像和一位资深同事进行 Code Review。它能快速理解上下文，提出修改建议，有时甚至能发现我自己忽略的边界情况。

正是得益于这种人机协作的模式，整个重构周期被大大缩短，让我能更专注于项目整体架构和核心功能的打磨。说实话，这里的绝大部分代码都是 AI 生成的，我只用提示即可。我用 cursor Agent 来开发，主要模型是 Claude 4 Sonnet，偶尔有些难解决的 bug，用 O3 Pro 来分析。不得不说，O3 Pro 还是最强编程模型，逻辑推理能力是真的很强。

三、智慧的结晶：游戏合集总览

这次重构的成果，就是你现在看到的这个网站。它不仅是一个游戏平台，更是经典逻辑与现代技术结合的产物。以下是目前已完成的所有游戏，点击链接即可直接体验：

逻辑推理

• 翻转 — 翻转方块组合点亮所有灯
• 猜色 — 猜测隐藏的颜色组合
• 点灯 — 放置灯泡照亮所有方格
• 扫雷 — 经典扫雷游戏，避开所有地雷
• 磁铁 — 放置磁铁满足行列提示
• 视野 — 依据可见数量放置黑块
• 单一 — 消除重复数字保持连通性
• 帐篷 — 在树旁正确放置帐篷
• 不死族 — 布置幽灵、吸血鬼与僵尸

路径连接

• 桥梁 — 用桥连接所有岛屿
• 环路 — 根据数字提示绘制单一闭环
• 网络 — 旋转方格重组网络
• 滑动网络 — 滑动行列重建网络
• 珍珠 — 依据角与直线提示绘制环路
• 路标 — 按箭头方向连接格子
• 斜线 — 填入对角线避免环路
• 轨道 — 根据行列提示铺设铁路

区域划分

• 填充 — 标记数字使区域面积匹配
• 星系 — 分割旋转对称区域
• 栅栏 — 将网格分成等大小区域
• 矩形 — 依据数字分割矩形
• 地图 — 四色上色避免相邻同色

数字游戏

• 算术数独 — 结合运算的拉丁方块
• 数独 — 经典 9×9 数独挑战
• 高塔 — 按可见性提示填充高度
• 不等 — 根据不等号完成拉丁方块

图案填充

• 多米诺 — 用多米诺骨牌填满矩形
• 填色 — 用最少步数统一网格颜色
• 马赛克 — 根据数字提示填充黑白格
• 图案 — 按数字绘制黑白图案
• 同色消除 — 一次性消除大块同色方块
• 无序 — 填黑白格避免三连色

移动策略

• 立方体 — 滚动立方体收集蓝色方块
• 十五数字 — 经典数字滑块排序
• 惯性 — 滑动球体收集宝石
• 跳棋 — 跳过棋子只留一个
• 十六 — 环形滑动数字排序
• 旋转 — 旋转 2×2 方块调整顺序
• 解缠 — 移动节点消除线条交叉

特殊谜题

• 黑盒子 — 用激光束推理球体位置

我敢说很多人会被这个看似简单的游戏迷倒哈哈哈。里面有些题目是有点难。。。 说实话，每次我都思考了好久。