AI生成「成语接龙」小游戏小程序：Claude Code写逻辑，Cursor调试，微信上线
> 🎮 不背算法｜不查字典API｜不连数据库｜纯前端离线运行｜扫码即玩
大家好，我是RD！今天带你做一款真正有趣、有传播性的小程序——「成语接龙」。它支持：
关键：所有逻辑由Claude Code生成，Cursor辅助调试，全程不碰Node.js或后端。
---
📦 第一步：准备轻量词库（1分钟）
我们不用大词典！用AI生成一个50个高频成语的精简JSON：
在Cursor中新建 idioms.json，输入Prompt：
// 生成一个JSON数组，包含50个常用四字成语，每个对象含"word"和"pinyin"字段，例如：{"word":"画龙点睛","pinyin":"huà lóng diǎn jīng"}。确保首尾字可接龙（如'睛'可作下一个词开头），避免生僻字。
执行 Ctrl+K → 保存为 idioms.json。✅ 已获得可接龙的离线词库！
---
⚙️ 第二步：让Claude Code生成完整游戏逻辑（5分钟）
新建 game.js，输入：
// 我是零基础，用JavaScript写一个成语接龙游戏核心逻辑：
// 1. 加载idioms.json词库（用fetch）
// 2. 随机选一个成语作为起始词（如"一见钟情"）
// 3. 用户输入成语，检查：
// - 是否四字
// - 首字是否等于上一个词尾字（忽略声调）
// - 是否在词库中
// 4. 若正确，更新当前词，给出3个可接选项（随机匹配词库中尾字相同的词）
// 5. 若错误，播放'error.mp3'（用Web Audio API）
// 6. 记录连续成功次数，达到5次生成分享海报（canvas绘制）
// 只用原生JS，不引入任何库，注释清晰。
执行 Ctrl+K → Claude Code将输出完整可运行JS（含错误处理、音效加载、Canvas绘图）。复制进 game.js。
---
🎨 第三步：用Cursor快速生成UI（3分钟）
新建 index.html，输入Prompt：
// 生成一个移动端优先的HTML页面，用于成语接龙游戏：
// - 顶部显示当前目标词（大字体，绿色）
// - 中间显示用户输入框+“提交”按钮
// - 下方显示3个提示选项（卡片式，点击即填入）
// - 底部显示连续次数+“分享战绩”按钮
// - 使用CSS Flex + rem布局，适配iPhone SE到Pro Max
// - 加载game.js，绑定事件
生成后，将 idioms.json 和 game.js 放在同一目录。在Cursor中按 Ctrl+Shift+P → “Open Preview”，测试输入“情投意合” → 看是否高亮并推进！
---
🌐 第四步：部署+嵌入小程序（2分钟）
同第一篇方法：
npx vercel --prod 部署；✅ 游戏已支持离线缓存（添加manifest.json和service worker，Claude可生成）。
---
📣 第五步：加一张朋友圈海报（3分钟）
在 game.js 中找到分享函数，替换为：
function generateSharePoster() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 375; canvas.height = 600;
// Claude生成完整绘图代码（文字+logo+二维码占位）
}
再向Cursor提问：
// 给我canvas绘图代码：在375x600画布上，画深蓝底，白色标题“我的成语纪录”，下方显示“连续答对：7次”，右下角留二维码位置，加小图标装饰。用ctx.fillText等原生API。
粘贴进函数 → 完工！
---
💼 副业延伸
你不是在学编程，是在掌握用AI把想法1小时变产品的技能。
👉 现在就动手：复现本教程，完成后截图发到woshird.com社群，领《10个可商用小程序Prompt模板》PDF。