技术小白的Vibe Coding实战:我手搓了一个“扫雷”小游戏

技术小白的Vibe Coding实战:我手搓了一个“扫雷”小游戏

最近“Vibe Coding”这个词特别火,意思就是不靠硬编码,靠感觉和AI对话来编程。作为一个纯文科生,我心想这玩意儿总该轮到我用了吧?以前看别人玩扫雷,觉得这种经典游戏只有大神才能写出来。这次我决定试试AiPy,看能不能手搓一个扫雷游戏出来。

说实话,扫雷是我小时候在Windows 95上玩的第一款电脑游戏。那时候根本不懂什么规则,就瞎点,每次点到地雷屏幕炸开花的时候,既害怕又觉得好玩。长大之后偶尔还会在网页版上玩两把,但从来没想过这东西是怎么做出来的。在我的认知里,能做出扫雷的人,至少得是计算机系毕业、会C++、懂算法的正经程序员。

但Vibe Coding这个概念出现之后,我忽然觉得——是不是可以试试?反正AI写代码,我提需求,成了就是赚到,不成也没什么损失。

💣 第一步:把AI当朋友一样聊天

我选的是之前用过几次的AiPy,因为对它的中文理解能力和操作方式比较熟悉了。完全不用写代码,连一个字母都不用敲。

我直接打开AiPy,输入了一段非常口语化的话:“帮我做一个扫雷游戏,用HTML和JavaScript写,要在浏览器里能直接打开玩。左键点开格子,右键标旗子,点到地雷就爆炸,界面要好看一点,就那种Windows经典风格但稍微精致一丢丢。”

后来我觉得光说这些可能不够清楚,又补了一句:“格子最好是9×9的,里面有10颗地雷,跟Windows经典版一样。地雷用💣这个符号显示,旗子用🚩,空白格子点开之后要自动展开相邻的空格。对了,第一次点绝对不能是地雷。”

完全没有任何技术术语。我甚至不知道HTML和JavaScript之间的区别,也不知道“自动展开相邻空格”这个功能在编程里叫什么名字。但没关系,反正它能听得懂。

💣 第二步:十几分钟,游戏出现在我眼前

AI收到需求后,没有问我任何技术问题,也没有让我“先装个Node.js”或者“初始化一下项目”这种我完全听不懂的话。它直接在后台开始规划和生成代码。对话框里刷刷刷地滚动着我看不懂的代码行,大概过了几十秒到一分钟,它弹出来一条消息:“文件已生成完毕,点击预览。”

双击那个HTML文件,一个完整的扫雷游戏就在浏览器里打开了!

那一刻的心情很难形容。屏幕上整整齐齐地排列着9×9的灰色小方块,每个方块都有立体感的凸起边缘,跟Windows经典版几乎一模一样。左上角有个小小的地雷计数器,右上角有个笑脸表情——是的,连那个经典的笑脸按钮都有。

我小心翼翼地用鼠标左键点了中间一个格子。方块翻开了,是一个数字“1”,周围没有爆炸。我又点了它旁边的几个格子,数字“1”、“2”挨个出现。右键点了一个没翻开的格子,一面红色的小旗子插了上去——标旗子功能也是好的

我越玩胆子越大,开始点那些可能有雷的区域。点到某一个格子的时候,整个屏幕突然震动了一下——是我自己手抖,因为格子翻开来是个地雷💣。然后整个棋盘瞬间全部翻开,所有地雷的位置一览无余,笑脸表情变成了“X_X”的死亡表情。游戏逻辑也是完整的,点雷就炸,炸完显示所有地雷位置。

我愣在屏幕前好几秒钟。这跟我记忆中那个Windows扫雷,除了颜色细节有点差异,其他几乎一模一样。我一个连HTML是什么都说不清楚的人,十几分钟就“做”出了一个扫雷游戏

💣 第三步:像“甲方”一样提修改意见

玩了几局之后,我觉得界面有点小,而且没有计时器。以前玩扫雷最喜欢看自己破没破纪录,没有计时器总觉得少了点什么。于是我又说:“格子调大一点,加个计时器显示用了多少秒,再加个地雷剩余数量显示。对了,第一次点的时候千万别让我踩到雷——这个刚才说了,但我再强调一下。”

AiPy没有抱怨我事儿多,立刻就去修改代码了。它先是回复了一句“好的,正在调整”,然后又进入那串我看不懂的代码滚动模式。

几分钟后,新的版本出来了:格子明显变大了,每个方块大概有40像素见方,手指点在触摸屏上也不会误触了。左上角多了一个计时器,从0开始跳动,你点开第一个格子的时候开始计时。右上角除了地雷计数器,还多了一行“剩余地雷:10”的小字,跟计数器互相呼应。

最让我感动的是我第一次点击永远安全这个功能。实现的方式是:第一次点击的格子如果恰好是地雷,它会偷偷把那颗地雷挪到别的位置去,然后才生成棋盘。所以不管你点哪个格子,第一次永远安全。这个逻辑后来我咨询了一个做程序的朋友,他说这个实现方式比重新生成棋盘要复杂一点,但用户体验更好。AiPy自己判断了这个方案更优。

玩爽了之后,我的甲方瘾上来了,又提了几个需求:“加个难度选择吧,初级9×9十颗雷,中级16×16四十颗雷,高级30×16九十九颗雷。再做个排行榜,本地保存最好成绩。还要能重新开局,不用刷新页面那种。”

这些需求我自己都觉得有点多,换做是我面对一个甲方提这么多要求,可能早就翻白眼了。但AI还是默默去改了。最后出来的版本,难度切换、排行榜、重置按钮全都有了。排行榜存在浏览器的本地存储里,刷新页面成绩也不会丢。

💣 我忍不住研究了一下它到底做了什么

全部弄完之后,我实在太好奇了,就打开那个文件夹。里面是一个HTML文件和一个JavaScript文件。我用记事本打开了那个JS文件,满屏的英文、符号、括号、分号……依旧是天文一样完全看不懂。但有一小段被用中文备注了,写着“// 游戏初始化逻辑”和“// 生成地雷并确保第一次点击安全”。

我盯着那两行中文备注看了很久。其实我什么都看不懂,但那两行备注让我觉得,这个AI是真的很贴心地想让我看懂它在干什么。虽然最终我还是看不懂,但那种“它在努力解释给我听”的感觉,有点感动。

AiPy生成的所有东西都在我电脑硬盘里,没有上传到任何地方。我把这个文件夹拷到了U盘里,发给了一个同样喜欢玩扫雷的朋友。他打开之后很惊讶,说“这做得还挺像样的啊”,问我找了哪个外包做的。我说是AI做的,他死活不信,直到我给他看了对话框记录。

💣 扫雷只是开始,我后来又搓了好几个

有了扫雷成功的经验之后,我的胆子越来越大了。后来我又用AiPy“手搓”了好几个小玩意:

一个“数独生成器”。我做一个能生成数独题目的网页,有四种难度,还能显示答案。它给我的版本不仅能出题,还能用高亮显示你填的数字和题目自带数字的区别。我打印了几份出来,周末在家做数独的时候用,感觉自己拥有了无限题库。

一个“掷骰子模拟器”。因为跟朋友玩桌游总是找不到骰子,我又做了个网页版的,可以同时掷1到6颗骰子,动画效果是骰子滚动的样子,还能计总点数。现在每次玩桌游,大家都用我的手机来掷骰子,我还挺得意的。

一个“便签墙”。就是那种可以贴便利贴的数字白板,不同颜色代表不同优先级。我用它来做工作任务的看板,每天早上把要做的事情贴上去,做完一个撕掉一个。虽然市面上有现成的软件,但用自己“做”的东西感觉完全不一样。

💣 为什么AiPy这么适合小白?

用下来之后,我觉得AiPy是我接触过的最适合纯小白的AI编程工具,原因有这么几个:

第一,对中文的理解特别精准。我说“标旗子”它知道是右键标记地雷,我说“炸了”它知道是游戏结束,我说“第一次点不能是雷”它自动理解了背后的逻辑。不需要我用任何术语去描述需求,就跟跟朋友聊天一样。

第二,生成的是可直接运行的完整文件。不像有些AI编程工具只生成代码片段,你得自己去装环境、配依赖、找运行方式。它生成的就是一个双击就能打开的HTML文件,对于零基础的人来说,这几乎是唯一的正确方式。

第三,本地部署,开源免费。不需要像某些海外工具那样每月交20美元,也不需要注册账号、上传代码。所有东西都在你自己电脑里,你对它拥有完全的控制权。对于只是想做点小东西自己用的普通人来说,零成本零门槛,这太重要了。

第四,迭代非常方便。你做好一个东西之后,随时可以继续提需求:“把按钮改大一点”、“颜色换成深色模式”、“加个音效”……它会基于已有代码继续修改,而不是重新生成一份完全不同的版本。这意味着你的小工具可以一点点进化,越来越好用。

💣 最后说点真心话

从“扫雷”到“数独”到“便签墙”,我做的这些东西在真正的程序员眼里可能都是小打小闹,不值一提。但对我来说,每一个都像是一个小小的里程碑。

不是因为我学会了编程——我到现在还是看不懂代码。而是因为我脑子里那些“如果能有一个XXX就好了”的想法,终于不用停留在想想而已的阶段了。以前冒出这种念头,接着就是“算了,我又不会写代码”。现在冒出这种念头,下一秒我已经打开AiPy开始提需求了。

这种从“无能为力”到“可以试试”的转变,带来的感觉真的很奇妙。它让我觉得,技术不再是一堵高墙,而是一扇可以推开的门。推不推得动另说,但至少你知道了门把手在哪。

如果你也是零基础、文科生、从没写过一行代码的普通人,但又很想体验一下“用自己的想法做出一个东西”是什么感觉,不妨从头开始试试。哪怕只是做一个扫雷,那种“这东西是我做出来的”的成就感,足够你开心好几天。

从“编程小白”到“做出一个游戏”,只用了十几分钟。你要是试了也做出来什么好玩的,记得来告诉我,咱们交换一下经验~