AI辅助编程实战｜从零开发JS 2048数字小游戏

专栏逐辉者・VibeCoding前言前面的赛车竞速项目我们练习了多系统协同的卷轴游戏开发。本篇是《逐辉者・VibeCoding》专栏的第八个实战项目经典2048数字益智小游戏。2048是典型的网格滑动合并类游戏核心在于二维数组操作、定向滑动逻辑、合并规则控制、全局状态判定非常锻炼向AI描述「数组算法」和「状态流转」的能力。全程依然不用手写完整代码只需要把滑动规则、合并逻辑、胜负判定讲透让AI完成编码我们负责设计、验收和迭代。读完这篇你将得到一个还原经典玩法的网页版2048同时掌握网格滑动合并类游戏的AI需求描述方法。一、项目最终效果这是一个纯原生HTMLCSSJavaScript实现的网页2048游戏无需安装环境、无需第三方库单个HTML文件双击即可运行。核心功能键盘方向键控制整体滑动、相同数字碰撞合并、合并自动计分、随机生成新数字、满盘无法移动判定结束、合成2048判定胜利经典2048配色风格圆角方块数字层级清晰操作流畅技术栈原生HTML CSS JavaScript基于DOM网格实现零依赖适合人群前端入门、想学习网格算法开发、想掌握AI描述数组逻辑的开发者项目价值掌握二维数组滑动、单次合并规则、全局状态判定、随机生成逻辑的AI实现方式二、第一步项目需求精细化拆解在写提示词前依然从界面、逻辑、规则、代码规范四个维度拆解需求所有尺寸、颜色、概率、合并规则全部量化可验证尤其是滑动合并逻辑必须明确「单次滑动每个数字仅合并一次」的核心规则避免AI出现连续合并的经典bug。1. 界面UI需求整体页面水平居中距离页面顶部30px页面背景色#faf8ef使用系统无衬线字体游戏主容器宽高420px×460px顶部信息栏高60px下方4×4网格区域400px×400px整体带2px #bbada0边框背景色#bbada0顶部信息栏左侧显示当前分数右侧显示历史最高分分数标题小字12px #776e65分数数字大字28px加粗 #ffffff分数块背景色#bbada0圆角4px内边距5px 10px右上角放置「重新开始」按钮背景色#8f7a66白色文字圆角4pxpadding 8px 12px网格格子4行4列共16个格子每个格子宽80px、高80px圆角4px格子之间间距10px空格子背景色#cdc1b4数字方块样式数字居中显示字号32px加粗严格遵循经典2048配色2背景#eee4da文字#776e654背景#ede0c8文字#776e658背景#f2b179文字#ffffff16背景#f59563文字#ffffff32背景#f67c5f文字#ffffff64背景#f65e3b文字#ffffff128背景#edcf72文字#ffffff256背景#edcc61文字#ffffff512背景#edc850文字#ffffff1024背景#edc53f文字#ffffff2048背景#edc22e文字#ffffff游戏结束/胜利弹出居中提示框半透明黑色遮罩白色背景显示对应结果和最终分数带「重新开始」按钮胜利提示框增加「继续游戏」按钮2. 核心游戏逻辑初始化页面加载完成后在4×4网格中随机两个不同的空格子生成初始数字数字生成概率90%概率生成210%概率生成4初始分数为0滑动控制键盘上下左右方向键控制整体网格向对应方向滑动以左滑为例单行处理逻辑提取该行所有非零数字去除中间的空格从左到右遍历数字相邻两个数字相同则合并合并后数值翻倍合并后的数值加到总分中单次滑动规则每个数字在一次滑动中只能合并一次合并后跳过下一个数字继续向后遍历合并完成后末尾补0保持该行4个元素右滑、上滑、下滑逻辑对应处理方向相反新数字生成每次滑动后如果棋盘发生了变化有数字移动或合并则在随机一个空格子生成新数字新数字概率90%为210%为4如果滑动后棋盘没有任何变化则不生成新数字也不计入操作分数规则每次合并数字将合并后的数值加到当前总分中实时更新当前分数显示同时更新历史最高分最高分使用本地存储保存刷新页面不丢失3. 胜负判定规则胜利判定棋盘上出现数值为2048的方块时判定为胜利弹出胜利提示框显示恭喜文字和当前分数提供「继续游戏」按钮点击后关闭弹窗可继续滑动合成更大数字提供「重新开始」按钮点击重置游戏失败判定棋盘所有格子都被填满且上下左右四个方向都无法再合并没有相邻相同数字时判定游戏结束弹出失败提示框显示「游戏结束」和最终分数只能点击「重新开始」重置游戏游戏结束后方向键操作失效只能点击按钮重置4. 代码规范要求使用二维数组存储棋盘数据每个元素存储对应格子的数值0代表空格变量使用驼峰命名语义清晰禁止使用单字母无意义变量核心功能拆分为独立函数init初始化、generateNum生成数字、slide滑动处理、merge合并计算、checkMove判断是否可移动、checkWin判断胜利、checkOver判断结束、gameOver游戏结束滑动逻辑、合并规则、胜负判定等核心部分添加详细中文注释兼容Chrome、Edge主流浏览器代码无报错双击HTML文件即可运行三、第二步第一轮Prompt → 生成基础版项目把拆解好的需求整理成全参数量化的结构化提示词直接复制发给AI即可生成基础可运行版本。 Prompt设计思路先定数据结构明确二维数组存棋盘数值0代表空格AI会按结构实现逻辑不容易乱合并规则讲死明确「单次滑动每个数字仅合并一次」这是2048最核心的规则也是AI最容易写错的地方视觉严格还原颜色、尺寸、间距全部给出精确值还原经典2048的视觉体验生成有条件只有棋盘发生变化才生成新数字避免无效操作也刷出新数字完整第一轮超详细Prompt直接复制使用请使用原生HTML、CSS、JavaScript编写一款经典2048数字小游戏禁止使用任何第三方框架基于DOM元素实现网格代码保存为单个HTML文件即可直接运行。 严格按照以下所有需求实现不要擅自修改玩法、样式和规则 【界面UI要求 精确到像素与色值】 1. 整体页面body背景色#faf8ef所有内容水平居中距离页面顶部30px字体使用微软雅黑或系统无衬线字体 2. 游戏主容器宽高420px × 460px顶部信息栏高60px下方网格区域400px × 400px整体带2px #bbada0 solid边框背景色#bbada0圆角6px 3. 顶部信息栏 - 左侧当前分数块、右侧历史最高分块并排中间留白 - 分数块背景色#bbada0圆角4px内边距5px 10px标题小字12px #776e65数字大字28px加粗 #ffffff - 右上角放置「重新开始」按钮背景色#8f7a66白色文字圆角4pxpadding 8px 12pxcursor: pointer 4. 游戏网格 - 4行4列共16个格子每个格子宽高80px圆角4px格子之间间距10px - 空格子背景色#cdc1b4 - 数字方块居中显示字号32px加粗 - 数字颜色与背景严格对应 2→背景#eee4da文字#776e65 4→背景#ede0c8文字#776e65 8→背景#f2b179文字#ffffff 16→背景#f59563文字#ffffff 32→背景#f67c5f文字#ffffff 64→背景#f65e3b文字#ffffff 128→背景#edcf72文字#ffffff 256→背景#edcc61文字#ffffff 512→背景#edc850文字#ffffff 1024→背景#edc53f文字#ffffff 2048→背景#edc22e文字#ffffff 5. 提示框居中弹出模态框半透明黑色遮罩白色背景圆角6px显示游戏结果和最终分数底部按钮胜利框有「继续游戏」「重新开始」两个按钮失败框只有「重新开始」按钮 【核心游戏逻辑 规则精确完整】 1. 初始化与生成机制 - 页面加载完成后在4×4网格中随机两个不同的空格子生成初始数字 - 数字生成概率90%概率生成210%概率生成4 - 初始分数为0历史最高分从浏览器localStorage读取没有则为0 2. 滑动与合并逻辑 - 键盘上下左右方向键控制整体网格向对应方向滑动 - 单行/单列处理逻辑以左滑为例 1. 提取该行所有非零数字去除空格形成紧凑数组 2. 从左到右遍历紧凑数组相邻两个数字相同则合并合并后数值翻倍合并后的数值加到总分中 3. 单次滑动限制每个数字在一次滑动中只能合并一次合并后跳过下一个数字继续向后遍历 4. 合并完成后末尾补0保持该行4个元素长度 - 右滑、上滑、下滑对应调整处理方向规则完全一致 - 每次滑动后对比滑动前后的棋盘数据如果发生了变化则在随机一个空格子生成新数字如果没有任何变化则不生成新数字 - 新生成数字概率90%为210%为4 3. 分数系统 - 每次合并数字将合并后的数值加到当前总分中 - 实时更新页面当前分数显示 - 当前分数超过历史最高分时更新历史最高分并写入localStorage本地存储 【胜负判定规则】 1. 胜利判定棋盘上出现数值为2048的方块时立即判定胜利 - 弹出胜利提示框显示恭喜文字和当前分数 - 点击「继续游戏」关闭弹窗保留当前棋盘可继续滑动合成更大数字 - 点击「重新开始」完整重置游戏 2. 失败判定棋盘所有格子都填满且上下左右四个方向都无法再合并没有相邻相同数字时判定游戏结束 - 弹出失败提示框显示「游戏结束」和最终分数 3. 游戏结束后方向键操作失效只能通过按钮重置游戏 4. 点击「重新开始」按钮清空棋盘、重置分数、重新生成两个初始数字完全新开一局 【代码规范要求】 1. 使用二维数组存储棋盘数据每个元素存储对应格子的数值0代表空格 2. 变量使用驼峰命名语义清晰禁止使用单字母无意义变量 3. 核心功能拆分为独立函数init()初始化、generateNum()生成数字、slide()滑动处理、merge()合并计算、checkMove()判断是否可移动、checkWin()判断胜利、checkOver()判断结束、gameOver()游戏结束 4. 滑动逻辑、合并规则、胜负判定等核心部分添加详细中文注释 5. 兼容Chrome、Edge主流浏览器代码无报错双击HTML文件即可运行四、第三步测试初版代码 → 排查经典问题将AI生成的代码保存为2048.html双击打开运行测试。2048类项目AI初版通常会出现以下5个共性问题按清单逐一排查即可问题1一次滑动连续合并现象一行2 2 2 2左滑后直接变成8 0 0 0正确应该是4 4 0 0原因AI没有实现「单次滑动每个数字仅合并一次」的规则合并后的数字又参与了下一次合并快速验证方法摆成2 2 2 2的一行向左滑动看结果是4 4还是8问题2滑动后必生成新数字现象贴着边界按对应方向键明明没动也会生成新数字很快就满盘了原因AI没有判断滑动前后棋盘是否变化只要按方向键就生成新数字快速验证方法棋盘已经靠最左了连续按左键看会不会不断生成新数字问题3游戏结束判定错误现象棋盘还没满就提示游戏结束或者满盘但还能合并却不提示结束原因结束判定逻辑不完整只判断了棋盘是否填满没有判断四个方向是否都无法合并快速验证方法故意填满棋盘但留一对相邻相同数字看会不会判定结束问题4数字样式不匹配现象所有数字颜色都一样或者背景色不对不是经典2048的配色原因AI没有严格按照给定的色值实现自己随便用了颜色快速验证方法对比经典2048的配色看2、4的文字颜色8以上的背景色是否正确问题5最高分不保存现象刷新页面后最高分清零没有保存原因AI没有实现localStorage存储逻辑或者只更新了页面显示没写入存储快速验证方法玩出高分刷新页面看最高分还在不在五、第四步第二轮Prompt → 修复所有问题生成最终版把排查到的问题整理成精准到修复标准的修复提示词发给AI基于上一版代码修改一步到位生成零BUG最终版。 修复Prompt编写技巧合并逻辑给算法明确遍历方式、合并后跳过下标从代码层面限定单次合并变化判断滑动前后深拷贝对比数组完全一致则不生成新数字结束判定全方向四个方向都检测可移动性全部不可移动才判定结束完整第二轮超详细修复Prompt直接复制使用基于你刚刚生成的2048游戏代码进行全面BUG修复和体验优化严格按照以下要求逐项修改输出完整的修改后代码不得遗漏任何一项 【核心BUG修复 每条明确修复标准】 1. 修复一次滑动连续合并的问题 - 严格执行单次滑动单次合并规则遍历合并时每合并一对数字索引2跳过已合并的下一个数字 - 保证一行2 2 2 2左滑结果为4 4 0 0而不是8 0 0 0 - 四个方向的合并都遵循此规则 2. 修复滑动无变化也生成新数字的问题 - 每次滑动前深拷贝保存当前棋盘状态 - 滑动处理完成后对比新旧棋盘数组 - 只有棋盘发生变化时才生成新数字完全没有变化则不生成也不算一次有效操作 3. 修复游戏结束判定不准确的问题 - 游戏结束判定条件棋盘所有格子非空并且上下左右四个方向都无法进行合并 - 实现单独的可移动检测函数分别检测四个方向是否还能移动或合并 - 四个方向都不可移动时才判定游戏结束 - 棋盘没满或者满了但还能合并都不触发结束 4. 修复数字配色不标准的问题 - 严格按照需求中的色值表实现每个数字的背景色和文字色 - 2和4的文字为深灰色#776e658及以上为白色 - 背景色逐级渐变和经典2048完全一致 5. 修复最高分不保存的问题 - 游戏初始化时从localStorage读取历史最高分没有则为0 - 每次分数更新时判断当前分数是否大于最高分是则更新最高分并写入localStorage - 刷新页面最高分不丢失 【体验优化 细节逐项落实】 1. 优化滑动响应手感按键反应流畅无延迟 2. 优化数字方块显示居中对齐大小均匀 3. 优化提示框显示居中清晰按钮点击反馈明确 4. 重新开始按钮重置彻底无残留状态 【代码结构优化】 1. 保留二维数组数据结构和所有独立函数封装 2. 保留所有中文注释核心逻辑注释清晰准确 3. 代码结构分层清晰便于后续拓展撤销、自定义棋盘等功能 4. 确保最终代码零报错保存为HTML文件双击即可正常运行六、第五步进阶拓展Prompt按需升级项目基础版完成后可以用以下独立提示词继续迭代丰富项目功能提升作品集的含金量。每个拓展都是独立的Prompt可以按需叠加。拓展1撤销一步功能作品集价值回溯机制游戏体验大幅提升在现有2048基础上增加撤销一步功能。顶部增加「撤销」按钮点击后回退到上一步的棋盘状态和分数。最多保留1步历史记录撤销后不能再撤销。拓展2多难度选择作品集价值多尺寸适配游戏完整度提升增加难度选择功能提供3×3简单、4×4经典、5×5困难三个档位。切换后自动重置游戏对应生成不同大小的棋盘胜利目标对应调整3×3到10245×5到4096。拓展3主题切换作品集价值多套视觉样式产品感更强增加主题切换功能提供经典色、深色、粉嫩三套主题。每套主题对应不同的棋盘背景、方块配色。顶部增加主题切换按钮点击即时切换保留当前游戏进度。拓展4自动保存进度作品集价值本地持久化工具属性更强增加自动保存进度功能。每次滑动后自动将当前棋盘状态、分数写入localStorage。页面加载时如果有保存的进度提示「继续上次游戏」选择则恢复进度选择新游戏则重置。七、本地运行详细步骤操作步骤新建文件在电脑桌面空白处右键选择「新建」→「文本文档」粘贴代码打开新建的文本文档把AI最终生成的完整代码全部粘贴进去保存文件点击左上角「文件」→「另存为」文件名填写2048.html编码选择「UTF-8」点击保存运行游戏找到保存好的HTML文件双击即可用默认浏览器打开游戏操作方式按上下左右方向键滑动数字相同数字合并翻倍合成2048获胜满盘无法合并则失败常见踩坑说明注意文件后缀避免保存成2048.html.txt导致双击打不开可在文件夹「查看」选项里开启「文件扩展名」编码必须选UTF-8否则中文文字、按钮文字会出现乱码按键没反应先检查确认当前页面是激活状态点击一下游戏区域再按方向键八、本篇核心总结2048是非常经典的数组算法类游戏虽然玩法简单但滑动合并的逻辑细节很多AI辅助开发的核心流程依然通用这也是《逐辉者・VibeCoding》专栏反复强调的可复用方法论规则先讲死核心玩法规则必须在需求里明确到算法层面比如「单次滑动仅合并一次」不能只说「相同数字合并」不然AI大概率写错状态做对比涉及生成、判定的地方都用前后状态对比来判断避免无效操作触发反馈边界全遍历全局判定类逻辑要遍历所有可能的情况比如四个方向都检测不能只检测一个方向就下结论细节定体验配色、动画、手感这些细节需求里给的越精确最终成品越接近经典作品的体验掌握这套方法你可以用AI快速开发出各类益智、数字类小游戏持续丰富自己的作品集。