我用自然语言“捏”出了一个网页小游戏

缘起那个被“环境配置”劝退的周末作为一个产品经理兼半吊子前端爱好者我一直有个执念能不能像捏泥巴一样用最自然的方式把脑子里的画面“捏”成网页上上个周末天气热得离谱我窝在空调房里突然想复刻童年经典游戏“打砖块”。就是那种最朴素的——底部一个挡板接球上面一堆彩色砖块乒乒乓乓敲碎它们解压。说起来这游戏逻辑简单得不行但我上一次正经写Canvas还是三年前当时被坐标系和碰撞检测折磨得够呛。按老规矩我得先打开搜索引擎翻一篇靠谱的Canvas教程搞清楚怎么画矩形、怎么清屏重绘、怎么绑定鼠标事件。然后还得折腾环境——是用原生HTML直接跑还是搭个Vite要不要装ESLint一想到要重新踩一遍这些坑我果断关掉了编辑器打开了B站开始看游戏实况。这一躺平就是一下午。你可能也有过这种感觉脑子里想了一百遍“我要做出来”手上却连第一行代码都没敲。不是懒是知道这扇门后面有一堆琐碎的破事等着你还没开始就已经累了。直到我最近开始接触一种名为Vibe Coding氛围编程的新玩法。说白了就是别让工具和语法打断你的创作心流把注意力从“怎么写”转移到“要什么”。说得玄乎但真正上手试了一次之后我发现这玩意儿确实能治我的“开工拖延症”。我决定拿“打砖块”这个项目做个实验看看光靠“说话”到底能不能把游戏捏出来。开工把产品需求“扔”给AI这次我学乖了没自己新建HTML文件也没纠结是用Canvas还是SVG。我打开了一个能直接跑代码的AI工具敲下了下面这段“人话”“帮我做一个打砖块游戏的HTML文件。要求很简单底部有一个挡板用鼠标左右移动控制屏幕上方有一排彩色砖块排列整齐小球碰到砖块就反弹然后消除砖块游戏界面用暗色背景看起来现代一点别搞得像上世纪九十年代的网页。”说实话发出去的时候我心里是打鼓的。平时用ChatGPT写代码它大概率给一段“仅供参考”的示例还得我自己保存成HTML、双击打开、看控制台报错然后复制报错回去追问。来来回回折腾好几次本质上还是我在干活。但这回情况不太一样。我用的这个工具内置了Python执行环境它拿到需求之后不是丢给我一段代码让我自己跑而是自己把代码写完、自己保存成HTML文件、自己尝试在沙箱里打开预览。也就是说它把“写代码→运行→看效果”这条链路给闭环了。我要做的只是看它跑出来的结果然后说“这里不对改一下”。第一版生成出来的时候我忍不住笑了——砖块倒是排列整齐了但全是黑色的。可能它觉得“暗色背景”就得配“黑色砖块”吧逻辑鬼才。但没关系我全程没动过一行代码纯粹是旁观它干活心理负担小了很多。磨合像指挥实习生一样调教代码Vibe Coding最关键的环节其实不是“一次性生成”而是“对话式调试”。接下来半小时我和AI展开了一段“甲方VS乙方”的经典拉扯我“砖块颜色太单调了能不能随机生成鲜艳的颜色最好是渐变的那种彩虹色。”AI迅速响应把砖块的填充色从固定的#333333改成了hsl(随机色相, 80%, 60%)还顺手给每行砖块做了一个色系渐变。顶行是红色系往下依次是橙、黄、绿、蓝。视觉效果一下子高级了不少。我“球速稍微有点快新手跟不上。挡板光秃秃的不好看加点圆角吧。”AI把小球的速度从5降到了3给挡板的div加上了border-radius: 10px甚至还自动补了一个柔和的发光阴影效果。这属于“超额完成需求”了。我“球碰到左右墙壁的时候能不能反弹现在直接穿模出去了。”AI“抱歉检测到边界碰撞逻辑只处理了顶部和底部我现在补上左右边界判断。”然后自动改好了代码重新运行给我看。最让我惊艳的是它对“报错”的自动处理。后来我想加一个“子弹模式”——点击鼠标从挡板位置发射一颗子弹击碎砖块——结果代码跑崩了游戏直接白屏浏览器控制台刷了一行Uncaught TypeError: ball.hitBrick is not a function。按照以往经验我得自己看报错、找是哪行调用了这个未定义的函数、再手动修正。但这次我还没反应过来AI已经自己读取了错误日志跟我说“检测到碰撞函数未定义已重新修正逻辑请再次查看预览”然后页面自动刷新游戏恢复正常了。这种感觉就像有一个全栈工程师坐在你旁边你不用管他用的什么框架什么库你只需要描述你想要的效果他来写、他来改、他负责调试你只负责验收和提新需求。而且这工程师还不要工资任劳任怨。进阶从“能用”到“好玩”只靠动嘴基础功能稳定之后我开始“得寸进尺”了。以前自己写代码每加一个新功能都意味着改一堆耦合的逻辑想到就头大。但用这种方式我只需要“说出来”。我“现在砖块被打中就直接消失太干脆了能不能加一点粒子爆炸效果就是那种小碎片飞溅的感觉。”AI在砖块消除的位置生成了20个随机方向、随机大小、随机颜色的方块碎片并以抛物线轨迹飞散然后淡出。我什么都没做就多了个粒子系统。我“加个计分板吧每敲碎一个砖块加10分。再来个生命值球掉到底部就扣一条命三条命用完游戏结束。”AI在页面顶部生成了分数显示和三条命的心形图标。球落底之后没有直接Game Over而是重置球的位置生命值减一并显示短暂的无敌闪烁效果。我“砖块全部消除之后能不能通关庆祝一下撒个花什么的。”AI“可以检测到砖块数量为0时触发通关动画屏幕中央显示‘恭喜通关’并伴有五彩纸屑效果。”然后它真的用Canvas画了一套纸屑飘落动画。整个过程中我没有查过任何API文档没有写过一行ctx.beginPath()没有调过requestAnimationFrame的坑。我把所有脑力都花在了“这个体验好不好玩”“那个反馈够不够爽”上剩下的全交给AI去落地。完成这不仅仅是“能用”经过大概七八轮的对话调整全程大概40分钟一个功能完整、视觉效果还过得去的“打砖块”游戏诞生了。最终成品比我预想的好不少砖块分五层每层一种渐变色排列整齐小球反弹物理手感顺滑还带一点速度随角度变化的拟真感粒子爆炸效果让打击感明显提升不再是干巴巴的“消失”计分板、生命值、通关撒花、游戏结束重新开始该有的流程全都有暗色星空背景搭配霓虹风格的边框光效看起来确实挺“现代”的。我把这个HTML文件直接发给了朋友大家都不信这主要是靠“说话”做出来的。有个前端同事点开控制台看了代码结构之后说“这代码写得还挺规矩的注释都有不像AI瞎编的啊。”我只能笑笑说可能它最近进步了。三点实用心得如果你也想体验这种“言出法随”的编程快感我有几个实打实的建议第一别怕说人话但要说清楚话。把AI当成一个刚入职的初级程序员他技术底子有但不懂你的想法。不要跟他讲“用Canvas的arc方法画圆”直接说“在屏幕中央画一个白色的小球视觉上要平滑”。描述“你要什么效果”永远比描述“怎么实现”更高效。第二分步走别一口气吃成胖子。不要上来就说“做一个像原神一样的游戏”神仙也救不了。先从“做一个会动的方块”开始跑通了再加“加一个挡板”再加“碰撞反弹”再加“计分”……每一步都有可运行的结果每一步都有成就感这才是Vibe Coding的精髓。第三选对工具很重要。普通的聊天大模型只能给你代码片段你得自己复制、保存、运行、看报错、再回来追问。这个来回切换的过程本身就在打断心流。我这次用的工具能直接运行并自我纠错把“代码”瞬间变成“可视化的界面”这个反馈闭环对保持创作状态来说至关重要。它让我把精力全部放在“这个效果对不对”上而不是“代码哪里写错了”上。最后那个打砖块游戏现在已经部署在我的个人主页上了。虽然代码几乎全是AI写的但当朋友问起的时候我还是会厚着脸皮说“是我和我的AI助手一起‘设计’的。”毕竟Vibe Coding的终极奥义就是——我来定义什么是“好”AI来负责“实现”。这种感觉确实挺上头的。而且说实话当你能在40分钟内把一个童年回忆从脑子里搬到浏览器里那种满足感跟你手敲两千行代码是一样的甚至更爽因为你没有经历那些让人抓狂的配置和Debug过程全是正反馈。如果你也有一个想了很久但一直没动手的项目不管是小游戏、工具网站还是个人主页不妨试试换种方式——先别开编辑器先开口说话。说不定这个周末你也能多一个“拿得出手”的作品。