上周末我想试试手里这个顶级大模型到底有多能打随手就给它丢了一句话用HTML加JavaScript写一个类似QQ飞车的赛车小游戏要能玩。说完我就去倒水了回来发现屏幕上多了一个完整的HTML文件。双击打开一个俯视视角的赛车游戏居然真的能跑左右切道、加减速、躲车、撞车结束、重新开局一气呵成。这篇就把这次完整的AI写游戏过程拆开聊聊提示词怎么设计才容易被顶级模型理解、生成出的代码结构怎么拆、拿到手之后怎么调优以及我实际踩过的几个坑。如果你是AI编程新手或者想用AI快速做原型验证这篇应该能给你一套可以直接复制的打法。1. 为什么拿一句话写赛车游戏来考验AI1.1 小游戏恰好是大模型的综合素质考试很多人用AI写代码都停留在帮我写个函数修个bug这种级别这些任务其实测不出模型的真实水平。真正能看出大模型代码能力强不强得让它做一个需要多个模块协作的东西。赛车小游戏就是这样一个理想考题它要Canvas绘制、游戏主循环、键盘事件、状态管理、碰撞检测、随机生成、UI交互甚至还要一点简单的动画调度。这些模块不是孤立的。主循环里既要更新数据又要渲染画面键盘事件要改玩家状态碰撞检测要读取车辆坐标做判断游戏结束要把状态切回去。哪怕任何一个环节断了游戏要么不动、要么闪退、要么根本画不出来。所以模型能一次写出这种闭环逻辑说明它不是靠记忆拼接代码片段而是真的理解了游戏循环是怎么转起来的。我在实际测试里还有个观察基础模型往往能写出漂亮的静态页面代码但一遇到玩家移动循环刷新这种动态逻辑就开始露怯要么只画一帧要么死循环让浏览器卡死。顶级模型之所以表现好是因为它对状态如何随时间变化这件事的建模能力更强这在生成游戏时几乎是生死线。1.2 为什么选QQ飞车这个题材先说清楚这里说的QQ飞车不是腾讯那个端游或手游只是借用它的品类特征做个技术练习demo代码和素材都是AI现写的跟原作没有任何关系。选这个题材是因为赛车玩法非常非常适合验证AI的游戏生成能力具体有三点考虑。第一玩法核心够简单。赛车游戏最基础的动作就是移动躲避控制逻辑只有左右转向、加减速但反馈感极强。这种简单物理结构是最适合AI一次生成成功的换成RPG、FPS这种复杂题材几百行代码根本撑不起可玩的体验。第二画面表现容易做。2D俯视赛车根本不用复杂的Spritesheet用Canvas画几个圆角矩形、几条车道线再配合道路滚动就能模拟出速度感。模型不需要处理大量美术资源可以把全部能力集中在游戏逻辑上。第三竞速题材的成就感天然高。玩家看到速度表在涨、里程在加、惊险躲过一辆车这种正向反馈是写代码的人很难用形式化方法描述的体验但AI生成的游戏天然具备这种底层乐趣。1.3 先摆正预期别指望AI一次成型我得给你打个预防针标题说一句话AI写出来实际是流量性说法。真实过程是一段话给需求三到五轮对话迭代最终得到能玩的版本。第一版生成的游戏大概率能跑但手感会比较粗糙车没什么惯性碰撞判定的范围偏大敌车速度也一成不变。这不是模型不行而是提示词天然缺信息。你脑子里对好玩的体感如果不拆成具体参数写进去模型就只能给一个中规中矩的默认方案。所以这篇文章后面会专门讲拿到第一版之后怎么通过第二轮、第三轮提示词把不能玩变成有点意思。预期放对了后面每一步都不会别扭。2. 选模型、写提示词那一句话到底说了啥2.1 我用的顶级模型和一次横向对比这次我主力用的是Claude 3.5 Sonnet当时体验下来代码完成度确实是最高的手边也拿DeepSeek、豆包做了同样的测试。直接说结论顶级模型和普通模型在生成游戏这种任务上的差距不是一点点主要体现在三处。第一一次生成的完整度。顶配模型会主动把开始界面、游戏循环、结束重开这些状态全部写完而有些模型会莫名其妙漏掉重新开始按钮的逻辑一旦游戏结束就只能刷新页面。第二Canvas绘制的细节。画道路飘移效果、车体圆角、仪表盘布局顶级模型会加不少很懂视觉的细节普通模型经常是几个光秃秃的色块。第三bug密度。实测下来顶级模型的代码基本能一次跑通其他模型可能需要看Console报错再改两三轮。如果你手头没有同款模型也不用慌下面整篇文章的思路完全通用。大模型对提示词的理解逻辑是相似的你只要把需求写清楚了国产模型也能给出能玩的版本只是迭代轮数可能多一点。2.2 完整提示词原稿逐项拆解我第一次输入给模型的提示词原文是这样的你直接复制就能用用HTML CSS JavaScript写一个类似QQ飞车的赛车小游戏用Canvas实现要求 1. 俯视视角3车道公路道路向下滚动营造向前飞驰的感觉 2. 玩家赛车在画面底部可用左右方向键切换车道、上下键控制加减速 3. 路上有其他车辆从上方出现往下行驶玩家需要躲避 4. 撞到其他车辆后游戏结束页面中央显示最终得分和重新开始按钮 5. 画面要有仪表盘显示当前速度、得分、行驶距离 6. 配色要像QQ飞车那样鲜艳明快车是卡通风格 7. 所有代码放在一个html文件里双击即可在浏览器运行这里面每一句都不是废话我来逐条拆给你看。第1条俯视视角、3车道公路、道路向下滚动直接锁死了游戏形态。如果你不写视角模型有各种选择可能是横版、可能是3D伪透视后面你改起来会很难受。第2条明确控制方式把交互模型定死避免它做个鼠标点击的版本出来。第3和第4条是核心循环敌车出现、玩家躲避、碰撞结束、能重开。这四条一旦缺失游戏就等于没做。第5条关于仪表盘的细节是我刻意加的它逼着模型维护速度得分距离三套数据等于强制它把游戏状态做得更完整。第6条是审美引导AI默认配色往往很素加了鲜艳明快之后生成效果会好一个档次。最后第7条最关键一个html文件、双击可运行——这是交付约束。如果不写这条它可能给你返回一个带Node.js依赖的项目你就没法直接玩了。2.3 提示词设计的三个底层原则拆完具体提示词再往上抽象一步你会发现想让AI好好干活本质上就是三件事。第一给边界而不是给答案。你不需要教它怎么画车、怎么写碰撞函数你只需要说清楚3车道、俯视、向下滚动这些约束它自然会用最合理的实现去满足你。第二把完成标准写明白。什么叫能玩就是能开始、能操作、能结束、能重开。把这四条写进提示词模型才不会交出半成品。第三第一次只聚焦核心玩法。别上来就要求漂移、氮气、音效、道具、排行榜需求越多模型越容易在细节上翻车。先把基础驾驶和碰撞做到位第二三轮再慢慢加花活。这第三条我特别想强调。第一版我要是写类似QQ飞车要有氮气、漂移、道具赛模型大概率会生成一个看起来功能很多但哪个都不好用的东西。不如先把骨架打牢后面用迭代对话去加功能反而更快。3. 拆解AI生成的代码为什么它真的能玩3.1 一个HTML文件里装了什么AI返回的是一个完整的HTML文件看起来大概六七百行结构分成四块HTML骨架、CSS样式、Canvas画布和JavaScript逻辑。HTML骨架里除了canvas还有开始界面的遮罩层、结束界面的得分面板、重新开始按钮CSS负责把页面居中、给按钮做样式、把仪表盘固定在顶部JavaScript是重头戏被模型组织成三个区域全局状态、更新逻辑、渲染逻辑。这种组织方式很聪明跟专业游戏开发的分层思想是一致的。全局状态里放了玩家对象、敌车数组、当前速度、得分、游戏是否结束这些变量。更新逻辑负责改变状态比如按下右键让player.x变大敌车每帧往下移几像素。渲染逻辑只负责把当前状态画到Canvas上。状态变了画面跟着变循环转起来游戏就活了。我还注意到AI自己加了不少代码注释每个区块上面都写了中文注释说明功能这对后面调试非常有帮助。拿到代码别急着跑先大概扫一眼结构你就知道该去哪儿改参数了。3.2 游戏主循环与核心机制拆解整个游戏的心脏是requestAnimationFrame驱动的gameLoopAI生成的核心逻辑精简后大概是这个样子let player { x: 300, y: 600, w: 50, h: 80, speed: 5 }; let enemies []; let score 0; let gameOver false; let roadOffset 0; function update() { // 道路滚动模拟前进 roadOffset player.speed; // 玩家受键盘控制 if (keys[ArrowLeft] player.x 30) player.x - 6; if (keys[ArrowRight] player.x canvas.width - 80) player.x 6; if (keys[ArrowUp]) player.speed Math.min(player.speed 0.1, 12); if (keys[ArrowDown]) player.speed Math.max(player.speed - 0.1, 3); // 随机生成敌车 if (Math.random() 0.02 enemies.length 6) { enemies.push(createEnemy()); } // 敌车移动 enemies.forEach(e e.y e.speed); // 碰撞检测 enemies.forEach(e { if (isCollide(player, e)) { gameOver true; showGameOver(score); } }); // 计分 score player.speed * 0.1; } function render() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawRoad(); // 画路面、车道线、路肩 drawPlayer(); // 画玩家的车 drawEnemies(); // 画敌车 drawUI(); // 画速度、得分、里程 } function gameLoop() { update(); render(); if (!gameOver) requestAnimationFrame(gameLoop); }你会发现这套逻辑非常标准。update负责算render负责画gameLoop把两者绑在一起反复跑。碰撞检测用的是矩形相交判断模型会在玩家车和敌车外面各留一点安全边距用两组坐标做区间比较这样视觉上还没碰到就算撞了反而很合理。有个细节值得提模型把敌车生成概率控制成了每帧2%概率、总量不超过6辆避免一下子刷出一堆车导致没法玩。这种参数不是提示词里要求的是模型自己根据游戏常识调出来的这就是顶级模型的厉害之处。3.3 运行前置条件与能玩判定标准运行这个游戏没有任何门槛你只需要把AI输出的HTML代码复制到文本文档里保存成index.html然后双击用浏览器打开就行。不需要装Node、不需要启动服务器、不需要下载任何依赖因为所有代码都在同一个文件里。我建议你拿到文件后按四条标准快速验证一遍打开页面能看到开始界面按空格或回车能开始游戏左右键能控制车辆移动、上下键有效果撞车后弹出结束面板且重新开始按钮能正常重置游戏。这四条全过就说明已经达到了能玩的最低标准。后面想更好玩就进入迭代调优阶段。4. 实操全流程从生成到跑顺4.1 完整步骤复制、保存、打开、试玩具体操作流程没有什么玄学我把它拆成四个动作。第一步在AI对话框里输入前面那段提示词等它生成代码。第二步点代码块右上角的复制按钮把完整HTML代码复制下来。注意我强调过一定要等它把内容全部输出完再复制有些模型长代码会被截断你可别只复制了一半。第三步打开系统自带记事本或者VS Code这种编辑器粘贴代码另存为index.html。这里有个坑文件编码一定要选UTF-8否则网页里的中文注释和按钮文字会变成乱码。第四步双击html文件默认浏览器就会把它打开游戏直接启动。如果你想改游戏不用在网页里改随时回到编辑器改代码里的参数再保存、刷新浏览器即可。整个循环就是我说的改代码-刷新-试玩三秒一轮效率非常高。4.2 第一次试玩实录哪里能用、哪里闹心我是抱着肯定能跑但一定很糙的心态去试的。说实话第一版能跑还挺惊喜但玩了半分钟就发现了几个明显的问题。第一个是车的操控手感非常硬左右键一按车就跳一个车道没有中间过渡总感觉像瞬移而不是转弯。第二个是碰撞判定偏大明明看起来还有半个车身的距离居然就判定撞上了体验上像被空气撞了。第三个是敌车速度恒定从头到尾一个样刚开始觉得还行玩到后面就有点无聊。这些问题本质上不是bug而是参数设置问题。AI给了一个默认值但默认值不等于你玩着舒服的值所以下一步就是针对性调参。4.3 三轮迭代调优手感、难度和性能第一轮先调手感。我给它发了一句现在车的移动太生硬希望有加速度和摩擦力左右移动时车体有倾斜效果看起来更像转弯。模型很快改出了带惯性的版本玩家车不再瞬间移动而是有一个x方向的速度再通过加减速度来控制同时增加了倾斜角度的绘制。这一轮改完操控立刻舒服了很多有了点真实车的感觉。第二轮调难度曲线。我要求敌车速度随游戏时间逐渐升高而且当玩家分数超过500时生成敌车的概率增加。模型做了个动态难度系统游戏全局记录elapsedTime用它去乘一个基础速度系数同时还把生成概率从0.02逐步提高到0.04。改完之后游戏就变成了越玩越刺激分数高起来的紧迫感非常明显。第三轮是性能优化。虽然一个小游戏不至于卡顿但我观察到玩久了内存可能会涨因为敌车数组只增不减。我提醒模型离开屏幕的敌车要销毁避免数组无限变大它马上在移动逻辑里加了过滤条件把y大于canvas.height的敌车从数组里移除。这个改动虽然玩家感知不到但页面稳定性提升很明显长时间挂着也不会发烫。三轮改完这个一句话生成的游戏已经达到了能拿得出手的水平发到群里被朋友问了好几次在哪玩的。5. 踩坑记录与继续扩展的方向5.1 常见问题速查表这几次折腾下来我把最容易遇到的一批问题整理成了一个表格你照着排查就行。现象原因解决办法页面打开一片黑JS运行时错误最常见是代码被截断打开浏览器F12看Console直接让AI修复报错行按方向键没反应键盘事件监听的不是window或按键冲突让AI检查addEventListener绑定的对象统一改为window按键一直加速停不下来只写了keydown没写keyup状态没复位让AI在keyup里释放对应按键的状态没碰到车也算撞碰撞盒比车体大太多让AI把碰撞盒的判定区域缩小留5-10px余量即可游戏结束点击重开无效重置函数没有把数组和分数清空让AI检查重置逻辑确保enemies数组、score、gameOver全部归零中文显示成了方块文件编码不是UTF-8用编辑器另存为时选UTF-8或补上meta charsetUTF-8标签对照着这个表绝大多数翻车现场都能在十分钟内救回来。我遇到过最离谱的一次是模型生成的代码里有一个多余的}没闭合整个脚本直接挂掉。当时我第一反应是让AI自己检查它一眼就找出来了这也算AI调试AI的典型场景。5.2 几个多数人不注意的避坑细节第一个细节控制好对话上下文。如果你在同一个对话里连续生成好几个版本的代码模型可能会被之前的旧代码干扰生成缝合怪。我建议每轮迭代都明确说基于上一个版本修改只改我要求的部分。第二个细节尽量不要在同一个提示词里混合太多冲突要求比如又要有漂移手感又要车辆完全贴地AI会做出很奇怪的妥协方案。第三每次试玩前关闭浏览器旧的标签页重新打开避免旧JS缓存在内存里干扰新代码。还有一点我觉得很实用让AI帮你写代码的时候让它顺带写清楚关键参数都放在文件顶部。这样你之后改手感、改难度都只需要动文件头部那几行不用在一堆代码里像大海捞针一样找参数。5.3 还能往哪里扩展游戏能玩了这只是起点。后面的扩展空间其实非常大我列几个我个人觉得特别适合继续折腾的方向。第一个方向加游戏系统。氮气加速、漂移蓄力、道具箱子、多张地图、AI对手车这些都是QQ飞车类玩法的经典元素每个都可以单独作为一个主题再去让AI实现。比如你让它加一个氮气系统按住Shift消耗能量加速能量条通过漂移获得这又是一个完整的迭代故事。第二个方向把AI写的小游戏当原型再去接真实游戏引擎。如果你真有做完整游戏的打算可以用这个HTML版本当需求文档把玩法和参数梳理清楚再用Godot或Unity重做效率会高很多。第三个方向是往AI Agent方向走把提示词写游戏变成Agent自主调优游戏参数让大模型自己跑试玩、自己分析手感并修改代码这套思路已经有了实践雏形但那就是另一篇长文了。最后分享一个我个人的体会顶级模型的价值不在于替你写一个项目而是帮你在几分钟内把模糊的想法变成一个可以上手试错的运行体。从一句话到能玩真正的重量不在这句话而在你怎么把脑子里的好玩翻译成模型能理解的参数和规则。这个翻译能力才是AI时代最值得练的基本功。建议你也找个周末拿身边的大模型试试先从一句帮我写个能玩的赛车游戏开始。