我们开始做这个 AI 共学系列，是想给对 AI 编程感兴趣的朋友提供一个清楚、可跟做的入口。你不需要一开始理解很多概念；先把工具打开，跟着完成一个小项目，就能真正知道 AI 编程是怎么发生的。这是一个开始，我们期待和大家一步步学到构建真实AI项目的能力。第一篇是做一个网页版贪吃蛇小游戏。这个项目很小，但步骤完整：下载工具、登录账号、选择项目文件夹、说清楚需求、查看生成结果、运行页面、发现问题，再让 AI 修改一版。我个人推荐使用Codex App或Claude Code；本文以Codex为主线，使用Claude Code的读者，也可以跟做同一个项目目标和提示词；具体按钮名称、权限提示和可用能力，请以你自己的桌面端界面为准。工具可用 -> 项目位置正确 -> 需求说清楚 -> 查看交付结果 -> 运行验收 -> 小步修改 -> 交流问题
建议准备 40 到 60 分钟。做到工具能正常使用、游戏能打开运行、你能按清单检查结果，就可以认为这次入门练习已经完成。如果你想用Codex APP（有ChatGPT会员）：打开浏览器。进入`https://developers.openai.com/codex/app`或`https://openai.com/codex/`。确认页面来自 OpenAI 官方网站。根据自己的电脑选择 macOS 或 Windows 版本下载。安装完成后，打开 Codex。按提示登录 ChatGPT / OpenAI 账号。
打开`https://code.claude.com/docs/en/desktop-quickstart`。根据系统下载 Claude 桌面端。安装后登录 Anthropic / Claude 账号。打开顶部的Code标签页。
注意！不要从不熟悉的网盘、群文件或第三方软件下载站安装，也不推荐个人的Rebuild。本文只推荐官方下载路线。如果你想用第三方模型 API 接入 Codex App 和 Claude Code App，可以在公众号回复【AI共学】。请回复：Codex/Claude Code已经可以使用。
是否已经登录成功网络是否正常是否还有可用计划或额度是否有需要确认的授权窗口关闭应用后重新打开是否恢复
在 Codex 里，点击左下角设置，这里可以进入详细设置，也能看到找到Usage / 使用情况。- 默认权限：Codex 可以读取并编辑其工作区中的文件。必要时，它可以请求额外的访问权限。
- 自动审核：Codex 可以读取和编辑其工作区中的文件，并自动审核额外访问权限请求。自动审核可能会出错。
- 完全访问权限：Codex 无需你批准，即可编辑电脑上的任何文件并运行联网命令。这会明显增加数据丢失、泄露或意外行为的风险。
默认是默认权限，也可以打开自动审核，让 Codex 在当前项目里创建和修改文件更顺畅。完全访问权限可以自由读写任意文件，对你的电脑做任意操作。只有当你明确知道当前项目范围、理解风险，并且确实需要时，再打开它。仍然在设置里，往下滑，找到跟进行为。这里有两个选项：排队和引导。建议选择引导。当 Codex 正在运行时，你继续发送补充说明，Codex 会把这条消息用于引导当前运行，而不是简单排到后面等待。界面里也会提示，按下`⌘↵`可以对单条消息执行相反操作。接下来，在 Codex 左上角选择这个文件夹作为当前项目。选择后，如果界面里有Local / 本地之类的工作模式，请选择让 Codex 在本机项目中工作。如果 Codex 询问是否允许访问这个文件夹，选择允许。这里的“允许”是让它在`贪吃蛇游戏`这个项目文件夹里读写文件，不是让它随便访问整台电脑。这一次我们会用三种比较基础的方式尝试创建这个小游戏。你可以跟着把三种都做一遍，也可以看完之后选择自己更喜欢的方式来体验。通过这个过程，你会更直观地感受到：同样的目标，不同的表达方式和协作方式，会带来不一样的结果。这句话可以启动任务，但信息太少。AI 还不知道你要网页游戏还是 Python 游戏，要不要显示分数，要不要触屏按钮，文件应该怎么拆，完成后怎么运行。在 Codex 返回的内容最后和界面右上角通常会看到进度和输出。index.htmlstyle.cssscript.js
同时看输出里有没有`localhost`这类本地预览地址，或者 Codex 是否说明了怎样打开游戏。还要注意文件名：应该是`index.html`，不要变成`index.html.txt`。如果输出里没有这 3 个文件，或者文件名不对，先不要手动改文件名。直接发：请确认你刚才实际创建了哪些文件。请按照本文要求，把项目整理成 index.html、style.css、script.js 三个文件，并告诉我每个文件负责什么。
如果 Codex 给出本地地址，就在侧边栏浏览器里打开它给出的地址；如果它直接打开`index.html`，就看预览里是否出现标题、分数和游戏区域。页面出现，不等于功能完成。打开游戏后，上手体验的同时可以按下面清单逐项检查：1. 页面能看到游戏标题、分数和游戏区域2. 点击游戏区域后，方向键能控制蛇移动3. 按方向键时，页面不会跟着上下滚动4. 吃到食物后分数会增加5. 蛇吃到食物后会变长6. 撞墙后游戏会结束7. 蛇变长后，让蛇头撞到自己的身体，游戏会结束8. 重新开始按钮能使用9. 如果你会打开控制台，Console / 控制台里没有红色报错
我们这次演示里，第一个版本成功把核心玩法实现了，视觉上很简洁，但功能归属哪个按键没有提示，还需要减小缩放比例才能展示完整页面，手感也一般，游戏速度一开始就偏快（导致我截个游戏进行画面都截了好几次）。所以，一句话提示词经常能生成一个初始版本，但结果会比较随机。第二次，打开 Codex 输入框左下角的计划模式，再发送同一句话：你也可以在提示词中带上“计划”二字，也会触发这个模式。这样看起来确实会比第一种可控了不少，甚至在这一次，他在计划中就自动调用生图能力生成了一版视觉概念图。接着，Codex产出了一份实施计划，在这可以重点看三件事：Codex有没有先拆解任务Codex有没有判断需要哪些文件Codex有没有说明开发顺序和检查方式
这个版本会比第一个更完整，界面方向更好看，说明更清晰，功能也更完整，速度也是逐渐增加的，但最终实现和设计想法之间仍有差距，操作细节、适配效果和反馈节奏还需要继续检查。这里先记住一句话：计划模式能帮助 AI 组织任务，但计划不等于交付质量。真正的开发还需要运行、验收、修改和复盘。接下来，我们尝试看看更完整提示词的效果，把下面这段提示词发给它。下面内容较长，如果你在公众号里看到代码块被折叠，先点开，再复制完整提示词。请在当前项目文件夹里完成一个网页版本的贪吃蛇小游戏。请直接写入文件，不要只在聊天里贴代码，也不要新建额外的项目子文件夹。请先确认你正在当前文件夹中工作，然后创建或修改下面 3 个文件：1. index.html2. style.css3. script.js技术要求：1. 使用原生 HTML、CSS 和 JavaScript。2. 不使用 React、Vue、Vite、npm、构建工具或外部依赖。3. 不生成图片素材，不调用外部资源，不使用联网字体或图标库。4. 使用 canvas 绘制游戏区域，最终目标是双击 index.html 就能在浏览器中运行。功能要求：1. 页面打开后先显示游戏标题、当前分数、最高分、操作提示和“开始游戏”按钮。2. 玩家可以用键盘方向键控制蛇移动，也可以用 W/A/S/D 控制。3. 页面上提供开始、暂停/继续、重新开始按钮；空格键也可以暂停/继续。4. 蛇开始移动后，要防止玩家直接反向移动导致立刻撞到自己。5. 食物要随机出现在棋盘格子上，不能生成在蛇身体上。6. 蛇吃到食物后会变长，当前分数增加，游戏速度可以轻微提高，但不要快到难以操作。7. 撞到墙或撞到自己时，游戏结束，并在页面上显示“游戏结束”和本局分数。8. 游戏结束后可以点击按钮重新开始，重新开始时分数、蛇的位置、方向和食物都要重置。9. 最高分保存在浏览器本地，下次打开页面仍然能看到。10. 页面提供上、下、左、右四个方向按钮，方便在触屏设备或侧边栏预览里试玩。11. 按方向键控制游戏时，不要让页面跟着上下滚动。增强功能要求：1. 加一个等级系统：每吃到 5 个普通食物升 1 级，页面显示当前等级，等级提升时游戏速度小幅增加。2. 加一个限时金色食物：每隔一段时间随机出现一次，停留约 5 秒；吃到后加 3 分，没有吃到就自动消失。金色食物不能生成在蛇身体上。3. 游戏结束时根据分数显示一句简短称号，例如“刚刚开张的小蛇”“稳定巡航”“贪吃蛇高手”。称号只要简洁有趣，不要太夸张。4. 等级、金色食物和结算称号都是加分功能，但不要影响基础玩法的稳定性。文件要求：1. index.html 负责页面结构。2. style.css 负责页面样式，要让游戏区域、分数、按钮和提示文字清楚易读。3. script.js 负责游戏逻辑，至少拆出初始化、绘制、移动、生成食物、碰撞检测、结束游戏、重新开始等函数。4. 代码尽量清楚，变量名要容易理解，适合第一次学习的人阅读。5. 可以写少量必要注释，解释游戏主循环、碰撞检测和食物生成这几处关键逻辑。界面与视觉要求：1. 整体做成“深色霓虹像素街机终端”风格：首屏就是可玩的贪吃蛇，不要做营销页、落地页、大段介绍文案或复杂导航。2. 页面像一台简洁的复古游戏机：顶部是紧凑标题栏，中间是发光的 canvas 游戏屏幕，旁边或下方是分数仪表盘和控制按钮。3. 背景用 CSS 做深蓝黑渐变、轻微扫描线、点阵纹理或像素网格，不使用外部图片。背景要有氛围，但不能抢走游戏区域的注意力。4. 建议色彩：主背景接近 #070b1a 或 #0f172a，游戏面板接近 #111827，正文文字接近 #e5e7eb；霓虹绿用于蛇，青色用于边框和分隔线，琥珀色用于分数，紫粉色只做少量点缀。5. canvas 游戏区必须是视觉核心，保持正方形比例，有清晰边框、轻微内阴影、柔和霓虹外发光和细密网格线，像一块正在运行的街机屏幕。6. 蛇身使用像素块绘制，但不要只是普通纯色方块。蛇身可以有圆角、高光边缘或轻微光晕；蛇头要和身体区分开，并能看出移动方向，可以加眼睛或更亮的头部颜色。7. 普通食物要和蛇明显区分，可以做成发光圆点、能量果实或小宝石；金色食物要更醒目，可以有金色光环、轻微脉冲和倒计时提示，但不能影响操作。8. 分数、最高分、等级和状态不要堆成普通文字列表，要做成小型 HUD 仪表盘。每个指标放在独立小模块里，标签简洁，数字醒目。9. 按钮要像游戏机控制面板：开始、暂停/继续、重新开始和方向按钮要有统一高度、统一间距、清楚的悬停、聚焦、按下和禁用状态；按钮圆角控制在 8px 左右，不要过度圆润。10. 增加适量装饰细节，例如像素角标、发光分隔线、状态指示灯、棋盘网格、边框闪烁或少量像素粒子。装饰只能增强氛围，不能遮挡文字、按钮或游戏画面。11. 游戏状态要有明确视觉反馈：开始前有简短提示，暂停时出现半透明遮罩，吃到食物时分数轻微闪烁，升级时出现短提示，游戏结束时出现居中结算层，显示“游戏结束”、本局分数、称号和重新开始按钮。12. 动效要轻巧：按钮按下反馈、食物脉冲、金色食物闪烁、屏幕外发光变化都可以有，但不要做复杂动画，不要让页面卡顿，也不要影响方向键操作。13. 游戏区域在桌面浏览器和较窄的 Codex 侧边栏预览里都不要溢出。320px 到 420px 宽度下，canvas 要自动缩小，状态区和按钮改为上下排列。14. 桌面宽屏可以采用“游戏屏幕 + 右侧仪表盘”的布局；窄屏改为“标题、游戏屏幕、状态区、按钮”的上下结构。所有文字、按钮和 canvas 之间都要留出足够间距。15. 可读性优先：深色背景上的文字对比要足够高，状态提示一眼可读；触控按钮至少要足够大，键盘 focus 状态必须清楚可见。实现建议：1. 用固定大小的格子来表示棋盘，例如 20 x 20。2. 用 requestAnimationFrame 或 setInterval 实现游戏循环，选择一种简单稳定的方式即可。3. 把常量集中放在 script.js 顶部，例如格子数量、初始速度、颜色、分数规则、等级规则、金色食物出现规则。4. 视觉装饰尽量用 CSS 和 canvas 自绘完成，例如渐变、阴影、网格、扫描线、发光和轻微动效；不要为了视觉效果引入外部资源。5. 如果需要做合理取舍，优先保证游戏能稳定运行、逻辑清楚、容易检查。如果有不确定的地方，请做一个适合初学者的合理默认，不要停下来反问。完成后请告诉我：1. 你创建或修改了哪些文件。2. 我应该怎样在浏览器或 Codex 侧边栏里运行。3. 每个文件分别负责什么。4. 我应该按什么顺序检查这些功能，确认游戏已经完成。5. 如果某个功能没有实现，请明确说明原因和当前限制。
这里写明“不使用 React、Vue、Vite、npm、构建工具或外部依赖”，不是因为这些技术不好，而是因为本教程要先完成一个最容易打开、最容易预览、最容易排错的网页项目。第三个版本是三个结果里最有“小作品感”的一个。它不只是完成了贪吃蛇的基础玩法，还加入了限时出现的金豆，让玩家在普通食物之外多了一个临时目标；同时，它会根据不同分数给出不同的名称段位，让游戏结束不只是显示一个分数，而是有一点反馈和成就感。实际玩起来，这一版的节奏、反馈和完成度都更好，也更适合拿来展示。但从代码角度看，它并不是最适合继续长期扩展的版本。它的主要逻辑都集中在一个 script.js 里，也没有测试。短期看，这样写可以快速完成、方便演示；但如果后面继续加障碍物、难度选择、特殊食物、排行榜等功能，代码会越来越难拆，也更容易改一个地方影响另一个地方。所以这个版本给的提醒是：一个AI写的游戏项目“玩起来最好”，不一定代表它“最容易维护”。这也是后面继续学习真实开发时要慢慢补上的部分。页面白屏按钮没反应方向键不能控制分数不增加重新开始失败浏览器控制台出现红色报错
如果你不想打字，可以先使用 Codex 输入框旁边的语音输入，把你看到的问题说出来。说完以后，再补上关键细节。我现在遇到一个问题：1. 我刚才做了什么：2. 屏幕上发生了什么：3. 报错信息是：4. 我希望它变成什么样：5. 请先判断可能原因，再一步步帮我修。
还有一个Codex里更方便的技巧可以这里顺手学起来：Codex的注释功能（Annotation）。OpenAI 的 Codex App 文档把这类页面反馈称为 browser comments，并说明可以打开Annotation mode在页面元素或区域上提交 comment。侧边预览页面打开后，在右上角找到注释模式，你可以在有问题或者需要修改的位置添加注释，直接写修改意见。例如对分数区域注释：注释比一句“帮我改一下页面”更清楚，因为 Codex 能知道你说的是预览画面里的哪一处。彻底跑通自己的第一个MVP后，我们可以再进行下一步，体验让AI给贪吃蛇增加五花八门的新玩法。障碍物模式：每升 1 级，棋盘上增加一个障碍物，撞到障碍物也会结束。限时挑战：增加 60 秒倒计时，时间结束后结算分数和称号。难度选择：开始前可以选择新手、标准、挑战三种速度。穿墙模式：打开后撞到墙不会结束，而是从另一侧出现。毒苹果：随机出现一种紫色食物，吃到会扣分或让蛇变短。连击奖励：连续几秒内吃到食物，就给额外分数或短暂加速提示。主题皮肤：增加白天、夜晚、霓虹三种视觉主题，让玩家可以切换。音效开关：吃到食物、升级、失败时有轻微音效，同时提供关闭按钮。
做到这里，你已经完成了一次完整的 AI 编程入门实践：工具可用，项目位置正确，文件生成，作品能运行，问题能描述，修改能验证。这还不是完整意义上的真实开发。真实项目会涉及更清楚的需求拆解、更合理的代码结构、测试、版本管理、部署、多人协作和长期维护。第一篇没有把这些内容都展开，是因为初学阶段更重要的是先看见完整流程，先建立一次“我可以和 AI 一起把东西做出来”的经验。所以，这一篇不是终点，而是一个很好的起点。后面我们会在这个基础上，一步步补上真实开发需要的能力。大家可以把运行截图、修改记录和遇到的问题保存下来，也可以发到群或评论区交流。第一次不需要完美，先跑通一次，比想象很多次更重要。我们是XRoot寻壤，一个面向开发者、创业者、行业方的AI 学习与项目共创社区。核心意义是帮企业寻找解决方案，帮开发者进入真实生产，已为10+企业提供AI服务。
夜雨聆风
