绝望博弈！一众大模型加持的猜拳游戏，人类胜率竟不足10%？

news/2026/1/22 8:37:23/文章来源:https://www.cnblogs.com/greywen/p/19512202

基于 LLM + Next.js 的博弈实战猜拳游戏

摘要：当你以为自己在和随机数生成器玩游戏时，对面的 AI 正在阅读你所有的历史出拳记录，并写了一篇关于你心理状态的小作文。本文带你拆解这个基于 Next.js 16 + Tailwind v4 + LLM 的“过度设计”+“没啥技术含量”+”有那么点意思“项目。

👉 先给老板们体验:（具体规则有手就能玩！）

优先地址：https://rps.anhejin.cn

有条件的：https://rps-eta-ten.vercel.app

最近闲着没事，突然想这用AI写点代码。作为一名要把“简单需求复杂化”刻在 DNA 里的老前端，我决定拿最简单的“剪刀石头布”开刀。

在这个 AI 满天飞的时代，还在用 Math.random() 写对手逻辑未免太没追求了。于是，我基于最新的技术栈（Next.js 16 + React 19），接入了 OpenAI等一众大模型，搞出了一个会“读心”、会嘲讽，甚至懂博弈论的猜拳游戏。

为什么是剪刀石头布？

别笑，剪刀石头布其实是一个极佳的博弈论模型。

新手：完全随机（Chaos）。
普通人：赢了保持，输了变招（Win-Stay, Lose-Shift）。
高手：预判你的预判。

我的目标是：构建一个能看穿你心理的 AI，并且用目前最前沿的前端技术栈把它跑起来。

技术选型：这就叫“杀鸡用牛刀”

为了配得上这个“高智商”AI，我在技术栈上直接拉满，全部采用了目前（2025-2026）的最新稳定版：

Next.js 16.1 (App Router)：服务端组件（RSC）处理核心逻辑，隐藏 AI 的 Prompt，保证你没法通过 F12 偷看答案。
React 19：享受最新的 Hooks 和并发特性。
Tailwind CSS v4：对，就是那个不用配置构建工具、性能起飞的 v4 版本。关键是AI喜欢用这个
SQLite + LibSQL：轻量级数据库，用来记仇——啊不，记录你的胜负数据。

核心玩法：AI 是怎么“读心”的？

这个项目的核心不在于 UI 有多炫（虽然 Tailwind 4 确实很润），而在于 /lib/ai-service.ts 里的那段逻辑。

传统的游戏 AI 往往是预设好的 if-else。但在我的设计里，每一轮游戏，我都会把你在这个 Session 里的所有历史记录打包，像讲故事一样发给 LLM（大语言模型）：


// lib/ai-service.ts// 构建游戏历史描述
const historyDescription = history.length > 0? history.map((h) =>`第${h.round}轮: 玩家出${translateChoice(h.player_choice)}, AI出${translateChoice(h.ai_choice)}, 结果: ${translateResult(h.result)}`).join("\n"): "这是第一轮，没有历史记录。";// ...发送给 LLM
const response = await client.chat.completions.create({messages: [{ role: "system", content: systemPrompt },{ role: "user", content: userPrompt }, // 这里包含了 historyDescription],// ...
});

System: 你是一个猜拳高手，你的对手是一个普通人类。
User: 前几轮战况如下：第1轮玩家出剪刀，你出布（输）；第2轮玩家出石头，你出布（赢）。现在是第3轮，请分析玩家的心理，并给出你的出拳。

不仅如此，我给 AI 设定了两种模式：

策略模式（Strategy）：降低模型的 temperature（随机性），让它进行严密的逻辑推理。比如它会分析：“玩家上一把输了，根据心理学，这把他大概率会出克制我上一把的招数，所以我预判他……”
混沌模式（Chaos）：拉高 temperature，让 AI 彻底放飞自我，主打一个乱拳打死老师傅。

优雅降级：当 GPT 脑干缺失时

作为老全栈，必须要考虑一种情况：如果 API 挂了，或者响应超时了怎么办？

难道让用户干等着转圈圈？绝对不行。

我在后端实现了一套基于传统统计学的本地算法作为“备胎”。如果 LLM 在规定时间内没有响应，系统会无缝切换到本地逻辑。这个本地逻辑一点也不弱，它内置了经典的策略库（代码在 lib/game.ts）：


// lib/game.ts 里的心理学博弈逻辑// 1. 如果玩家上轮输了，倾向于出能克制AI上一招的选项 (Win-Stay, Lose-Shift的变种)
if (lastResult === 'ai_win') {const lastAIChoice = lastRound.ai_choice as Choice;// 预测玩家会出克制我不上一把的牌const predictedPlayerChoice = whatBeatsAI[lastAIChoice];// 那我就预判你的预判return counterMoves[predictedPlayerChoice];
}// 2. 如果玩家上轮赢了，可能继续用同一招
if (lastResult === 'player_win') {// 玩家可能继续用同一招，直接克制它return counterMoves[lastPlayerChoice];
}

这些策略包括：

频率分析：如果你一直出石头，它就会疯狂出布。
反制连胜：如果你赢了，它会假设你会继续出一样的，直接克制你。

在代码实现上，这只是一个简单的 try-catch 降级，但对用户体验来说是质的飞跃。用户根本感觉不到 AI 掉线了，只会感觉“这家伙怎么变风格了？”

全栈体验：Next.js App Router 的丝滑

在 Next.js 16 中，前后端的边界变得非常模糊（褒义）。本项目使用了 App Router 的 Route Handlers 来处理游戏逻辑。

前端组件调用后端接口就像调用本地函数一样自然：


// src/app/game/[id]/page.tsx
const playRound = useCallback(async (choice: Choice | null, timeout: boolean = false) => {// ...const res = await fetch('/api/game/play', {method: 'POST',body: JSON.stringify({ /*...*/ }),});// ...
}, []);

而在服务端 (src/app/api/game/play/route.ts)，我们完成了完整的业务闭环：


// src/app/api/game/play/route.ts
export async function POST(request: NextRequest) {// 1. 身份校验与数据库读取const { sessionId, playerChoice } = await request.json();const baseSession = await db.execute(/*...*/);// 2. 调用 AI (带超时降级)// 如果 API 响应太慢，这里会自动切换到本地逻辑const aiChoiceResult = await Promise.race([getAIChoiceFromAPI(aiConfig, history, difficulty),timeoutPromise // 设定的超时时间]);// 3. 判定胜负 & 写入数据库const result = determineWinner(playerChoice, aiChoiceResult.choice);// ...return NextResponse.json({ /*...*/ });
}

这一套流程行云流水，类型安全虽然不如 Server Actions 极致，但通过共享类型定义（Shared Types），依然能保证前后端的一致性。不用写繁琐的 Swagger，不用搞复杂的 Redux，一把梭。