自从 Google 开放让学生免费领取一年的 Gemini 3.0 Pro 订阅后，我就像突然打开了新世界大门一样，开始疯狂实验用 AI 来写各种网页小工具。最终目标很简单：做一些自己日常会用、需要高度客制化的工具，顺便取代那些明明功能很简单却要收费的 app。
其实我早就知道这几年 AI assisted programming 已经是许多真正的程序员的日常了，只是门外汉的我一直没有去尝试。所以虽然以前也试过让 ChatGPT 生简单的 HTML 或 SVG，小玩一下就因为结果不怎么理想而作罢。
但是最近看了一些Youtuber的实验后，我有了大胆的想法。
测试一：贪吃蛇小游戏
拥有 Gemini 3.0 Pro 的第一天，我就想学一些youtuber搞小游戏编程当做试验。结果脑袋一片空白，还是需要考虑10来秒，才随口就说：“做个Nokia的初代贪吃蛇吧”
输入“咒语”不到一分钟，Gemini 就开始狂喷 HTML/CSS/JS火星语。然后又不到一分钟，我的震撼感都还没消失，完整可玩的贪吃蛇已经出现了。
试玩之后只能说：跪了。
这不仅是个完整的贪吃蛇游戏，更让我惊讶的是 UI 风格很好看。在我根本没给非常仔细的指示下，它自己选的色调、布局、按键风格都很顺眼，甚至比我自己能想出来的更好。
既然成品如此完整，我可以考虑deployment的操作了，准备练习如何把成品发布上线了！
经过和 Gemini 的对话（原来这种就是简单的 static webpage），我尝试把成品丢上 Netlify 和 GitHub Pages。虽然他们界面一开始对我这个小白看起来有一点复杂，但靠 Google搜索和 Gemini对话，我还是顺利把贪吃蛇推上线了 。
链接：
https://exponsnaketial.netlify.app
注：由于我哥给了一个建议：“不如改成蛇每吃一粒点就立刻长一倍”， 于是我也顺势给它取了一个中二的名字。
体验成功后，就开始想下一个项目。
解锁技能：
Vibe Coding✅
Netlify上手体验✅
Github上手体验✅
测试二：锄大 D（Big Two）卡牌游戏
现在可以提升难度，那就试试看做一个 锄大D。我对规则熟悉，也可以拿来测试 AI 的出牌逻辑强弱。顺便摆脱那些免费锄大D app被迫看广告的烦恼。
一样的流程：一句 “做个 Big Two 游戏”，不到一分钟就生成了第一版。基本玩法没错，我也不需要向 Gemini 详细解释规则，只是一些 house rule 细节不同而已。
但是这次面对的挑战是比贪吃蛇复杂，由于界面更复杂了，这次需要人脑介入处理界面与功能优化，例如：排序方式, 卡牌视觉设计,桌面出的牌显示, 对手剩余卡数等等。
 |
| 第4版 |
对界面设计我完全没有概念，搞了几轮也不满意，只好先去参考市面上现成的卡牌游戏，再把指令丢会给 Gemini。经过几轮来回调整后，游戏的UI 和功能就比较一个完整游戏了 （虽然UI依然充满瑕疵）。
 |
| 最终版 |
AI 玩家逻辑升级：然后我输惨了
接着我就问 Gemini：要如何让 AI 玩家更聪明？Gemini比较当前出牌逻辑，建议调整4条简单的出牌逻辑即可：
A. Hand Structure Analysis (The "Combo Protection" Rule)
- Current Behavior: Treats 3, 3, 4, 5, 6 as individual cards. Might play a single 3.
- Improved Behavior: Recognize 3, 3 is a Pair. Do not play a Single 3 unless necessary.
Before deciding a move, the AI should analyze its hand to group cards into optimal combinations.
B. Control Card Conservation
Strategy: If the card required to beat the table is a rank A or 2, and the AI has more than 5 cards left, it should consider Passing instead of playing.
Exception: Unless playing that high card allows the AI to play a 5-card hand next turn that it guarantees to win.
C. Opponent Awareness (Endgame Logic)
If opponent has 1 card: Do not play a Single. Play Pairs, Triples, or 5-card hands to lock them out. If forced to play a Single, play the highest Single available (to prevent the opponent from sneaking out with a low card).
D. Leading Strategy (Free Turn)
Lead 5-card hands first: If the AI has a Straight/Flush, play it immediately. These are harder to pass later.
Lead Pairs before Singles: It is harder to regain the lead with pairs.
Lead the "Trash": Lead the lowest card that isn't part of a good combo.
看了一下那些策略，我心想：“咦？这不就是我平时的玩法吗？” 原来我的基本逻辑可以这么简单地描述出来。虽然我猜应该还有更高级的玩法，比如分析已经在打出手的牌面之类的，但我自己也不深究，不知道怎么描述策略给它。于是我直接下令：“你就按你方式升级 AI。”
（顺便看了一下它生成的程式架构，原来出牌逻辑整个被打包在一个 runComputerTurn() 里面。看到这一点我突然觉得未来如果要做一个AI 难度选择的功能，好像也并不难实现嘛。只要根据不同难度去切换不同的逻辑模块就行了)
结果升级后……我试玩几把后，现在问题来了：我输多赢少了啊！
算了，不玩了，上线，move on。
链接：
https://big2bygemini.netlify.app/
https://gourean.github.io/big2bygemini/
但是！但是！当我兴致勃勃地切到手机萤幕测试时
整个排版完全还是一塌糊涂！
我马上向 Gemini “投诉”。结果它淡定地跟我解释：你想要的叫做 Responsive Web Design（响应式网页设计）。听它解释后我才突然回想起：平时上网时，网站在电脑横屏和手机竖屏之间会自动适配版面，而我这个小白，在设计一开始根本完全没考虑到这一点。
于是我只好又让 Gemini 帮我把整套 UI 调整成 responsive。不过改着改着我心像算了，不需要再纠结UI, 以后有机会可以直接打掉重练。
也是在这个阶段，我才体验到 User Interface (UI)/User Experience (UX) 跟写代码是两码事。就算代码能跑、功能没问题但如果用起来糟糕，那再完整的程式也只是形式上的“能动”，却没有人会想要用它。
Gemini 的确可以在极短时间内把整个游戏的代码生出来，我也相信它生成的代码可能不是最优雅、最效率、最符合工程师标准的写法，但至少是 跑得动、目标达成。对于这种小型工具或游戏，代码结构不够完美也不算致命吧?
但是真正麻烦的是它不是人。只要目前AI 很难体会人类在视觉上对“几个像素的差距”有多敏感。对于我们来说，字大小、按钮位置、间距大小，都会影响整个体验。但这些直观的感受对目前的AI来讲很难真正理解，所以即使代码方面可以代劳，UI/UX还需要人力介入。就像这次的项目一样，真正花我最多时间的根本不是写程式，而是界面
解锁技能：
No comments:
Post a Comment