简介微信小游戏《果蔬去哪了》是一款休闲益智类产品这份源码与素材包适合正在学习微信小游戏开发、或希望借助Cocos Creator完整工程快速上手小游戏项目的开发者。压缩包共738个文件、约6.79MB包含png游戏贴图、js逻辑脚本、json配置文件、mp3音频、atlas/plist图集以及cocos2d-js-min.js引擎文件清晰展示了从图像资源、动画序列到程序代码的整体组织方式。该资源已有615人学习下载源码覆盖游戏框架、点击消除事件处理、CSS3/JavaScript动效、计分与关卡逻辑、UI布局、本地数据存储、错误处理、性能优化、资源预加载与释放等关键实现并预留了网络通信接口便于扩展。配合全部图片、音效与动画素材开发者可以一步步还原《果蔬去哪了》的完整玩法无论初学者还是有经验的开发者都能从这套工程中提炼可复用的设计思路并在此基础上改造出属于自己的微信小游戏。1. 先给《果蔬去哪了》源码包定性能上线的工程和教学 Demo 差在哪第一次拿到《果蔬去哪了》这套微信小游戏线上源码和资源时我第一反应不是急着打开工具而是先审一遍它够不够「线上」两个字。线上和教学 Demo 的区别就在三样东西上一个规范的小游戏入口 game.js 和配套的 game.json一套组织清晰的图片、音频资源以及配置上能让你绕开开发环境直接上真机验证的工程设置。三者缺一就只能算 Demo补齐了才谈得上下一步。这篇文章按我的接手顺序来写先读包结构再本地跑通接着动资源改玩法最后把上线前那些高频坑提前踩一遍。适合正在做果蔬、消除、配对这类休闲小游戏的新团队也适合想拿现成工程练手微信小游戏架构的开发者——结构和资源都是能复用的一等公民。2. 源码包结构拆解从入口文件到资源目录先画出代码地图拿到源码包别急着双击 project.config.json 往编辑器里拖。我习惯先把整个目录摊开看一遍因为线上工程的坑大多藏在组织方式里——入口文件、资源目录、配置字段任何一样放错位置开发者工具都能给你报一个看似无关的错。这一章只干一件事建立代码地图让你在改任何东西之前先知道它躺在哪个文件里。2.1 目录地图每个文件该放什么、不该放什么这类线上源码包的骨架一般长这样我建议你把包里的实际目录和它对一遍重点看入口和资源位置果蔬去哪了/ ├─ game.js # 小游戏入口全局只有一个 ├─ game.json # 小游戏配置横竖屏、网络超时、分包声明 ├─ project.config.json # 开发者工具工程配置不含业务逻辑 ├─ js/ │ ├─ main.js # 启动顺序与场景切换 │ ├─ scene/ │ │ ├─ bootScene.js # 加载资源用的启动场景 │ │ ├─ gameScene.js # 主玩法场景 │ │ └─ overScene.js # 结算场景 │ ├─ utils/ │ │ ├─ atlas.js # 合图雪碧图加载与取帧 │ │ └─ audio.js # 音频统一封装 │ └─ conf/ │ └─ levels.js # 关卡配置出哪些果蔬、限时多少 └─ res/ ├─ images/ # 独立散图UI 按钮之类 ├─ atlas/ # 合图fruits.json fruits.png 成对出现 └─ audio/ # BGM、点击、答对、答错音效看目录先找两个东西game.js 和 game.json。game.js 是微信小游戏唯一确定的入口文件开发者工具编译时首先读它game.json 决定运行环境比如横屏还是竖屏、要不要状态栏、哪些目录是分包。res 目录的命名基本能看出资源是散图还是合图——散图适合 UI 和数量少的图标果蔬这类大量重复出现的游戏元素基本都走合图后面第 4 章会专门说。另外如果目录里出现 stage/ 这类分包目录不要把它当成普通资源文件夹。它的意思是某些场景要延后加载降低首包体积。改错这里提审时包体可能直接超上限。2.2 入口与主循环GameApp、场景切换和时间步长小游戏没有 DOM没有 document.getElementById页面渲染全靠 Canvas。所以你看到的入口代码不会有 index.html而是从 game.js 开始挂一个全局对象// game.js小游戏的唯一入口被开发者工具直接执行 const { GameApp } require(./js/main.js); // 小游戏的启动时机要等 onShow 之后 Canvas 才完全就绪 GameApp.getInstance().onLaunch();require 是 CommonJS 模块写法微信小游戏支持。GameApp 用单例模式防止开发工具热重载时重复初始化。main.js 内部通常还会做一次兼容降级——在基础库版本不支持 requestAnimationFrame 时退回 setTimeout避免低端机白屏// js/main.js启动顺序与主循环 const raf typeof requestAnimationFrame function ? (cb) requestAnimationFrame(cb) : (cb) setTimeout(() cb(Date.now()), 16); class GameApp { constructor() { this.scene null; this.lastTime 0; } onLaunch() { this.bindEvents(); } bindEvents() { // 切后台再切回来dt 会被拉大必须截断 wx.onShow(() { this.lastTime 0; this.loop(); }); } loop() { const now Date.now(); const dt Math.min(now - this.lastTime, 50); // 上限 50ms 防止瞬移 this.lastTime now; this.scene this.scene.update(dt); this.scene this.scene.render(); raf(() this.loop()); } }这段代码最值得抄的是 dt 截断。微信小游戏切后台回前台Date.now() 的差值可能是几秒甚至几十秒如果你直接拿它去做移动步长果蔬会瞬移到屏幕外截断到 50ms 后最多跳一帧体验不会出现断层。「果蔬去哪了」这类点选或配对玩法的对象位置大多由场景管理update 和 render 分离正好方便分析和改动。画面切换通常再包一层场景管理器把 boot、game、over 三个场景注册成表切换时不销毁对象而是替换引用// 场景注册表新增场景只需在表里加一行 const scenes { boot: BootScene, game: GameScene, over: OverScene, }; function switchTo(name, params) { const SceneCls scenes[name]; if (!SceneCls) throw new Error(scene not found: name); const app GameApp.getInstance(); app.scene app.scene.onExit app.scene.onExit(); app.scene new SceneCls(params); app.scene.onEnter app.scene.onEnter(); }场景名约定成 boot、game、over 是这类项目的惯用套路好处是新增玩法场景时不需要改动主循环只往表里加一行。参数 params 一般用来传关卡号或者上次得分switchTo 的调用方不必关心场景内部怎么消费这些参数。2.3 资源约定图片、音频、关卡 JSON 各自的位置和命名习惯目录内容接手时的两个注意点js/conf/levels.js关卡配置找「出题」「时限」字段别在场景代码里瞎搜res/images/独立散图换图时保持同名或同步改引用res/atlas/合图 json png只改 png 会错位必须重新生成 jsonres/audio/音效与 BGMmp3 优先避免冷门编码命名习惯上我强烈建议保持英文小写加下划线像 a_fruit_apple.png 这样。不要出现中文路径尤其是食材名用拼音命名的情况部分安卓机型的文件系统对中文路径支持有坑线上包最容易在这里翻车。资源的相对引用路径建议统一以 / 开头比如 /res/atlas/fruits.png这是小游戏环境的标准写法。3. 本地跑通最小路径导入项目、改三处配置、把首屏跑出来结构认完了剩下就是把它在微信开发者工具里跑起来。这一步大多数人栽在「目录选错」和「配置文件没改」上下面按我自己的顺序来。先别管玩法逻辑目标是看到首屏果蔬画面稳定出现并且点击有反馈。3.1 导入的正确姿势选目录、选 AppID、开调试导入步骤按下面走缺一步都可能给你埋个后期雷打开微信开发者工具项目类型选「小游戏」不是「小程序」这两者的编译目标不一样。目录选到包含 game.json 的那一层既不是它上一级也不是它下一级。选错层级是最常见的导入失败原因。AppID 没有的话直接选「测试号」不影响本地跑通有游戏类 AppID 就填自己的。导入后点「详情 — 本地设置」勾上「不校验合法域名」。这一步只影响开发期正式上线以管理后台配置为准。选 AppID 这里有个细节测试号模式下 wx.login 拿不到真实 openid本地模拟没问题但如果你要接排行榜、云存储这类能力后面得换成正式游戏 AppID 再联调。项目名建议在 project.config.json 里改成英文小写下划线中文项目名在某些版本的工具里会引发路径转义问题。3.2 两个配置文件的三处必改项先把工程配置打开确认下面三个字段{ appid: touristappid, compileType: game, projectname: guoshu_qu_na_le, libVersion: latest }appid 默认是 touristappid表示游客测试号发布前要改成你自己的。compileType 必须是 game如果这里是 miniProgram工具会按小程序逻辑编译报一堆莫名其妙的错。projectname 最好用英文小写下划线避免部分机器上的路径问题。再看 game.json这是小游戏运行时的总开关{ deviceOrientation: portrait, showStatusBar: true, networkTimeout: { request: 5000, connectSocket: 5000 }, subpackages: [ { name: stage, root: stage/ } ] }deviceOrientation 控制横竖屏果蔬题材休闲游戏默认 portrait 竖屏追求沉浸感的改成 landscape 也行。showStatusBar 决定顶部是否显示系统状态栏部分工具版本在 true 时会出现刘海屏适配问题。subpackages 声明分包后root 字段指向的目录必须真实存在否则编译直接报错不存在就整段删掉。3.3 首屏验证清单看到什么算通了跑通后别急着改代码先对照这份清单确认环境干净Console 没有红色 error最多有 deprecated 警告。bootScene 日志能看到资源加载进度说明启动链路正常。模拟器里出现果蔬标题或开始按钮点击后有音效反馈。切一次后台再回来画面没有黑屏或跑飞。常见误导是开发者工具里一切正常真机白屏。原因是本地调试勾了「不校验合法域名」同时资源路径用了绝对地址真机环境解析时机不一样。这个坑在第 5 章展开这里先记住首屏验证只代表本地通了不代表真机通。4. 资源与玩法改造合图加载、音效适配、判定与数值调参这一章是动手改代码的重头戏。很多人拿到源码后第一件事是换素材、调手感结果换完图错位、音效不响、难度失衡。其实根源都在三个地方资源的加载方式、音效的持有方式、判定代码的耦合位置。逐个拆开看。4.1 合图与单图替换怎样换素材并且不踩到合图坑Canvas 2D 里每调一次 drawImage 就是一次贴图操作全用散图会大量占用渲染时间把几十个果蔬合成一张大图运行时按小图坐标裁剪性能会好一个量级。这就是 res/atlas/ 下 fruits.json fruits.png 成对出现的原因。合图 JSON 一般长这样{ frames: { apple.png: { frame: { x: 2, y: 2, w: 64, h: 64 } }, tomato.png: { frame: { x: 68, y: 2, w: 64, h: 64 } } } }读取合图并绘制小图的封装大概是这样// atlas.js读取合图 json建立 name - 小图矩形 的映射 function loadAtlas(jsonPath, imagePath) { return new Promise((resolve, reject) { const img wx.createImage(); img.onload () resolve({ img, frames: require(jsonPath).frames }); img.onerror reject; img.src imagePath; // 小游戏环境的相对路径 }); } // 渲染时按帧信息裁剪sx/sy/sw/sh 取自合图 function drawFrame(ctx, atlas, name, dx, dy) { const f atlas.frames[name].frame; ctx.drawImage(atlas.img, f.x, f.y, f.w, f.h, dx, dy, f.w, f.h); }注意 f.x、f.y 是原图在大图里的像素坐标不是 UI 坐标。换素材时最常见的错误是只替换 fruits.png不重新生成 fruits.json结果旧坐标裁出新图的其他部分果蔬串了脸。正确做法是用工具重新导出合图保证 json 和 png 成对更新。如果只换一两张素材也可以临时改成散图加载用 wx.createImage 直接读 res/images 下的同名文件代价是 draw 次数增加低端机上会掉帧。4.2 音效适配格式选择、预加载与播放回调用法wx.createInnerAudioContext 创建的音频实例模拟器上怎么播都正常真机上问题一堆。格式上 mp3 覆盖面最大但部分老安卓对高码率 mp3 解码有问题常见做法是统一转成 128kbps并把短音效在场景加载时预创建实例避免每次点击现场 new 一个// audio.js统一音频管理避免每次播放都 new 实例 const cache {}; function preload(name, src) { const audio wx.createInnerAudioContext(); audio.src src; audio.onError((e) console.warn(audio error, name, e)); cache[name] audio; } function play(name) { const audio cache[name]; if (!audio) return; audio.stop(); audio.play(); }preload 的第二个参数 src 建议写成 /res/audio/pick.mp3 这样的绝对相对路径不要用 ./res/audio/pick.mp3后者在部分基础库版本下解析不一致。play 之前先调 stop 是为了快速连点时不叠音音效手感会干净很多。真机无声时先看 onError 输出再查音频格式最后查基础库版本——顺序反了容易被误导。4.3 玩法判定的常见形态点选型的命中判定与状态流转处理这类源码时我一般先判断它属于三种形态里的哪一种找茬点选型、配对消除型、归类放置型。三种玩法的代码核心都围绕「果蔬对象的 type 和 state」两个字段区别只在点击后怎么走状态。下面是点选型最常见的一套骨架// 每个果蔬对象的核心字段 const item { id: 7, type: apple, // 素材类型用于判定对不对 state: idle, // idle 待点选 / picked 已选中 / settled 已消除 x: 120, y: 300, w: 60, h: 60 }; // 命中测试触摸点是否落在果蔬矩形内 function hitTest(tx, ty, item) { return tx item.x tx item.x item.w ty item.y ty item.y item.h; } // 点击处理点对进 picked点错震动提示 function handleTap(touch) { const hit scene.items.find((it) hitTest(touch.x, touch.y, it)); if (!hit) return; if (hit.type ! level.wantedType) { wx.vibrateShort({ type: light }); return; } hit.state picked; checkWin(); }level 是当前关卡对象由 switchTo 从 levels.js 传进来wantedType 表示本关要点的果蔬类型。改成配对消除型时把「点对即 picked」换成「两个已 picked 的 item 比较 id相同才 settled」归类放置型则看触摸结束位置是否落在目标区域。改判定逻辑时最忌讳直接在 render 里写状态判断状态流转只放在 update 和事件函数里画面表现只根据 state 映射。4.4 难度曲线时间、目标数量、步数三个参数先调哪个参数位置手感影响第一次调整建议限时levels.js 每关 time 字段直接决定紧张感从原值 15 秒开始试目标数量levels.js 每关 target 字段决定单局时长每次加减 12 个步数或点错惩罚levels.js 或场景内常量决定容错空间点错扣时间改成扣步数我一般先调限时跑三局感觉节奏再动目标数量。三个参数一起改调崩了根本分不清是哪个改过头。数值改完记得冷启动验证一遍热重载和真机冷启动的计时基准不一样启动速度差甚至会吃掉一秒限时。5. 避坑清单5 个线上小游戏高频翻车点与排查顺序这一章直接给结论。以下五个问题是我在接手类似源码包时遇到次数最多的每条都按现象—原因—解决来写你可以把它当成排查手册用。5.1 编译报错找不到 game.js几乎都是目录层级选错现象导入后工具提示 game.js 不存在或者编译立刻失败。原因双击解压后目录多套了一层比如真正项目在 guoshu_qu_na_le/ 里你导入的是外层文件夹也可能误把 js 目录当成了根目录。工具只认 game.json 所在的层级。解决打开文件管理器找到包含 game.json 的那一层重新导入。拿不准就搜 game.json它旁边必须躺着 game.js 和 project.config.json。5.2 真机白屏模拟器正常资源 onload 和绝对路径两大元凶现象开发者工具里画面正常手机预览白屏Console 可能没有任何报错。原因图片没等 onload 完成就开始 drawImage。开发者工具本地解码极快真机解码慢首帧绘制时 image 还没就绪整个场景画了个寂寞。另一个常见原因是 src 写了带 ./ 的相对路径真机解析时机不一致。解决所有资源加载改成 Promise 化启动场景等全部 onload 后再切主场景loadAtlas(/res/atlas/fruits.json, /res/atlas/fruits.png) .then((atlas) { bootScene.init(atlas); }) .catch((e) console.error(atlas load failed, e));init 必须发生在 onload 之后任何提前引用 atlas.img 的代码都是定时炸弹。5.3 模拟器有声音真机无声音频实例生命周期与格式问题现象模拟器点击果蔬有音效手机上一声不吭。原因三个候选——音频实例被垃圾回收、src 相对路径解析失败、音频编码格式真机不支持。解决把音频实例存进模块级 cache 持有引用参考第 4.2 节的封装src 统一改成 /res/audio/xxx.mp3 绝对相对路径格式统一转 128kbps 的 mp3。修复后用 onError 回调确认是否还有报错不要凭感觉重试。5.4 模拟器能联网真机超时合法域名白名单没配现象排行榜或资源请求在模拟器正常真机预览全部 timeout。原因本地设置里勾了「不校验合法域名」这个开关只在开发者工具生效。真机上 wx.request 强制要求域名是 HTTPS且已加入后台的 request 合法域名白名单。解决上线前到管理后台把请求域名加进白名单或者改用云托管免域名配置。提审前拿预览版真机跑一遍网络请求这是唯一靠谱的验证方式。5.5 改了资源不生效工具缓存与合图 json 同步问题现象替换了图片、改了 json重新编译画面还是旧素材。原因开发者工具的本地缓存没清或者是合图只换了 png 没换 json坐标裁出来还是旧内容。解决先清缓存——工具栏「清缓存 — 清除全部」再重新编译。如果换的是合图里的小图必须用工具重新导出合图确保 json 和 png 成对更新。改文件名强制刷新也是土办法但记得把代码里的引用一起改掉。6. 上线前最后一关帧率自检、资源体积与埋点开关6.1 提审前十分钟的四个检查检查项做法通过标准帧率打开工具帧率面板或代码统计稳定在 55 以上不出现周期性卡顿包体详情面板看上传大小首包不超上限分包配置对得上域名管理后台核对白名单所有 wx.request 均为 HTTPS 已备案域名真机一台低端安卓加一台老旗舰机无白屏、无内存持续上涨6.2 实测帧率用 60 行代码代替肉眼模拟器帧率说明不了问题低端机才是试金石。我提审前会往主循环开头临时挂一段诊断代码let last 0, frames 0, fps 0; function measure() { const now Date.now(); if (last 0) fps 1000 / (now - last); last now; if (frames % 60 0) console.log(fps, fps.toFixed(1)); requestAnimationFrame(measure); } measure();连续跑五秒看日志里 fps 的波动幅度。如果个别帧掉到 30 以下多半是合图没用上或者每帧 new 了临时对象回到第 4 章的思路排查。跑完这段代码记得删掉它本身挂在主循环外会额外触发一次渲染调度。6.3 我的收尾习惯交付前我一定完整跑三局从冷启动开始记录启动耗时、首次音效延迟、切后台再回前台的表现。这个习惯救过我几次教训是同一个热重载正常不代表冷启动正常模拟器流畅不代表低端机流畅。我现在的规矩是任何一次数值改动或资源替换都跟一局完整测试而不是看一眼首屏就收工。这套工程本身不难难的是把每一个变量都验证到位。希望帮到你。本文还有配套的精品资源点击获取