当前位置：首页 > news >正文

经典新生：我如何用 AI 重制 40 款益智游戏

news 来源：原创 2025/6/23 11:40:27

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

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

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

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

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

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

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

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

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

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

我的核心思路是：

保留 C 语言核心：将原版的 C 源码通过 Emscripten 编译成 WebAssembly (WASM)，使其能在浏览器中以接近原生的性能运行。这保证了游戏谜题的生成和判定逻辑 100% 忠于原作。
重写前端交互：使用现代前端框架 (React/Next.js) 搭建全新的用户界面。
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 还是最强编程模型，逻辑推理能力是真的很强。