AI辅助编程实战｜从零开发JS打砖块小游戏

专栏：逐辉者・AI 造码集

前言

前面的贪吃蛇、拼图项目，我们分别练习了网格逻辑与拖拽交互。本篇是《逐辉者・AI 造码集》专栏的第三个实战项目：经典网页打砖块小游戏。

打砖块是非常经典的Canvas游戏，核心在于物理反弹逻辑、多元素碰撞检测、层级状态管理，相比前两个项目逻辑更复杂，也更能锻炼你向AI描述「物理规则」和「碰撞判定」的能力。全程依然不用手写完整代码，只需要把规则讲透，让AI完成编码，我们负责设计、验收和迭代。

读完这篇，你将得到一个可直接运行、带完整物理反弹效果的打砖块游戏，同时掌握碰撞类游戏的AI需求描述方法。

一、项目最终效果

这是一个纯原生HTML+CSS+JavaScript实现的Canvas打砖块游戏，无需安装环境、无需第三方库，单个HTML文件双击即可运行。

• 核心功能：鼠标控制底部挡板、小球物理反弹、撞击击碎砖块、实时计分、球掉落判定失败、全清砖块判定胜利
• 技术栈：原生HTML + CSS + JavaScript，基于Canvas 2D绘制，零依赖
• 适合人群：前端入门、想学习Canvas游戏开发、想掌握AI描述物理逻辑的开发者
• 项目价值：掌握碰撞类游戏的需求描述方法，学习AABB碰撞检测、物理反弹、多元素状态管理的AI实现方式

二、第一步：项目需求精细化拆解

在写提示词前，依然从界面、逻辑、规则、代码规范四个维度拆解需求，所有规则量化可验证，尤其是物理反弹部分，必须把「怎么撞、怎么弹」讲清楚，避免AI写出的反弹逻辑不符合预期。

1. 界面UI需求

• 整体页面水平居中，距离页面顶部30px，页面背景色#f5f5f5，使用系统无衬线字体
• 游戏画布精确为480px × 600px，2px深灰色#333实线边框，纯黑色#000背景
• 底部挡板：白色矩形，宽80px、高12px，圆角2px，位于画布底部上方20px处
• 小球：白色实心圆，半径8px，初始位置在挡板正上方
• 砖块：共5行8列，每块宽50px、高20px，砖块之间横向间距5px、纵向间距8px，整体居中排列在画布顶部；每行颜色不同，从上到下依次为#e74c3c、#f39c12、#2ecc71、#3498db、#9b59b6
• 画布左下角显示实时分数，字号18px，白色文字，格式为「分数：0」
• 游戏结束弹出居中提示框，显示结果（胜利/失败）和最终分数，带「重新开始」按钮

2. 核心游戏逻辑

• 挡板控制：鼠标在画布内左右移动时，挡板跟随鼠标水平移动，挡板中心对齐鼠标位置；挡板不能移出画布左右边界
• 小球初始状态：游戏开始后，小球从挡板正上方发射，初始向右上方45°角移动，移动速度适中
• 墙壁反弹：小球碰到画布左边界、右边界、上边界时，自动反弹，对应方向速度反向
• 挡板反弹：小球碰到挡板时，垂直方向速度反向；同时根据撞击挡板的位置调整水平方向速度：撞在挡板左侧向左偏，撞在右侧向右偏，撞在中间垂直反弹，角度平滑过渡
• 砖块碰撞：小球碰到砖块时，垂直方向速度反向，对应砖块被击碎消失，分数+10；一次碰撞只击碎一块砖
• 游戏全程自动运行，无需手动发射

3. 胜负判定规则

• 失败判定：小球掉出画布底部边界时，判定游戏失败，弹出提示框显示「游戏失败」和最终分数
• 胜利判定：所有砖块全部被击碎消失时，判定游戏胜利，弹出提示框显示「恭喜通关！」和最终分数
• 游戏结束后小球停止运动，点击提示框的「重新开始」按钮，重置所有状态，新开一局

4. 代码规范要求

• 变量使用驼峰命名，语义清晰，禁止使用单字母无意义变量
• 核心功能拆分为独立函数：初始化函数、绘制函数、碰撞检测函数、游戏结束函数
• 碰撞检测、反弹逻辑等核心部分添加详细中文注释
• 兼容Chrome、Edge主流浏览器，代码无报错，双击HTML文件即可运行

三、第二步：第一轮Prompt → 生成基础版项目

把拆解好的需求整理成全参数量化的结构化提示词，直接复制发给AI，即可生成基础可运行版本。

💡 Prompt设计思路：

1. 明确技术方案：指定用Canvas 2D实现，避免AI用DOM拼元素，性能差且碰撞逻辑容易出错
2. 物理规则量化：反弹不是简单的「方向反向」，挡板反弹要讲清楚「撞击位置影响角度」，这是打砖块好不好玩的核心
3. 元素全部量化：挡板、球、砖块的尺寸、位置、颜色、数量全部给出精确值，AI直接按数值实现
4. 碰撞分层级：墙壁、挡板、砖块三类碰撞分开描述，优先级明确，避免逻辑混乱

完整第一轮超详细Prompt（直接复制使用）

请使用原生HTML、CSS、JavaScript编写一款网页打砖块小游戏，禁止使用任何第三方框架，基于Canvas 2D实现绘制，代码保存为单个HTML文件即可直接运行。 严格按照以下所有需求实现，不要擅自修改玩法、样式和物理规则： 【界面UI要求 精确到像素】 1. 整体页面：body背景色#f5f5f5，所有内容水平居中，距离页面顶部30px，字体使用微软雅黑或系统无衬线字体 2. 游戏画布：宽高精确480px × 600px，2px深灰色#333 solid边框，纯黑色#000背景 3. 底部挡板：白色矩形，宽80px、高12px，圆角2px，初始位置在画布底部向上20px处，水平居中 4. 小球：白色实心圆，半径8px，初始位置在挡板正上方，紧贴挡板 5. 砖块：共5行8列，每块宽50px、高20px；横向砖块间距5px，纵向行间距8px；整体水平居中排列在画布顶部，距离画布顶部30px；每行颜色不同，从上到下依次为#e74c3c、#f39c12、#2ecc71、#3498db、#9b59b6 6. 分数显示：画布左下角显示实时分数，字号18px，白色文字，格式为「分数：0」 7. 结束提示框：居中弹出模态框，半透明黑色遮罩，白色背景，显示游戏结果（胜利/失败）和最终分数，底部一个「重新开始」按钮 【核心游戏逻辑 物理规则明确】 1. 挡板控制 - 鼠标在画布内水平移动时，挡板跟随鼠标移动，挡板中心与鼠标x坐标对齐 - 挡板限制在画布内部，不能移出左右边界，碰到边界停止 - 仅水平移动，垂直方向固定位置 2. 小球运动 - 游戏加载完成后自动发射小球，初始向右上方45°角移动，移动速度适中 - 使用x方向速度dx、y方向速度dy控制移动，每帧更新位置 3. 碰撞反弹规则 - 墙壁碰撞：小球碰到画布左边界、右边界，dx反向；碰到上边界，dy反向 - 挡板碰撞：小球碰到挡板时，dy反向（向上弹）；同时根据撞击点在挡板的位置调整dx：撞击点越靠左，dx越向左偏；撞击点越靠右，dx越向右偏；正中时dx为0，垂直反弹；角度平滑过渡，不生硬 - 砖块碰撞：小球碰到任意砖块时，dy反向；对应砖块立即消失；每击碎一块砖块，分数加10，实时更新分数显示；一次碰撞只处理一块砖块 【胜负判定规则】 1. 失败判定：小球y坐标超出画布底部边界时，判定游戏失败 2. 胜利判定：所有砖块全部被击碎消失时，判定游戏胜利 3. 游戏结束后立即停止小球运动，弹出对应结果的提示框，显示最终分数 4. 点击提示框的「重新开始」按钮，完整重置所有状态：挡板归位、小球归位、砖块全部恢复、分数清零、重新开始游戏 【代码规范要求】 1. 变量使用驼峰命名，语义清晰，禁止使用单字母无意义变量 2. 核心功能拆分为独立函数：init()初始化、draw()绘制、checkCollision()碰撞检测、gameOver()游戏结束 3. 碰撞检测、反弹逻辑等核心部分添加详细中文注释 4. 兼容Chrome、Edge主流浏览器，代码无报错，双击HTML文件即可运行

四、第三步：测试初版代码 → 排查经典问题

将AI生成的代码保存为breakout.html，双击打开运行测试。打砖块类项目AI初版通常会出现以下5个共性问题，按清单逐一排查即可：

问题1：小球穿墙/穿挡板/穿砖块

• 现象：小球速度快的时候会直接穿过挡板或者砖块，不触发反弹，直接穿过去
• 原因：AI写的碰撞检测是「每帧结束后判断位置」，当速度快于物体尺寸时，一帧就直接穿过去了，没有检测到碰撞；属于经典的「隧道效应」
• 快速验证方法：把球对准挡板边缘，快速移动挡板，看会不会出现球穿过去的情况

问题2：挡板反弹角度不对

• 现象：小球撞挡板永远垂直反弹，或者不管撞在哪都只有固定角度，没有左右偏移，玩法很死板
• 原因：AI只做了简单的dy反向，没有实现「根据撞击位置调整水平速度」的逻辑，或者角度计算错误
• 快速验证方法：用挡板最左侧接球，看小球会不会向左反弹；用最右侧接球，看会不会向右反弹

问题3：挡板移出画布边界

• 现象：鼠标移到画布外面，挡板也跟着移出画布，消失不见了
• 原因：AI没有加边界限制逻辑，挡板x坐标没有限制在0到画布宽度之间
• 快速验证方法：把鼠标快速移到画布外面，看挡板会不会跟着出去

问题4：一次碰撞击碎多块砖

• 现象：小球碰到砖块交界处，一次同时击碎两块甚至更多砖块
• 原因：碰撞检测循环遍历所有砖块，一次碰撞触发了多个砖块的销毁逻辑
• 快速验证方法：让小球斜着撞两块砖的缝隙，看会不会一次碎两块

问题5：游戏结束不停止/重复弹窗

• 现象：球掉出去后还在继续运动，或者失败弹窗无限弹出
• 原因：游戏结束后没有停止动画帧循环，或者结束标记没有生效，反复触发结束判定
• 快速验证方法：故意让球掉下去，看弹窗会不会只弹一次，小球会不会停止运动

五、第四步：第二轮Prompt → 修复所有问题，生成最终版

把排查到的问题整理成精准到修复标准的修复提示词，发给AI基于上一版代码修改，一步到位生成零BUG最终版。

💡 修复Prompt编写技巧：

1. 碰撞问题直接给方案：明确用AABB包围盒检测，并且说明要处理高速穿透问题
2. 反弹逻辑给算法：挡板反弹的角度计算方式直接描述清楚，不让AI自己瞎想
3. 边界、结束状态这类基础问题，明确「限制范围」「停止循环」的操作

完整第二轮超详细修复Prompt（直接复制使用）

基于你刚刚生成的打砖块游戏代码，进行全面BUG修复和体验优化，严格按照以下要求逐项修改，输出完整的修改后代码，不得遗漏任何一项： 【核心BUG修复 每条明确修复标准】 1. 修复小球穿透挡板、穿透砖块的问题 - 使用标准AABB包围盒碰撞检测，精确判断小球和矩形的碰撞 - 优化碰撞检测时机，避免高速移动导致的隧道效应，确保碰到物体一定触发反弹 - 禁止出现小球穿过挡板、穿过砖块的情况 2. 修复挡板反弹角度单一的问题 - 实现挡板反弹角度控制：根据小球撞击挡板的位置计算反弹角度 - 撞击挡板中心：垂直向上反弹，水平速度为0 - 撞击挡板左侧：向左上方反弹，越靠左边水平速度越大 - 撞击挡板右侧：向右上方反弹，越靠右边水平速度越大 - 角度平滑过渡，反弹自然，符合经典打砖块手感 3. 修复挡板移出画布边界的问题 - 增加挡板边界限制：挡板左边缘不能小于0，右边缘不能大于画布宽度 - 鼠标移出画布时，挡板停在边界处，不会移出画面 4. 修复一次碰撞击碎多块砖的问题 - 砖块碰撞检测时，找到第一个碰撞的砖块就处理反弹并终止循环 - 保证一次碰撞只击碎一块砖块，不会同时消除多个 5. 修复游戏结束逻辑错误 - 游戏失败/胜利后，立即取消动画帧循环，停止小球运动 - 结束提示框只弹出一次，不会重复触发 - 点击重新开始按钮，完整重置所有状态：挡板、小球、砖块、分数、游戏状态，重新启动帧循环 【体验优化 细节逐项落实】 1. 优化小球移动速度，手感适中，不太快也不太慢 2. 优化砖块排列，整体居中，间距均匀 3. 优化分数显示位置，清晰不遮挡游戏元素 4. 结束提示框居中显示，按钮点击反馈清晰 【代码结构优化】 1. 保留独立函数封装：init()初始化、draw()绘制、checkCollision()碰撞检测、gameOver()游戏结束 2. 保留所有中文注释，碰撞逻辑部分注释清晰准确 3. 代码结构分层清晰，便于后续拓展关卡、道具等功能 4. 确保最终代码零报错，保存为HTML文件双击即可正常运行

六、第五步：进阶拓展Prompt（按需升级项目）

基础版完成后，可以用以下独立提示词继续迭代，丰富项目功能，提升作品集的含金量。每个拓展都是独立的Prompt，可以按需叠加。

拓展1：生命值系统

• 作品集价值：增加容错机制，提升游戏体验，更像完整产品

在现有打砖块基础上，增加生命值系统，初始3条命。小球掉出底部扣除1条命，命数大于0则小球重置到挡板上方重新发射；命数为0才判定游戏失败。画布右下角显示剩余生命，格式为「生命：3」。

拓展2：多关卡系统

• 作品集价值：体现关卡配置、状态流转能力，项目完整度大幅提升

增加多关卡系统，共3个关卡。每关砖块行数、排列不同，速度递增。击碎所有砖块后进入下一关，自动重置小球和挡板，保留累计分数。全部通关显示「全部通关！」和总分。

拓展3：随机道具系统

• 作品集价值：体现随机事件、动态buff逻辑，游戏玩法更丰富

增加随机道具系统，击碎砖块有概率掉落道具。道具包括：加长挡板、缩短挡板、小球加速、小球减速、额外生命。挡板接住道具后触发对应效果，持续一段时间后恢复。

拓展4：键盘控制支持

• 作品集价值：多输入方式适配，兼容性更强

增加键盘控制挡板功能，左右方向键也可以控制挡板移动，按住方向键挡板持续移动。同时保留鼠标控制，两种方式都可以操作。

七、本地运行详细步骤

操作步骤

1. 新建文件：在电脑桌面空白处右键，选择「新建」→「文本文档」
2. 粘贴代码：打开新建的文本文档，把AI最终生成的完整代码全部粘贴进去
3. 保存文件：点击左上角「文件」→「另存为」，文件名填写breakout.html，编码选择「UTF-8」，点击保存
4. 运行游戏：找到保存好的HTML文件，双击即可用默认浏览器打开游戏
5. 操作方式：移动鼠标控制底部挡板，接住小球反弹击碎砖块，全部击碎即可通关

常见踩坑说明

• 注意文件后缀：避免保存成breakout.html.txt，导致双击打不开，可在文件夹「查看」选项里开启「文件扩展名」
• 编码必须选UTF-8：否则中文文字、按钮文字会出现乱码
• 鼠标没反应先检查：确认鼠标在画布区域内移动，画布外是不触发控制的

八、本篇核心总结

打砖块项目虽然逻辑比前两个项目复杂，但AI辅助开发的核心流程完全不变，这也是《逐辉者・AI 造码集》专栏反复强调的可复用方法论：

1. 规则先量化：尤其是物理、碰撞类规则，不能只说「反弹」，要说清楚「怎么撞、怎么弹、角度怎么变」，越具体AI输出越准
2. 碰撞重点测：碰撞检测是AI写游戏的头号重灾区，穿透、多判、角度错误是必查项
3. 状态管理清：游戏开始、运行、结束、重启各个状态要明确，避免出现结束了还在跑的低级bug
4. 迭代式完善：先做基础玩法跑通核心循环，再修bug，再加拓展功能，稳扎稳打

掌握这套方法，你可以用AI快速开发出各种Canvas小游戏，持续丰富自己的作品集。