构建 “Trickster's Table”：使用 Gemini AI Studio 的卡牌游戏套件（零编码）

Source: Dev.to

TL;DR

我在 数小时 内使用 Google 的 Gemini AI Studio 构建了一个功能相当完整、无广告的纸牌游戏套装（黑桃、红心、单人纸牌）。本文拆解了 Gemini 如何构建复杂的游戏状态，并帮助我设计了一种独特的混合模式 “Spadearts”。

为什么要做新的纸牌游戏套装？

如今的移动纸牌游戏充斥着广告、开箱抽奖和笨拙的界面。我希望 Trickster’s Table 能像高端原生应用一样，瞬间在浏览器中运行。

技术栈

• React 19 – 流畅的 UI 与状态管理
• TypeScript – 为复杂规则和计分数学提供类型检查
• Tailwind CSS – 快速样式与主题化
• Google GenAI – 为开发工作流和游戏内智能提供动力

Note: 100 % 的代码都是通过 AI 提示生成和重写的；我只提供了提示词。

游戏套装

Spades ♠️

• Partnership Mode – 经典 2v2 对战，配有机器人玩家
• Solo Mode – 纯粹的个人竞技
• Whiz Variant – 必须准确报出手中黑桃数量，否则只能叫 Nil
• Nils – 未报 0 则不能出黑桃

Hearts ♥️

• 经典的躲避类游戏
• “Shoot the Moon” 检测逻辑
• Partnership Mode – 合作伙伴累计罚分（分数最低者获胜）

Spadearts (High/Low) 🃏

• 同时进行 Spades（高分局）和 Hearts（低分局）
• Dual‑Track Scoring – 管理出价以获取高分，同时避免低分
• Whiz Support – 采用 Whiz 出价规则的 Spadearts

Solitaire Suite

• Klondike – 经典接龙，支持拖拽、提示和自动完成
• Pyramid – 基于数学的谜题模式，附带连胜奖励

使用 Gemini AI Studio 构建

1. 定义游戏、规则、主题和桌面，无需写一行代码。
2. 告诉 Gemini 新游戏会频繁加入，系统会自动模块化架构。
3. 创建混合模式 – 我向 Gemini 讲述了把 Spades 与 Hearts 结合的故事。
   • 结果： 一个分数拆分系统，Spades 为王牌（正分），Hearts 为毒牌（单独记录罚分）。
   • 平衡： 在聊天中模拟计分情景，确保 Hearts 中的 “Moon Shot”（拿走全部罚分）能奖励 Spades 分数（+100 分）。

主题化

AI 生成了 SVG 与 CSS 渐变背景，省去沉重的图片资源，渲染瞬间完成：

• Neon Theme – 带有 CSS 动画的透视网格
• Vintage Theme – 使用 SVG 噪声滤镜模拟布面/皮革纹理
• Winter Theme – 基于 CSS 的飘雪粒子
• 共计十二种主题，每种都有独特的风格与背景艺术

AI 驱动的机器人

Robot Mode

实现了让 AI 逻辑接管人类玩家座位的功能，可在所有游戏和模式中自动进行游戏。

统计账本

一个强大的 Record 记录每一轮数据，按 Game Mode（Spades vs. Hearts）和 Type（Team vs. Solo）拆分。这使得以下可视化变得轻松：

• 各变体的胜负比
• 当前连胜记录
• 最高分数

geminiService.ts 模块将实时游戏状态推送至 Gemini API，让机器人能够基于上下文对特定失误进行聊天式点评。

Spadearts 游戏概览

• Passing Cards (Hearts) – 玩家在出价前交换手牌。
• Bidding (Spades) – 同时出价决定王牌强度。
• Mobile Wide View – 为横屏布局优化。
• Mobile Tall View – 为竖屏布局优化。
• Round Summary – 简洁的得分与行动回顾。

结束语

欢迎在评论区留下你的反馈。