avatar👨‍💻
BestGuo2020BestGuo 的小窝

face-lift

一个人的世界是如此安静

我终于做出了自己家乡的麻将游戏

前言

随着 AI 发展如此之快,编程的门槛似乎是越来越低了,最近显得无聊,目前也没有工作,我花了三天的时间,手搓了一个麻将游戏!不过,这是我用 codex 帮我写了一个“麻将”游戏。

为什么会突然想到做一个麻将游戏,因为自从 2024 年,我第一次接触到麻将,就已经被麻将的魔力深深的吸引着,每次放假回家就像和兄弟姐妹们家人们搓一手麻将。还有一个原因是,现在 AI 这么发达,什么一句话做一个个人网站,什么 AI 要被淘汰了,我做了一个游戏,但是一行代码都没写。我在想,真有它们所说的夸张?

虽然各种线上麻将玩法层出不穷,什么四川麻将、长沙麻将、广东麻将啊等等,但是我们家乡的麻将倒是没发现,于是我突发奇想,能不能我做一个我自己的麻将游戏呢。

我第一次接触的麻将是我家里人所说的“广麻”,即广东麻将。但是和线上主流玩法、线下棋牌室玩法可能不一样。于是我就将这个麻将玩法称之为“莲花广麻”。

在后面的章节中,我们会提到这个麻将的规则,我用 AI 开发的部分过程,开发完的感受和以及最终的小结。

游戏界面一览

开始之前呢,先一览一下界面吧,看起来还真有那么一回事

这是主页

主界面

这是对局页

对局页

这是结算页

结算页

我给 AI 的提示词

以下是我的提示词,发给 codex,同时在描述项目的时候,我还提供了两段麻将国的两端参考视频让 AI 去参考。

请帮我做一款麻将游戏《莲花广麻》,游戏规则如下。

  1. 只能碰、杠。不能吃
  2. 只能自摸或抢杠胡,不能点炮
  3. 白板作为癞子牌,可以代替任意牌
  4. 庄家默认x2倍,手牌无癞子x2倍
  5. 摸到红中等于开杠,从牌墙尾部摸牌
  6. 如果用户摸到四个红中,直接算自摸胡牌x4
  7. 买马:由胡牌者从牌墙中摸8张牌,若8张牌中出现159红中,则 +1 番

游戏内容需尽可能的还原 img 目录下的两个视频的效果,开发时用 Context7 查询所有游戏框架和库的最新文档。

初版效果

整个过程花了 22 分钟,然后出来的初版效果居然是这样的!

alt text

我的 3D 效果呢,这些像链条一样的东西又是个啥?第一版的效果就是一个纯 2D 的一个麻将,问题特别多。中控盘是歪的、牌河的牌是小的、还有不知名链条。

AI 似乎察觉不到 2D 和 3D 感觉,虽然明明按照参考视频里的内容去做,但是依旧做不出 3D 的桌面,不过经过了几轮对话,它似乎做出来了,但是又好像没做出来。然后 AI 告诉我,目前仍是 HTML/CSS 实现的 2.5D,并非真正的 WebGL 三维模型;但空间关系和镜头表现已经比上一版明显接近参考视频。

alt text

接近在哪?接近牛魔!牌都要起飞了。整个初版已经是完全不可玩的状态了。

第二版效果

经过 2 轮对话,整个麻将总算是有了 3D 的感觉了,但是 3D 化了,又感觉没有完全 3D 化,牌河的牌变成纸片了,以后就叫纸片麻将😄。

alt text

这个都还算是小问题,可以让 AI 来调整回来,后面在 3D 处理的时候还是有非常多的问题,我都一一列举出来。

副露遮挡

上家对家遮挡

alt text

本家遮挡

alt text

牌桌太窄

alt text

牌河太靠下

alt text

牌河遮挡

AI 它居然没有移动对家的手牌和副露!

alt text

本家被遮挡,这个解决办法是让 ai 吧第四列的牌移到第三列

alt text

强迫症没对齐,难看。

alt text

换牌面

最后把牌面换了,第二版的效果差不多就是这样了

alt text

第三版效果

第三版主要是调整了结算亮牌、添加“查看牌桌”的按钮、移动端横屏和矮屏增加独立的结算页适配、移动端横屏整体适配、中控转盘文字调大、加入 BGM 和音效。

img

除了界面上的调整,还有游戏规则上的 bug,不过 AI 在分析的过程中,会把代码中为实现的部分解释并指出来,以下。

image-20260804010613152

后面我再总结一段提示词,然后去调整。

接下来请你调整一下代码,最终的要求如下:

  • AI 抢玩家的补杠,AI抢AI的杠。
  • AI 之间能碰、杠。
  • 通用的四家响应和优先级判定
  • 白板作为癞子不能开杠
  • 发牌阶段从牌尾补到红中时,也要记录“红中开杠”
  • 不止增加局数,还要增加庄家轮换或连庄逻辑。
  • 在此游戏规则中,一般型足够,七对、十三幺等特殊牌型暂不支持。只有自摸,没有点炮

不想回忆之前 vibe 过程了,总之第三版调整的过程还是比较难受,什么截图圈重点,调整牌面和光效,但是游戏这一块的开发我确实不懂,特别细节的部分 AI 可能就显得无能为力了,我快要被气糊涂了。

34fc14ec-aea7-499b-a2ef-3a691a3a8351
a61999cb-fdfa-419a-bc7a-cbf0f3d0f6f4

第三版的最终效果如图所示,已经非常接近我想要的效果了。

3c0e0e55-0868-4dc2-b0b3-2adea74a0861

总结

关于这个项目,我和它对话了不知道多少轮。

projects

通过这么轮的对话,给我的感觉是,我现在是让 AI 参与需求分析、规则设计、视觉判断、调试和产品决策。这正是 AI 时代最重要的能力变化。

AI 可以把个人从“只会执行一小段任务”扩展成可以独立完成一个完整项目的人。除此之外,还能

  • 降低试错成本。
  • 让表达想法变得更容易。即使一开始说得不够技术化,也能逐步转化成代码和方案。
  • 加速学习。遇到陌生框架、算法或工程问题时,可以即时获得解释、示例和排查方向。
  • 放大个人创造力。过去需要设计师、前端、后端、测试多人协作的事情,现在一个人也能做出原型甚至产品。

坏处也很明显:

  • 容易产生“我已经会了”的错觉。代码能运行,不代表规则正确、架构合理、边界情况完整。
  • 错误传播更快。如果方向不对,即使再锦上添花也没用。
  • 只会复制、粘贴、修改提示词,容易失去主动思考和人为调试的能力。
  • 代码数量增加,但维护成本也增加。尤其是状态管理、异步逻辑、兼容性和安全问题。

虽然目前还没工作,但是后面的工作或许就是,程序员提出目标和判断,让 AI 快速实现;然后再通过不断追问,把模糊想法变成具体产品。

真正应该警惕的不是 AI,而是停止理解自己正在构建的东西。

体验

👉 莲花广麻|一款莲花县特有的地方麻将游戏玩法

👉 GitHub

博客升级后样式错乱:最后发现问题不在 Valaxy,而在 Nginx