1. 项目概述与核心价值最近在社区里看到不少朋友对用游戏引擎做点小东西感兴趣尤其是那种能快速看到成果、有完整逻辑闭环的经典小游戏。贪吃蛇这个几乎刻在每个人童年记忆里的游戏就是一个绝佳的练手项目。它规则简单但麻雀虽小五脏俱全涵盖了游戏开发中角色控制、碰撞检测、状态管理、UI交互等多个核心模块。今天我就以 Cocos Creator 3.x 版本当前主流是 v3.8.x为工具带大家从零开始一步步实现一个完整的贪吃蛇游戏。这不是一个简单的“Hello World”我们会深入每个环节讲清楚“为什么这么做”并分享我在实际开发中踩过的坑和总结的技巧。无论你是刚接触 Cocos Creator 的新手还是想巩固基础逻辑的开发者相信这个系列都能给你带来实实在在的收获。我们的目标是不依赖任何付费资源或复杂插件仅用引擎自带的功能和 TypeScript 脚本打造一个代码清晰、易于扩展的贪吃蛇游戏。2. 开发环境与项目初始化2.1 Cocos Creator 版本选择与安装工欲善其事必先利其器。选择稳定且兼容性好的引擎版本是第一步。目前 Cocos Creator 的 3.x 版本是主流其中 v3.8.2 是一个经过市场验证的长期支持LTS版本社区资源丰富遇到问题也容易找到解决方案。不建议盲目追求最新版本新版本可能引入未知的兼容性问题。你可以从 Cocos 官网下载 Dashboard然后通过 Dashboard 安装指定版本的编辑器。安装完成后打开 Cocos Dashboard点击“新建项目”。在项目模板中选择“Empty(3D)”即可。虽然贪吃蛇是2D游戏但 Cocos Creator 3.x 是 2D/3D 统一的引擎选择 3D 空项目并不会增加复杂度反而能让我们更自由地组织场景结构。给项目起个名字比如ClassicSnake选择好存储路径点击创建。注意项目路径和名称中不要包含中文或特殊字符避免一些潜在的引擎或构建工具路径解析错误。这是我早期开发时踩过的一个小坑。2.2 项目结构规划与资源准备项目创建好后我们先别急着写代码。花几分钟规划一下资源目录结构能让后续开发事半功倍。在“资源管理器”面板中我通常会建立如下文件夹textures: 存放所有图片资源如蛇头、蛇身、食物、背景等。scripts: 存放所有 TypeScript 脚本文件。scenes: 存放游戏场景文件。prefabs: 存放预制体资源。sounds: 存放音效文件本教程暂不涉及但预留位置。对于贪吃蛇游戏我们需要的视觉资源非常简单。你可以用任何绘图工具如 Aseprite, Photoshop甚至 Windows 画图制作几个简单的正方形色块蛇头一个 32x32 像素的绿色方块。蛇身一个 32x32 像素的深绿色方块。食物一个 32x32 像素的红色方块。背景/网格一个纯色背景或者由更小的方格组成的网格纹理用于辅助对齐。将这些图片导出为 PNG 格式拖入assets/textures文件夹中。在 Cocos Creator 中选中这些图片在“属性检查器”中将它们的“类型”设置为“sprite-frame”这样它们才能被 Sprite 组件使用。3. 游戏核心逻辑设计与场景搭建3.1 场景节点树设计与思路打开默认的scene场景我们开始搭建游戏界面。一个清晰的节点结构是良好代码结构的基础。我的场景节点树通常这样组织Canvas (画布) ├── BG (背景层一个全屏的Sprite用于放置背景图或网格) ├── GameLayer (游戏层所有游戏动态元素蛇、食物的父节点) │ ├── Food (食物节点初始为空运行时动态生成) │ └── Snake (蛇的根节点初始为空运行时动态添加蛇头和身体) └── UILayer (UI层用于放置分数、游戏结束提示等UI控件) ├── ScoreLabel (分数文本Label组件) └── GameOverPanel (游戏结束面板初始隐藏包含重试按钮等)为什么要分层分层管理可以让我们更清晰地控制渲染顺序比如UI永远在游戏元素之上也方便进行整体控制比如暂停游戏时可以禁用 GameLayer 上所有节点的逻辑。将蛇和食物放在同一个GameLayer下也便于我们进行统一的坐标管理和碰撞检测。3.2 游戏核心数据模型设计在动手写控制逻辑之前我们先在脑海里或者纸上把游戏的核心数据模型定义清楚。这能有效避免后续编码时的逻辑混乱。对于贪吃蛇我们需要管理以下核心数据蛇的数据结构蛇是由一系列“节”组成的。每个“节”需要记录其在游戏网格中的位置行、列。我们可以用一个数组来存储这些位置信息数组的第一个元素代表蛇头最后一个元素代表蛇尾。这种结构非常利于实现移动和增长移动时在数组头部插入新的蛇头位置并移除数组尾部的旧蛇尾位置吃食物增长时则只插入新头不移除旧尾。移动方向用一个枚举类型或简单的字符串/数字来记录蛇当前的前进方向如up,down,left,right。同时我们需要一个“下一个方向”的变量用于缓冲玩家的输入防止在一帧内连续按下相反方向导致蛇直接掉头“自杀”。游戏状态游戏是处于playing进行中、paused暂停还是gameOver结束状态。不同的状态下输入处理、逻辑更新和渲染都应该有所不同。游戏配置如网格大小例如 20x15 个格子、每个格子的大小32像素、蛇的初始长度、初始移动速度等。将这些配置参数化以后调整游戏难度或表现会非常方便。基于以上分析我们可以先创建一个GameConfig.ts文件来定义配置和数据类型。// assets/scripts/GameConfig.ts export enum Direction { UP UP, DOWN DOWN, LEFT LEFT, RIGHT RIGHT } export enum GameState { READY READY, PLAYING PLAYING, PAUSED PAUSED, GAME_OVER GAME_OVER } export class GameConfig { // 网格配置 static readonly GRID_WIDTH 20; // 横向格子数 static readonly GRID_HEIGHT 15; // 纵向格子数 static readonly CELL_SIZE 32; // 每个格子的像素大小 // 蛇的初始配置 static readonly INIT_SNAKE_LENGTH 3; static readonly INIT_SNAKE_POS { x: 5, y: 7 }; // 蛇头初始位置网格坐标 static readonly INIT_DIRECTION Direction.RIGHT; // 游戏速度 (移动一格所需的秒数值越小速度越快) static readonly MOVE_INTERVAL 0.15; }4. 核心模块实现蛇的创建与控制4.1 蛇的视觉表现与预制体创建蛇是由多个节点蛇头、蛇身组成的。我们不应该在代码里反复用instantiate和addChild来创建精灵并设置图片更好的做法是使用预制体Prefab。首先在场景中创建一个空节点重命名为SnakeSegment。为其添加一个Sprite组件将textures/snake_head.png拖拽到Sprite Frame属性上。调整节点大小为 (32, 32)。然后将这个SnakeSegment节点从“层级管理器”拖拽到“资源管理器”的assets/prefabs文件夹中这样就创建了一个预制体。之后你可以复制这个预制体修改其中一个的图片为snake_body.png创建出身体段的预制体。实操心得为蛇头和蛇身创建不同的预制体并在预制体上挂载一个自定义脚本组件例如SnakeSegment.ts用于区分类型和存储网格坐标等信息会让后续的逻辑更清晰。例如在SnakeSegment脚本中定义一个type: head | body属性和gridPos: Vec3属性。4.2 蛇的移动逻辑实现蛇的移动是游戏的核心循环。我们使用一个计时器每隔固定时间GameConfig.MOVE_INTERVAL触发一次移动。移动的逻辑遵循以下步骤计算新的蛇头位置根据当前方向在当前蛇头位置的基础上计算出下一个网格位置。例如方向向右则新位置为{x: oldHead.x 1, y: oldHead.y}。碰撞检测边界检测检查新蛇头位置是否超出网格范围x0 || xGRID_WIDTH || y0 || yGRID_HEIGHT如果超出则游戏结束。自撞检测检查新蛇头位置是否与蛇身体的任何一节位置重合遍历蛇身位置数组如果重合则游戏结束。食物检测检查新蛇头位置是否与食物位置重合如果重合则触发“吃食物”逻辑。更新蛇的位置数组正常移动将新的蛇头位置插入数组头部并移除数组尾部的最后一个位置蛇尾位置。吃到食物将新的蛇头位置插入数组头部但不移除数组尾部的元素。这样蛇的长度就增加了1。同步视觉表现根据更新后的蛇位置数组遍历所有蛇身节点包括蛇头更新它们的实际世界坐标。世界坐标的计算公式为worldX gridPos.x * CELL_SIZEworldY gridPos.y * CELL_SIZE。注意 Cocos Creator 的坐标系原点在左下角而我们的网格坐标可能习惯从左上角开始这里需要做好转换。以下是SnakeManager.ts脚本中移动函数的核心代码片段// assets/scripts/managers/SnakeManager.ts updateSnakePosition() { if (this.gameState ! GameState.PLAYING) return; const headPos this.snakePositions[0]; let newHeadPos: Vec3; switch (this.currentDirection) { case Direction.UP: newHeadPos new Vec3(headPos.x, headPos.y 1, 0); break; case Direction.DOWN: newHeadPos new Vec3(headPos.x, headPos.y - 1, 0); break; case Direction.LEFT: newHeadPos new Vec3(headPos.x - 1, headPos.y, 0); break; case Direction.RIGHT: newHeadPos new Vec3(headPos.x 1, headPos.y, 0); break; } // 1. 边界检测 if (newHeadPos.x 0 || newHeadPos.x GameConfig.GRID_WIDTH || newHeadPos.y 0 || newHeadPos.y GameConfig.GRID_HEIGHT) { this.gameOver(); return; } // 2. 自撞检测 (跳过蛇尾因为移动后蛇尾会离开那个位置) for (let i 0; i this.snakePositions.length - 1; i) { if (newHeadPos.equals(this.snakePositions[i])) { this.gameOver(); return; } } // 3. 食物检测 if (newHeadPos.equals(this.foodManager.foodGridPos)) { this.snakePositions.unshift(newHeadPos); // 增长 this.foodManager.spawnFood(); // 生成新食物 this.scoreManager.addScore(10); // 加分 // 可以在这里播放吃食物的音效 } else { // 正常移动 this.snakePositions.unshift(newHeadPos); this.snakePositions.pop(); } // 4. 更新所有蛇身节点的视觉位置 this.updateSnakeVisual(); }4.3 玩家输入控制与方向缓冲玩家通过键盘上下左右箭头键或触摸屏上的虚拟按钮来控制蛇的方向。这里有一个关键细节不能允许在一帧之内直接反向。例如蛇正在向右移动玩家快速按下左键如果立即响应蛇就会在下一格向左移动相当于直接撞向自己的身体第二节导致游戏体验极差。因此我们需要引入一个“下一个方向”的缓冲区。逻辑如下在update函数或专门的输入监听函数中检测玩家的按键。当按下某个方向键时判断这个方向是否与当前方向相反。如果不相反则将这个方向记录到nextDirection变量中。在每次执行移动逻辑 (updateSnakePosition)之前检查nextDirection是否有值。如果有则将currentDirection更新为nextDirection并清空nextDirection。这样方向改变的实际生效时机是在下一次移动时而不是在按键的同一帧。// 在 SnakeManager 中 private _nextDirection: Direction | null null; onKeyDown(event: EventKeyboard) { let inputDir: Direction | null null; switch (event.keyCode) { case KeyCode.ARROW_UP: inputDir Direction.UP; break; case KeyCode.ARROW_DOWN: inputDir Direction.DOWN; break; case KeyCode.ARROW_LEFT: inputDir Direction.LEFT; break; case KeyCode.ARROW_RIGHT: inputDir Direction.RIGHT; break; } if (inputDir !this.isOppositeDirection(inputDir, this.currentDirection)) { this._nextDirection inputDir; } } private isOppositeDirection(dir1: Direction, dir2: Direction): boolean { return (dir1 Direction.UP dir2 Direction.DOWN) || (dir1 Direction.DOWN dir2 Direction.UP) || (dir1 Direction.LEFT dir2 Direction.RIGHT) || (dir1 Direction.RIGHT dir2 Direction.LEFT); } // 在移动计时器的回调函数中 moveStep() { // 应用缓冲的方向 if (this._nextDirection ! null) { this.currentDirection this._nextDirection; this._nextDirection null; } this.updateSnakePosition(); }5. 核心模块实现食物的生成与得分5.1 食物的随机生成算法食物的生成需要满足两个条件1. 位置必须在网格内2. 位置不能与蛇身体的任何一节重合。一个简单直接的算法是随机生成一个网格坐标然后检查是否与蛇身重合如果重合就重新生成直到找到一个空闲位置为止。对于小网格这种方法效率足够。但对于大网格且蛇很长时可能会有性能问题更优的解法是预先计算出所有空闲位置再随机选取但对于我们的贪吃蛇来说简单重试法完全可行。在FoodManager.ts中// assets/scripts/managers/FoodManager.ts spawnFood() { let newPos: Vec3; let isPositionValid false; // 最多尝试100次避免极端情况下死循环 for (let i 0; i 100; i) { newPos new Vec3( Math.floor(Math.random() * GameConfig.GRID_WIDTH), Math.floor(Math.random() * GameConfig.GRID_HEIGHT), 0 ); isPositionValid true; // 检查是否与蛇身重合需要从 SnakeManager 获取蛇的位置数组 for (const segment of this.snakeManager.snakePositions) { if (newPos.equals(segment)) { isPositionValid false; break; } } if (isPositionValid) { break; } } if (isPositionValid newPos!) { this.foodGridPos newPos; // 更新食物节点的世界坐标 this.foodNode.setPosition( newPos.x * GameConfig.CELL_SIZE, newPos.y * GameConfig.CELL_SIZE, 0 ); } else { console.error(无法生成食物); // 这里可以触发游戏胜利逻辑因为所有格子都被蛇占满了 } }5.2 得分系统与UI更新得分逻辑很简单每当蛇吃到食物就增加分数。我们需要一个ScoreManager来管理分数并负责更新UI显示。UI更新是游戏开发中常见需求要避免脚本间的直接强耦合。这里我推荐使用 Cocos Creator 内置的事件系统EventTarget或者更通用的观察者模式。我们可以在ScoreManager中定义一个本地的事件目标当分数变化时发射一个自定义事件。而UI层的分数文本则监听这个事件并更新显示。// assets/scripts/managers/ScoreManager.ts import { _decorator, Component, EventTarget } from cc; const { ccclass, property } _decorator; export const ScoreEvent new EventTarget(); ccclass(ScoreManager) export class ScoreManager extends Component { private _score: number 0; get score(): number { return this._score; } addScore(points: number) { this._score points; // 派发分数变化事件携带最新的分数值 ScoreEvent.emit(score-changed, this._score); } reset() { this._score 0; ScoreEvent.emit(score-changed, this._score); } }在UI层的脚本中例如UIManager.ts// assets/scripts/ui/UIManager.ts start() { // 监听分数变化事件 ScoreEvent.on(score-changed, this.updateScoreLabel, this); } updateScoreLabel(newScore: number) { // this.scoreLabel 是一个 cc.Label 组件引用 if (this.scoreLabel) { this.scoreLabel.string 得分: ${newScore}; } } onDestroy() { // 记得移除监听防止内存泄漏 ScoreEvent.off(score-changed, this.updateScoreLabel, this); }这种事件驱动的方式使得ScoreManager完全不需要知道谁在显示分数实现了逻辑与表现的解耦代码更清晰也更容易扩展比如以后增加一个分数动画效果只需要再监听同一个事件即可。6. 游戏状态管理与流程控制6.1 游戏循环与状态切换一个完整的游戏需要有明确的流程控制开始游戏、进行中、暂停、结束、重新开始。我们需要一个顶层的GameManager来协调所有子管理器SnakeManager,FoodManager,ScoreManager并管理游戏状态。GameManager的主要职责初始化在游戏启动时初始化所有管理器创建初始的蛇和食物。游戏开始将状态设置为PLAYING启动控制蛇移动的计时器。游戏暂停/继续暂停或恢复移动计时器并可能冻结场景中的某些动画。游戏结束停止计时器显示“游戏结束”UI面板记录最高分等。重新开始重置所有管理器的状态清空蛇、重置分数、重新生成食物隐藏结束面板重新开始游戏。计时器的使用是关键。我们可以使用 Cocos Creator 的setInterval或schedule函数。schedule是引擎提供的更集成化的计时器能更好地与组件的生命周期配合。// assets/scripts/managers/GameManager.ts startGame() { this.gameState GameState.PLAYING; this.snakeManager.reset(); this.foodManager.spawnFood(); this.scoreManager.reset(); this.uiManager.hideGameOverPanel(); // 使用 schedule 开始游戏循环 this.schedule(this.gameLoop, GameConfig.MOVE_INTERVAL); } gameLoop() { // 这个函数会以固定间隔被调用 if (this.gameState GameState.PLAYING) { this.snakeManager.moveStep(); // 移动蛇 } } gameOver() { this.gameState GameState.GAME_OVER; this.unschedule(this.gameLoop); // 停止游戏循环 this.uiManager.showGameOverPanel(this.scoreManager.score); } pauseGame() { if (this.gameState GameState.PLAYING) { this.gameState GameState.PAUSED; this.unschedule(this.gameLoop); } } resumeGame() { if (this.gameState GameState.PAUSED) { this.gameState GameState.PLAYING; this.schedule(this.gameLoop, GameConfig.MOVE_INTERVAL); } }6.2 UI界面搭建与交互UI部分我们使用 Cocos Creator 内置的 UI 组件。对于贪吃蛇我们至少需要分数显示一个Label组件通常放在屏幕左上角或右上角。游戏结束面板一个Panel节点作为容器里面包含“游戏结束”文字、本次得分、历史最高分以及“重新开始”按钮。这个面板的初始状态应设置为active false。控制按钮可选如果你要做移动端版本可以在屏幕下方添加上下左右四个虚拟方向按钮。每个按钮绑定触摸事件调用SnakeManager的输入接口。为“重新开始”按钮绑定事件是最常见的操作。在 Cocos Creator 编辑器中选中按钮节点在“属性检查器”最下方的“Click Events”区域点击“”号将事件目标拖拽到GameManager所在的节点然后选择组件GameManager方法选择restartGame需要在GameManager中定义这个方法。这是一种快速绑定UI事件的方式。7. 性能优化、调试与发布7.1 对象池优化蛇身节点在游戏过程中蛇身节点会随着吃食物而不断创建增长但游戏结束后又会销毁。频繁的创建和销毁节点是性能开销较大的操作。我们可以使用对象池Object Pool来优化。对象池的核心思想是预先创建一定数量的对象使用时从池中取出不用时放回池中并隐藏而不是直接销毁。Cocos Creator 提供了NodePool类来实现对象池。我们可以为蛇身节点建立一个对象池。// 在 SnakeManager 中初始化对象池 import { NodePool, instantiate } from cc; private _segmentPool: NodePool new NodePool(); initPool() { // 预先创建一些蛇身节点放入池中比如初始长度10 for (let i 0; i GameConfig.INIT_SNAKE_LENGTH 10; i) { const segmentNode instantiate(this.snakeBodyPrefab); // this.snakeBodyPrefab 是预制体引用 this._segmentPool.put(segmentNode); } } // 需要新的蛇身节点时 getSegmentFromPool(): Node { if (this._segmentPool.size() 0) { return this._segmentPool.get(); } else { // 池空了就动态创建一个但这种情况应该很少 return instantiate(this.snakeBodyPrefab); } } // 蛇身节点不再需要时比如游戏重置 returnSegmentToPool(node: Node) { this._segmentPool.put(node); }在游戏重置时不要销毁蛇身节点而是将它们全部还回对象池。在updateSnakeVisual函数中根据当前蛇的长度从池中获取或归还节点。这样可以极大减少运行时的卡顿。7.2 调试技巧与常见问题排查开发过程中难免遇到问题掌握一些调试技巧很重要。使用console.log和调试器在关键逻辑处如移动、碰撞检测、得分添加console.log输出变量状态。在浏览器中按 F12 打开开发者工具在“Sources”面板可以找到你的 TypeScript 源码需要启用 sourcemap设置断点进行单步调试。可视化调试对于坐标、碰撞等问题可以临时在节点上绘制调试图形。例如在食物生成后用console.log输出食物坐标或者在蛇移动时在每一节身体的位置画一个小的调试方块可以用 Graphics 组件动态绘制。常见问题蛇移动卡顿或不流畅检查schedule的时间间隔是否合适。如果间隔太短移动太快如果间隔太长感觉卡。确保移动逻辑 (updateSnakePosition) 中的计算不要太耗时。碰撞检测失效检查坐标系统是否一致。确保蛇的位置、食物的位置、边界检测都使用同一套网格坐标系。检查碰撞判断条件特别是自撞检测时是否错误地包含了蛇头自身。输入无响应检查键盘事件监听是否成功注册input.on。检查方向缓冲逻辑是否因为isOppositeDirection判断太严格而吞掉了某些合法输入。UI不更新检查事件监听是否成功绑定。检查 Label 组件的string属性是否被正确赋值。可以在updateScoreLabel方法里打印newScore确认事件是否触发。7.3 项目构建与发布当游戏开发完成并测试无误后就可以进行构建发布了。Cocos Creator 支持发布到 Web、iOS、Android、Windows 等多个平台。构建 Web 版本这是最简单的发布方式。点击编辑器顶部菜单的“项目” - “构建”。在构建面板中选择“Web Mobile”或“Web Desktop”平台。设置好“主包压缩类型”、“初始场景”等选项后点击“构建”。构建完成后会在项目目录下生成一个build文件夹里面的内容就是可以部署到 Web 服务器上的游戏文件。优化构建在构建设置中可以勾选“合并初始场景依赖的所有 JSON”来减少请求数。对于纹理可以考虑启用“自动图集”将小图打包成大图减少 Draw Call。在“压缩纹理”选项中可以选择合适的格式以减小包体。部署将build/web-mobile或你选择的平台下的所有文件上传到你的网站服务器或静态托管服务如 GitHub Pages, Netlify, Vercel 等。确保服务器正确配置了 MIME 类型特别是对于.wasm、.data等文件。踩坑记录第一次构建 Web 版本后在本地用浏览器打开index.html可能会因为跨域问题导致资源加载失败。最好将构建产物放在一个本地 HTTP 服务器如使用http-servernpm 包下运行测试或者直接上传到线上环境测试。走到这里一个功能完整的贪吃蛇游戏就已经从零到一诞生了。回顾整个过程我们从环境搭建、场景设计、数据建模到核心的移动、碰撞、生成逻辑再到状态管理、UI交互和性能优化覆盖了游戏开发的基本流程。这个项目虽然小但涉及的思维模式和解决思路对于后续开发更复杂的游戏有着直接的借鉴意义。你可以尝试在此基础上添加更多功能比如不同类型的食物加速、减速、穿墙、障碍物、关卡设计、更精美的动画和音效甚至多人对战模式。编程的乐趣就在于将想法一步步变为现实并在过程中不断解决新的挑战。希望这个详细的实现过程能为你打开 Cocos Creator 游戏开发的大门。