简介一套完整的 Cocos Creator 2.3.2 七款休闲小游戏源码与实操手册面向游戏开发入门者、Cocos Creator 学习及课程设计场景覆盖 2048、小鸟、黄金矿工、开心消消乐、跑酷、扫雷、飞机大战七种玩法可直接在浏览器中运行验证。资源包共 3978 个文件约 44.27MB其中以 json 配置、meta 元数据、png 图片素材、js 逻辑脚本和 prefab 预制体为核心另含较多 anim 动画、mp3 音效、mp4 演示视频等媒体文件资源目录按七款游戏分模块组织便于按需查找。当前已有 6037 人参与学习下载。配套文档包含 Cocos 安装手册与游戏运行手册七款项目均可直接打开运行适合作为入门练手或二次开发的完整模板源码中可参考小游戏常见的碰撞检测、动画控制、地图布局、UI 交互与计分逻辑等实现思路对理解 Creator2.3.2 项目组织方式也很有帮助。1. CocosCreator 七个小游戏完整源码与其自己啃文档不如直接拆一套能跑的工程做小游戏开发最怕的不是不会写代码而是卡在「引擎会装了、文档看了一半真打开编辑器却不知道从哪下手」。这套 CocosCreator 七个小游戏源码加使用手册解决的正是这个问题——它把黄金矿工、飞机大战、消消乐这类大家耳熟能详的玩法用 CocosCreator 完整实现了一遍每个游戏都是独立工程打开就能跑、跑起来就能玩、玩完就能改。适合刚学完 CocosCreator 基础语法、想看看真实游戏项目长什么样的新手也适合接外包或者做毕设时需要一个靠谱底子直接改的熟手。我拿到手第一反应是「终于不用从零搭场景了」七套玩法对应七种不同的核心逻辑飞机大战教碰撞检测和对象池黄金矿工教射线检测和绳子物理一套源码拆完基本把 2D 小游戏的主流套路都过了一遍。2. 源码工程结构七个游戏共用一套引擎配置先搞清楚项目怎么组织2.1 根目录与编辑器版本对应关系解压后第一件事不是急着双击打开而是先看 README 或者使用手册里写的 CocosCreator 版本要求。老版本 Creator 1.x 的项目用 2.x 打开会直接报错2.x 的项目用 3.x 打开更是几乎不可能自动迁移。《使用手册》里一般会写明每个子目录对应的版本常见做法是一个主工程里塞七个场景文件夹或者七个独立工程并列。我一般会先打开根目录下的project.json或package.json看engine字段确认版本号避免盲目双击。CocosCreator 的编辑器打开项目时如果版本不匹配会弹窗提示「版本过低/过高」这时不要点强制打开否则场景文件可能被旧版本编辑器重写造成资源丢失。2.2 七个游戏的文件夹命名与场景入口打开工程后assets目录下通常按照游戏名分子文件夹比如GoldenMiner、PlaneWar、2048、Match3这种。每个子文件夹里一般有scene存放.scene场景文件、scripts存放该游戏专属的 TypeScript 或 JavaScript 脚本、textures和audio。以白鹭的飞机大战为例如果按我见过的同类型源码惯例PlaneWar.scene是主场景Game.ts是入口脚本挂在 Canvas 根节点上。场景里有背景层、玩家层、敌机层、UI 层四个节点层级这种分层的做法在 2D 游戏里几乎是标配——背景层做滚动玩家层放飞机和子弹敌机层由脚本动态生成UI 层只管分数和血量。拆完这套分层你自己写新游戏时也能照抄这个结构。2.3 公共模块与工具函数七个游戏共用一套引擎底子但代码层面往往也会抽一个common或utils目录放音频管理、本地缓存、屏幕适配工具。比如ScreenAdapter.ts处理不同分辨率下的缩放AudioManager.ts统一管理音效播放和静音开关。这里有个值得关注的细节CocosCreator 的view.setDesignResolutionSize方法在源码里经常会配合cc.ResolutionPolicy使用常见做法是FIXED_WIDTH或SHOW_ALL前者适合竖屏游戏保证宽度一致后者会留黑边但不裁切内容。看源码时留意这一行参数后面发布微信小游戏时改起来最省事。目录/文件作用assets/PlaneWar/飞机大战完整工程assets/GoldenMiner/黄金矿工完整工程assets/common/跨游戏复用工具脚本project.json引擎版本与项目配置使用手册.pdf部署步骤与常见问题3. 飞机大战从场景搭建到碰撞检测把核心玩法拆成三步3.1 场景与预制体敌机、子弹、爆炸特效的复用飞机大战之所以适合做第一个拆解对象是因为它的实体类型少但逻辑链路长。先把Prefab文件夹里的敌机预制体打开看它的节点结构一个Sprite渲染飞机图片一个BoxCollider2D做碰撞盒一个Rigidbody2D或者不用刚体、纯代码控制坐标。源码里最常见的是不用物理刚体而是用update()里直接改node.position这样性能更好控制感也更强。子弹预制体同理Bullet.prefab里只有 Sprite 和 Collider2D没有 Rigidbody。发射时通过instantiate创建实例飞行逻辑完全由Bullet.ts控制。这样做的好处是避免物理引擎的不可控性——小游戏里子弹速度动辄上千像素每秒物理引擎的碰撞检测在高速移动下容易穿透而自写移动加上cc.distance手动判定反而更稳。3.2 碰撞检测Group 分组与碰撞回调CocosCreator 的碰撞检测要走三步cc.director.getCollisionManager().enabled true开启全局碰撞给节点设置 group 分组然后在组件里实现onCollisionEnter回调。// GameCtrl.ts — 飞机大战主控制脚本关键部分 import { _decorator, Component, Node, director, CollisionManager } from cc; const { ccclass, property } _decorator; ccclass(GameCtrl) export class GameCtrl extends Component { onLoad() { // 开启全局碰撞检测——少了这行onCollisionEnter 永远不会触发 director.getCollisionManager().enabled true; // 调试模式下可看到碰撞框线框上线前务必关掉 director.getCollisionManager().enabledDebugDraw false; } start() { this.schedule(this.spawnEnemy, 1.0); // 每 1 秒生成一架敌机 } spawnEnemy() { // 从预制体生成敌机挂到场景的 enemyLayer 节点下 const enemy instantiate(this.enemyPrefab); this.enemyLayer.addChild(enemy); // 随机出生在屏幕上半部分 enemy.setPosition(Math.random() * 480 - 240, 400); } }这段代码里有两个关键参数enabled true是开关新手最容易漏spawnEnemy的间隔 1.0 秒控制了游戏难度源码里通常会把这个值绑定到关卡变量里分数越高时间越短。敌机的碰撞回调脚本里会写onCollisionEnter(other)通过other.node.group判断撞到的是子弹还是玩家从而决定销毁自己还是扣血。3.3 计分与音效UI 更新与对象池回收得分逻辑看起来简单但翻源码时注意一个性能点如果每打掉一架敌机就node.destroy()频繁创建销毁会产生内存抖动。合格的做法是维护一个对象池敌机飞出屏幕或者被击毁时pool.put(node)需要时pool.get()拿出来重置位置和血量。// Enemy.ts — 敌机脚本节选对象池回收逻辑 onCollisionEnter(other: Collider2D) { if (other.node.group bullet) { // 播放爆炸动画然后把自身归还对象池而不是销毁 this.node.destroy(); // 注意如果配了对象池这行应替换为 pool.put(this.node) } }源码里有的用destroy()有的用对象池看的时候留意区分。手动实现对象池的版本会在GameCtrl里声明enemyPool new NodePool()初始化时pool.put(instantiate(this.enemyPrefab))预热几个实例运行时pool.get()从池里拿。实践下来子弹和敌机这两个高频实体用对象池爆炸特效这种低频的可以不用。音效部分一般走AudioSource组件把playOneShot绑定到射击和爆炸回调里注意AudioSource节点要常驻别挂在被销毁的节点上。4. 黄金矿工抓钩力学与关卡设计核心玩法全在一条绳上4.1 抓钩发射与绳子拉伸的原理黄金矿工玩法的第一个技术难点是「绳子怎么画出来」。常见做法不是用真正的物理绳索而是用cc.Graphics组件动态画一条线段抓钩从钩子原点出发沿发射方向移动绳子就画成一条从原点到抓钩位置的直线。这一段源码值得细看它同时涉及角度计算和坐标转换。// Hook.ts — 抓钩发射与回收关键逻辑 let angle this.gunNode.angle * Math.PI / 180; let dir cc.v2(Math.cos(angle), Math.sin(angle)); this.hookSpeed 600; // 发射速度单位像素/秒 this.hookNode.setPosition(this.hookNode.position.add(dir.multiplyScalar(this.hookSpeed * dt)));dt是帧间隔乘以速度得到每帧位移这是所有移动类逻辑的通用写法。gunNode.angle控制发射方向源码里通常会限制在 -60 度到 60 度之间左右边界用clamp处理。抓钩碰到边界或者金矿时进入回收阶段回收速度和发射速度通常不一样——如果回收速度比发射慢很多手感会拖沓一样快则游戏节奏过紧。拿到源码后建议把发射速度、回收速度调成两个独立变量对比试玩几轮再定。4.2 抓取判定距离检测与物品价值表抓钩碰到物品后要不要抓住取决于物品的重量和抓钩的拉力。源码里常见做法是给每个物品配一个weight属性和value属性抓中后先判断当前抓钩的power是否大于weight大于就往上拉拉的过程中重量同时影响回收速度。这个逻辑用简单的表格就能设计清楚物品重量价值回收速度影响金块小150无金块大3150减速 15%钻石2300减速 5%石头50减速 40%这个数值表直接决定游戏平衡性。石头太重、金块太少玩家玩两局就腻反过来金块遍地又没有挑战性。源码给的数值不一定让每个人满意但至少提供了一个经过测试的起点。写代码时的onCollisionEnter回调里判断物品重量时要注意如果用物理碰撞抓钩速度一快可能出现碰撞穿透隧穿效应这时候要么把Rigidbody2D的bullet属性设为 true要么继续用距离判定。4.3 关卡难度曲线与金矿分布黄金矿工的关卡设计是另一个值得研究的部分。源码里一般会有一个LevelConfig或者直接用 JSON 配置每关的金矿数量、石头数量、刷新位置。进阶一点的版本会有伪随机算法保证同一关玩两遍金矿位置不完全一样但关键的金矿一定出现在可抓到的范围内。// level1.json — 第一关配置示意 { time: 60, items: [ { type: gold_small, x: 100, y: -200, depth: 1 }, { type: stone, x: 300, y: -350, depth: 2 }, { type: diamond, x: -150, y: -300, depth: 3 } ] }depth字段表示埋藏深度越深的物品抓取路径上可能遮挡越多。这算是从源码延伸到设计的部分——你改这个 JSON 就能调整难度不需要动任何代码这对新手来说是体验最好的改动入口。5. 避坑指南运行报错、资源丢失与发布适配的常见坑5.1 场景打开黑屏或报错「Cannot find module」现象正常打开场景运行后控制台报Cannot find module ./GameCtrl场景里所有脚本组件全部失效。原因大部分情况是脚本文件路径变动导致 meta 文件指向失效。CocosCreator 每个文件都配有一个.meta文件里面记录了脚本的 UUID。工程解压时如果改了文件夹名或者移动了脚本位置meta 文件的 UUID 和场景里挂载的组件引用不一致就会报错。解决不要手动改 meta 文件。正确做法是在资源管理器里右键缺失引用的脚本选择「重新导入」。更彻底的办法是关闭编辑器删除library文件夹和temp文件夹重新打开项目让引擎全量重建此时 meta 文件会重新生成。5.2 运行正常但碰撞不触发现象飞机能飞、子弹能射但子弹穿过敌机没有任何反应。原因onCollisionEnter没触发通常有四个原因叠加——collisionManager.enabled没开、碰撞体类型错误用了不带 Collider 的 Sprite 节点、碰撞体没设置分组group 默认 default、碰撞矩阵里没勾选对应分组的配对。解决先检查代码里有没有director.getCollisionManager().enabled true。确认后在编辑器里逐个选中子弹预制体和敌机预制体的 Collider2D 组件看 Size 是否大于零、是否是BoxCollider2D如果图片是圆的却用了 Box边界对不上也会「看起来像没撞上」。最后打开「分组管理」面板确认bullet分组的碰撞矩阵里勾上了和enemy分组的碰撞响应。5.3 发布微信小游戏后首屏黑屏或资源加载不全现象在 CocosCreator 预览模式一切正常构建发布到微信开发者工具后首屏只有背景图UI 和角色显示不出来或者报资源 404。原因最常见的是资源没进 bundle或者用了远程资源但没配好白名单。另一个高频坑是项目里用了cc.assetManager.loadBundle加载子包但发布设置里没勾选对应 bundle。解决构建面板里确认「资源服务器地址」为空用本地包。勾选「内联所有 SpriteFrame」把首屏需要的图集打进主包。如果游戏逻辑里用了loadBundle去微信开发者工具里看「详情-本地设置-不校验合法域名」有没有勾选调试阶段先勾上排除域名问题。我检查线上小游戏报错时还会在微信开发者工具的 console 面板里过滤Failed to load关键字逐条对照加载失败的资源路径。5.4 UGUI 习惯带到 CocosCreator 导致适配混乱现象在 UI 编辑器里拖好按钮跑到真机上按钮位置偏移或者严重变形。原因把 Unity 的 UGUI 习惯带过来了。CocosCreator 的 Canvas 适配策略和 Unity 不完全一样view.setDesignResolutionSize的设计分辨率和 Canvas 组件的CanvasScaler模式如果不匹配不同宽高比设备上就容易出问题。解决源码里一般用FIXED_WIDTH或SHOW_ALL竖屏游戏优先FIXED_WIDTH。拿到项目后先确认 Canvas 根节点的设计分辨率常见写960x640或者720x1280然后在所有 UI 元素的Widget组件里检查水平居中、垂直居中的对齐是否勾选避免出现某个按钮只设置了左边距、没设置右边距宽度变化时按钮拉伸得不成形。6. 进阶把源码改造成自己的微信小游戏一个具体的打包验证流程。七个小游戏源码覆盖了横版射击、物理抓取、三消、益智玩法类型比较杂但发布流程是共通的。选其中任意一个我一般建议从飞机大战或 2048 起步做一轮「换皮 改数值 出包」的完整流程比看十篇教程管用。这里以前面提到的飞机大战为例走一遍发布微信小游戏的流程。# 构建发布命令CocosCreator 3.x 命令行 cocos build -p wechatgame --buildMode release构建产物默认输出到build/wechatgame然后用微信开发者工具打开这个目录。这里有一个容易忽略的点CocosCreator 构建出来的微信小游戏工程会自带game.json和project.config.json但project.config.json里的appid是默认测试号需要改成自己的小游戏 AppID。改完以后在微信开发者工具里点编译如果报「app.json 未找到」或「game.json 解析失败」检查构建输出目录是否正确——有时候 CocosCreator 3.x 会输出到build/wechatgame的子目录里而不是直接根目录。首包体积控制是另一个躲不开的话题。CocosCreator 构建面板里有「内联所有 SpriteFrame」选项勾选后首帧加载速度会快很多但包体积会变大。比较稳的做法是把首屏要用的图片资源放进assets/main或直接挂在场景里其他关卡资源用 bundle 按需加载。飞机大战这类素材少的游戏基本不存在这个问题但消消乐、三消这种关卡多、资源多的就一定要用子 bundle。// 按需加载示例进入下一关时再加载该关的图集 assetManager.loadBundle(level2, (err, bundle) { if (err) return; bundle.load(textures/level2/atlas, SpriteFrame, (err, frames) { // 拿到 frames 后替换关卡节点上的 SpriteFrame }); });微信小游戏的触摸事件和 CocosCreator 的cc.EventTouch不完全等价但引擎已经做了适配。实际操作时最常见的坑是小游戏默认用touchstart而不是mousedown如果你在源码里用了node.on(cc.Node.EventType.MOUSE_DOWN, ...)在浏览器预览没问题真机小游戏里大概率没反应。正确做法是用node.on(cc.Node.EventType.TOUCH_START, ...)或者用this.node.on(touchstart, ...)。拆完源码之后顺手搜一下代码里还有没有MOUSE_前缀的事件绑定有就全部替换成TOUCH_前缀的。攻击判定在微信小游戏里的性能表现也要关注。如果飞机大战的敌机同时在场数量超过 30 架每一帧都做距离判定可能在低端安卓机上掉帧。常见做法是把敌机分成两批每 3 帧执行一次碰撞检测的循环视觉上没有任何区别但帧率会明显改善。把这套流程走完你等于把 CocosCreator 从「会写代码」推进到了「能发小游戏上架」的状态。那之后我每次拿到新的 CocosCreator 源码包都会先做一个固定动作打开脚本目录全局搜索一遍MOUSE_和destroy(前者是发布隐患后者是性能隐患确认完这两类问题再决定改不改底子。希望这些拆解和踩坑记录能帮你把这套资源用出超出它本身的价值。本文还有配套的精品资源点击获取 
长河君 · 2026/10/8 4:40:18 · 阅读 1.2k 拆解CocosCreator七个小游戏源码：飞机大战到黄金矿工的实战教程
简介一套完整的 Cocos Creator 2.3.2 七款休闲小游戏源码与实操手册面向游戏开发入门者、Cocos Creator 学习及课程设计场景覆盖 2048、小鸟、黄金矿工、开心消消乐、跑酷、扫雷、飞机大战七种玩法可直接在浏览器中运行验证。资源包共 3978 个文件约 44.27MB其中以 json 配置、meta 元数据、png 图片素材、js 逻辑脚本和 prefab 预制体为核心另含较多 anim 动画、mp3 音效、mp4 演示视频等媒体文件资源目录按七款游戏分模块组织便于按需查找。当前已有 6037 人参与学习下载。配套文档包含 Cocos 安装手册与游戏运行手册七款项目均可直接打开运行适合作为入门练手或二次开发的完整模板源码中可参考小游戏常见的碰撞检测、动画控制、地图布局、UI 交互与计分逻辑等实现思路对理解 Creator2.3.2 项目组织方式也很有帮助。1. CocosCreator 七个小游戏完整源码与其自己啃文档不如直接拆一套能跑的工程做小游戏开发最怕的不是不会写代码而是卡在「引擎会装了、文档看了一半真打开编辑器却不知道从哪下手」。这套 CocosCreator 七个小游戏源码加使用手册解决的正是这个问题——它把黄金矿工、飞机大战、消消乐这类大家耳熟能详的玩法用 CocosCreator 完整实现了一遍每个游戏都是独立工程打开就能跑、跑起来就能玩、玩完就能改。适合刚学完 CocosCreator 基础语法、想看看真实游戏项目长什么样的新手也适合接外包或者做毕设时需要一个靠谱底子直接改的熟手。我拿到手第一反应是「终于不用从零搭场景了」七套玩法对应七种不同的核心逻辑飞机大战教碰撞检测和对象池黄金矿工教射线检测和绳子物理一套源码拆完基本把 2D 小游戏的主流套路都过了一遍。2. 源码工程结构七个游戏共用一套引擎配置先搞清楚项目怎么组织2.1 根目录与编辑器版本对应关系解压后第一件事不是急着双击打开而是先看 README 或者使用手册里写的 CocosCreator 版本要求。老版本 Creator 1.x 的项目用 2.x 打开会直接报错2.x 的项目用 3.x 打开更是几乎不可能自动迁移。《使用手册》里一般会写明每个子目录对应的版本常见做法是一个主工程里塞七个场景文件夹或者七个独立工程并列。我一般会先打开根目录下的project.json或package.json看engine字段确认版本号避免盲目双击。CocosCreator 的编辑器打开项目时如果版本不匹配会弹窗提示「版本过低/过高」这时不要点强制打开否则场景文件可能被旧版本编辑器重写造成资源丢失。2.2 七个游戏的文件夹命名与场景入口打开工程后assets目录下通常按照游戏名分子文件夹比如GoldenMiner、PlaneWar、2048、Match3这种。每个子文件夹里一般有scene存放.scene场景文件、scripts存放该游戏专属的 TypeScript 或 JavaScript 脚本、textures和audio。以白鹭的飞机大战为例如果按我见过的同类型源码惯例PlaneWar.scene是主场景Game.ts是入口脚本挂在 Canvas 根节点上。场景里有背景层、玩家层、敌机层、UI 层四个节点层级这种分层的做法在 2D 游戏里几乎是标配——背景层做滚动玩家层放飞机和子弹敌机层由脚本动态生成UI 层只管分数和血量。拆完这套分层你自己写新游戏时也能照抄这个结构。2.3 公共模块与工具函数七个游戏共用一套引擎底子但代码层面往往也会抽一个common或utils目录放音频管理、本地缓存、屏幕适配工具。比如ScreenAdapter.ts处理不同分辨率下的缩放AudioManager.ts统一管理音效播放和静音开关。这里有个值得关注的细节CocosCreator 的view.setDesignResolutionSize方法在源码里经常会配合cc.ResolutionPolicy使用常见做法是FIXED_WIDTH或SHOW_ALL前者适合竖屏游戏保证宽度一致后者会留黑边但不裁切内容。看源码时留意这一行参数后面发布微信小游戏时改起来最省事。目录/文件作用assets/PlaneWar/飞机大战完整工程assets/GoldenMiner/黄金矿工完整工程assets/common/跨游戏复用工具脚本project.json引擎版本与项目配置使用手册.pdf部署步骤与常见问题3. 飞机大战从场景搭建到碰撞检测把核心玩法拆成三步3.1 场景与预制体敌机、子弹、爆炸特效的复用飞机大战之所以适合做第一个拆解对象是因为它的实体类型少但逻辑链路长。先把Prefab文件夹里的敌机预制体打开看它的节点结构一个Sprite渲染飞机图片一个BoxCollider2D做碰撞盒一个Rigidbody2D或者不用刚体、纯代码控制坐标。源码里最常见的是不用物理刚体而是用update()里直接改node.position这样性能更好控制感也更强。子弹预制体同理Bullet.prefab里只有 Sprite 和 Collider2D没有 Rigidbody。发射时通过instantiate创建实例飞行逻辑完全由Bullet.ts控制。这样做的好处是避免物理引擎的不可控性——小游戏里子弹速度动辄上千像素每秒物理引擎的碰撞检测在高速移动下容易穿透而自写移动加上cc.distance手动判定反而更稳。3.2 碰撞检测Group 分组与碰撞回调CocosCreator 的碰撞检测要走三步cc.director.getCollisionManager().enabled true开启全局碰撞给节点设置 group 分组然后在组件里实现onCollisionEnter回调。// GameCtrl.ts — 飞机大战主控制脚本关键部分 import { _decorator, Component, Node, director, CollisionManager } from cc; const { ccclass, property } _decorator; ccclass(GameCtrl) export class GameCtrl extends Component { onLoad() { // 开启全局碰撞检测——少了这行onCollisionEnter 永远不会触发 director.getCollisionManager().enabled true; // 调试模式下可看到碰撞框线框上线前务必关掉 director.getCollisionManager().enabledDebugDraw false; } start() { this.schedule(this.spawnEnemy, 1.0); // 每 1 秒生成一架敌机 } spawnEnemy() { // 从预制体生成敌机挂到场景的 enemyLayer 节点下 const enemy instantiate(this.enemyPrefab); this.enemyLayer.addChild(enemy); // 随机出生在屏幕上半部分 enemy.setPosition(Math.random() * 480 - 240, 400); } }这段代码里有两个关键参数enabled true是开关新手最容易漏spawnEnemy的间隔 1.0 秒控制了游戏难度源码里通常会把这个值绑定到关卡变量里分数越高时间越短。敌机的碰撞回调脚本里会写onCollisionEnter(other)通过other.node.group判断撞到的是子弹还是玩家从而决定销毁自己还是扣血。3.3 计分与音效UI 更新与对象池回收得分逻辑看起来简单但翻源码时注意一个性能点如果每打掉一架敌机就node.destroy()频繁创建销毁会产生内存抖动。合格的做法是维护一个对象池敌机飞出屏幕或者被击毁时pool.put(node)需要时pool.get()拿出来重置位置和血量。// Enemy.ts — 敌机脚本节选对象池回收逻辑 onCollisionEnter(other: Collider2D) { if (other.node.group bullet) { // 播放爆炸动画然后把自身归还对象池而不是销毁 this.node.destroy(); // 注意如果配了对象池这行应替换为 pool.put(this.node) } }源码里有的用destroy()有的用对象池看的时候留意区分。手动实现对象池的版本会在GameCtrl里声明enemyPool new NodePool()初始化时pool.put(instantiate(this.enemyPrefab))预热几个实例运行时pool.get()从池里拿。实践下来子弹和敌机这两个高频实体用对象池爆炸特效这种低频的可以不用。音效部分一般走AudioSource组件把playOneShot绑定到射击和爆炸回调里注意AudioSource节点要常驻别挂在被销毁的节点上。4. 黄金矿工抓钩力学与关卡设计核心玩法全在一条绳上4.1 抓钩发射与绳子拉伸的原理黄金矿工玩法的第一个技术难点是「绳子怎么画出来」。常见做法不是用真正的物理绳索而是用cc.Graphics组件动态画一条线段抓钩从钩子原点出发沿发射方向移动绳子就画成一条从原点到抓钩位置的直线。这一段源码值得细看它同时涉及角度计算和坐标转换。// Hook.ts — 抓钩发射与回收关键逻辑 let angle this.gunNode.angle * Math.PI / 180; let dir cc.v2(Math.cos(angle), Math.sin(angle)); this.hookSpeed 600; // 发射速度单位像素/秒 this.hookNode.setPosition(this.hookNode.position.add(dir.multiplyScalar(this.hookSpeed * dt)));dt是帧间隔乘以速度得到每帧位移这是所有移动类逻辑的通用写法。gunNode.angle控制发射方向源码里通常会限制在 -60 度到 60 度之间左右边界用clamp处理。抓钩碰到边界或者金矿时进入回收阶段回收速度和发射速度通常不一样——如果回收速度比发射慢很多手感会拖沓一样快则游戏节奏过紧。拿到源码后建议把发射速度、回收速度调成两个独立变量对比试玩几轮再定。4.2 抓取判定距离检测与物品价值表抓钩碰到物品后要不要抓住取决于物品的重量和抓钩的拉力。源码里常见做法是给每个物品配一个weight属性和value属性抓中后先判断当前抓钩的power是否大于weight大于就往上拉拉的过程中重量同时影响回收速度。这个逻辑用简单的表格就能设计清楚物品重量价值回收速度影响金块小150无金块大3150减速 15%钻石2300减速 5%石头50减速 40%这个数值表直接决定游戏平衡性。石头太重、金块太少玩家玩两局就腻反过来金块遍地又没有挑战性。源码给的数值不一定让每个人满意但至少提供了一个经过测试的起点。写代码时的onCollisionEnter回调里判断物品重量时要注意如果用物理碰撞抓钩速度一快可能出现碰撞穿透隧穿效应这时候要么把Rigidbody2D的bullet属性设为 true要么继续用距离判定。4.3 关卡难度曲线与金矿分布黄金矿工的关卡设计是另一个值得研究的部分。源码里一般会有一个LevelConfig或者直接用 JSON 配置每关的金矿数量、石头数量、刷新位置。进阶一点的版本会有伪随机算法保证同一关玩两遍金矿位置不完全一样但关键的金矿一定出现在可抓到的范围内。// level1.json — 第一关配置示意 { time: 60, items: [ { type: gold_small, x: 100, y: -200, depth: 1 }, { type: stone, x: 300, y: -350, depth: 2 }, { type: diamond, x: -150, y: -300, depth: 3 } ] }depth字段表示埋藏深度越深的物品抓取路径上可能遮挡越多。这算是从源码延伸到设计的部分——你改这个 JSON 就能调整难度不需要动任何代码这对新手来说是体验最好的改动入口。5. 避坑指南运行报错、资源丢失与发布适配的常见坑5.1 场景打开黑屏或报错「Cannot find module」现象正常打开场景运行后控制台报Cannot find module ./GameCtrl场景里所有脚本组件全部失效。原因大部分情况是脚本文件路径变动导致 meta 文件指向失效。CocosCreator 每个文件都配有一个.meta文件里面记录了脚本的 UUID。工程解压时如果改了文件夹名或者移动了脚本位置meta 文件的 UUID 和场景里挂载的组件引用不一致就会报错。解决不要手动改 meta 文件。正确做法是在资源管理器里右键缺失引用的脚本选择「重新导入」。更彻底的办法是关闭编辑器删除library文件夹和temp文件夹重新打开项目让引擎全量重建此时 meta 文件会重新生成。5.2 运行正常但碰撞不触发现象飞机能飞、子弹能射但子弹穿过敌机没有任何反应。原因onCollisionEnter没触发通常有四个原因叠加——collisionManager.enabled没开、碰撞体类型错误用了不带 Collider 的 Sprite 节点、碰撞体没设置分组group 默认 default、碰撞矩阵里没勾选对应分组的配对。解决先检查代码里有没有director.getCollisionManager().enabled true。确认后在编辑器里逐个选中子弹预制体和敌机预制体的 Collider2D 组件看 Size 是否大于零、是否是BoxCollider2D如果图片是圆的却用了 Box边界对不上也会「看起来像没撞上」。最后打开「分组管理」面板确认bullet分组的碰撞矩阵里勾上了和enemy分组的碰撞响应。5.3 发布微信小游戏后首屏黑屏或资源加载不全现象在 CocosCreator 预览模式一切正常构建发布到微信开发者工具后首屏只有背景图UI 和角色显示不出来或者报资源 404。原因最常见的是资源没进 bundle或者用了远程资源但没配好白名单。另一个高频坑是项目里用了cc.assetManager.loadBundle加载子包但发布设置里没勾选对应 bundle。解决构建面板里确认「资源服务器地址」为空用本地包。勾选「内联所有 SpriteFrame」把首屏需要的图集打进主包。如果游戏逻辑里用了loadBundle去微信开发者工具里看「详情-本地设置-不校验合法域名」有没有勾选调试阶段先勾上排除域名问题。我检查线上小游戏报错时还会在微信开发者工具的 console 面板里过滤Failed to load关键字逐条对照加载失败的资源路径。5.4 UGUI 习惯带到 CocosCreator 导致适配混乱现象在 UI 编辑器里拖好按钮跑到真机上按钮位置偏移或者严重变形。原因把 Unity 的 UGUI 习惯带过来了。CocosCreator 的 Canvas 适配策略和 Unity 不完全一样view.setDesignResolutionSize的设计分辨率和 Canvas 组件的CanvasScaler模式如果不匹配不同宽高比设备上就容易出问题。解决源码里一般用FIXED_WIDTH或SHOW_ALL竖屏游戏优先FIXED_WIDTH。拿到项目后先确认 Canvas 根节点的设计分辨率常见写960x640或者720x1280然后在所有 UI 元素的Widget组件里检查水平居中、垂直居中的对齐是否勾选避免出现某个按钮只设置了左边距、没设置右边距宽度变化时按钮拉伸得不成形。6. 进阶把源码改造成自己的微信小游戏一个具体的打包验证流程。七个小游戏源码覆盖了横版射击、物理抓取、三消、益智玩法类型比较杂但发布流程是共通的。选其中任意一个我一般建议从飞机大战或 2048 起步做一轮「换皮 改数值 出包」的完整流程比看十篇教程管用。这里以前面提到的飞机大战为例走一遍发布微信小游戏的流程。# 构建发布命令CocosCreator 3.x 命令行 cocos build -p wechatgame --buildMode release构建产物默认输出到build/wechatgame然后用微信开发者工具打开这个目录。这里有一个容易忽略的点CocosCreator 构建出来的微信小游戏工程会自带game.json和project.config.json但project.config.json里的appid是默认测试号需要改成自己的小游戏 AppID。改完以后在微信开发者工具里点编译如果报「app.json 未找到」或「game.json 解析失败」检查构建输出目录是否正确——有时候 CocosCreator 3.x 会输出到build/wechatgame的子目录里而不是直接根目录。首包体积控制是另一个躲不开的话题。CocosCreator 构建面板里有「内联所有 SpriteFrame」选项勾选后首帧加载速度会快很多但包体积会变大。比较稳的做法是把首屏要用的图片资源放进assets/main或直接挂在场景里其他关卡资源用 bundle 按需加载。飞机大战这类素材少的游戏基本不存在这个问题但消消乐、三消这种关卡多、资源多的就一定要用子 bundle。// 按需加载示例进入下一关时再加载该关的图集 assetManager.loadBundle(level2, (err, bundle) { if (err) return; bundle.load(textures/level2/atlas, SpriteFrame, (err, frames) { // 拿到 frames 后替换关卡节点上的 SpriteFrame }); });微信小游戏的触摸事件和 CocosCreator 的cc.EventTouch不完全等价但引擎已经做了适配。实际操作时最常见的坑是小游戏默认用touchstart而不是mousedown如果你在源码里用了node.on(cc.Node.EventType.MOUSE_DOWN, ...)在浏览器预览没问题真机小游戏里大概率没反应。正确做法是用node.on(cc.Node.EventType.TOUCH_START, ...)或者用this.node.on(touchstart, ...)。拆完源码之后顺手搜一下代码里还有没有MOUSE_前缀的事件绑定有就全部替换成TOUCH_前缀的。攻击判定在微信小游戏里的性能表现也要关注。如果飞机大战的敌机同时在场数量超过 30 架每一帧都做距离判定可能在低端安卓机上掉帧。常见做法是把敌机分成两批每 3 帧执行一次碰撞检测的循环视觉上没有任何区别但帧率会明显改善。把这套流程走完你等于把 CocosCreator 从「会写代码」推进到了「能发小游戏上架」的状态。那之后我每次拿到新的 CocosCreator 源码包都会先做一个固定动作打开脚本目录全局搜索一遍MOUSE_和destroy(前者是发布隐患后者是性能隐患确认完这两类问题再决定改不改底子。希望这些拆解和踩坑记录能帮你把这套资源用出超出它本身的价值。本文还有配套的精品资源点击获取