简介：这套微信小游戏源码围绕猫咪主题展开，适合初学微信小游戏开发的读者作为入门参考，也便于快速理解小游戏工程中页面、脚本与静态资源之间的组织关系。资源包为zip压缩格式，大小仅49KB，共包含6个文件：2个png图片与1个jpg图片用于猫咪形象和界面展示，1个js脚本承担核心交互逻辑（含jQuery），1个htm页面作为游戏主体入口，另有1个txt说明文档用于版权提示，文件类型覆盖小游戏基础组成要素。目前已有648人学习下载，属于轻量级的学习样例。读者可从这份源码中看到猫咪游戏简单实现的基本轮廓，包括图片素材如何被页面调用、脚本如何驱动界面变化，同时也能借助工程结构为自己的小游戏练手或二次改编提供起点，不过资源仅用于学习参考，内容完整性和可运行性需要自行验证。
1. 一份猫咪游戏源码到手，先别急着双击运行
任何挂着“源码”二字的微信小游戏资源，下载后第一件事都不是打开项目，而是先看它是什么引擎做的。市面上流通的猫咪游戏源码，九成是 Cocos Creator 工程，剩下的一成里 Unity WebGL 导出的占大头，偶尔能碰到用纯 JavaScript + Canvas 写的原型。三者跑起来的姿势完全不同：Cocos 工程要装对应版本的 Creator 才能打开，Unity 工程需要先确认是否用了微信小游戏适配插件，原生 JS 版本反而最简单，微信开发者工具里直接导入就能预览。判断错了，后面每一步都在浪费时间。
这篇博文按一线工程师拿到源码后的真实路径来写：先识别工程类型，再本地跑通，接着拆代码找改造点，最后处理发布和合规。对 5 年以上的老手，重点放在第三、四章的参数和坑上，尤其是 Unity WebGL 导出微信小游戏的模板配置和内存限制；对刚入门的读者，第二章提供了复制即用的操作步骤。标题里的“仅用于学习参考”不是客套话，它意味着这份源码大概率有注释不全、资源缺失、甚至引用了别人家美术素材的问题，学习它的代码结构可以，直接换皮上线有侵权风险，这一点必须记在心里。
2. 先识别猫咪游戏源码的引擎类型，再决定用哪套工具链跑起来
拿到压缩包后先解压，按住 Shift 点右键打开终端（macOS 用终端 App 或 iTerm），输入ls -la看目录结构。这一步只要能分清 Cocos Creator、Unity、原生 JS 三类工程，后续工具链的选择就顺理成章了。
2.1 三种工程的目录特征和对应开发工具
Cocos Creator 工程最明显的标志是根目录下有assets和project.json，还可能带settings目录。assets里按场景、脚本、资源分门别类，脚本后缀是.ts或.js，场景文件是.scene，动画是.anim。这类工程打开时必须用 Creator 编辑器，而且大版本要匹配——用 Cocos Creator 3.x 打开一个 2.x 工程，大概率直接报资源加载失败或脚本编译错误。
Unity 工程的特征是根目录带Assets、Packages、ProjectSettings三个必备文件夹，Assets下面能看到.unity场景文件和.cs脚本。如果这个猫咪游戏原本就是为微信小游戏开发的，Assets下一般会有WX-WASM-SDK或类似名称的插件目录，这是 Unity 官方或第三方做的 WebGL 转微信小游戏的适配层。没有这个插件想把 Unity 工程跑进微信小游戏，中间要补的工具链会让你怀疑人生。
纯原生 JS 工程的判断最简单：根目录直接是game.js、game.json、js目录（或者src目录），有的还带libs。这种源码不需要任何引擎编辑器，微信开发者工具创建“小游戏”项目后，把目录指过去就能预览。
对着目录特征确认类型后，从下面选对应的工具：
| 工程类型 | 必备工具 | 版本要求 |
|---|---|---|
| Cocos Creator | Cocos Dashboard + Creator 编辑器 | 参考工程的 project.json 里engine版本字段 |
| Unity + 微信插件 | Unity Hub + 对应版本 Unity | 插件说明文件一般标注了 Unity 版本下限 |
| 原生 JS | 微信开发者工具 | 小游戏基础库 2.x 以上即可 |
2.2 用微信开发者工具跑通原生 JS 和 Cocos 导出的工程
微信开发者工具是绕不过去的环节。下载安装后打开，点“小游戏”分类，再点“导入”按钮，把解压后的目录指过去。AppID 可以点“测试号”，它会自动生成一个临时 AppID，不需要注册认证也能在开发者工具里跑，但真机预览会有限制，后面第 5 章细说。
导入后如果看到的是 Cocos Creator 直接导出的wechatgame目录，那么 game.json 和 game.js 都在顶层。直接点编译，一般能出画面。常见的一个问题是报错TypeError: Cannot read property 'createCanvas' of undefined，这是基础库版本不对，点右上角的“详情 → 本地设置”，把调试基础库切到 2.20.0 以上就好。
终端里敲命令确认目录结构比眼睛扫更快：
find . -maxdepth 2 -type d | head -30看到assets+project.json就是 Cocos 的构建产物，看到game.js+game.json在顶层就是准备给开发者工具直接吃的。如果发现game.js在js或src子目录里，像下面这样直接改 game.json 的入口字段指向它：
{ "deviceOrientation": "landscape", "showStatusBar": false, "networkTimeout": { "request": 5000 }, "subpackages": [] }deviceOrientation改成portrait就变竖屏，猫咪题材的游戏竖屏居多，横屏的通常是有跑酷或跳跃玩法的。networkTimeout里的数值单位是毫秒，小游戏里网络请求超时别设太短，弱网环境下 5 秒以上比较稳妥。
2.3 Unity 工程如何确认微信适配插件是否就位
Unity 工程不能直接丢给开发者工具。猫咪游戏如果是 Unity 做的，先开 Unity Hub，用工程要求的版本打开项目，然后在菜单栏找微信小游戏或WX-WASM相关的菜单项，确认 SDK 是否安装。没有这个菜单，就去 Package Manager 里搜微信或WeChat，装好对应的官方适配包。
确认插件后还要检查 WebGL 模板。菜单路径一般是Project Settings → Player → Publishing Settings → WebGL Template，正常应该能看到微信小游戏模板而不是默认的Default。模板决定了生成的 interop 代码如何加载微信的wxAPI。
在工程根目录的ProjectSettings/ProjectVersion.txt里能看到 Unity 具体版本，这个信息在导入工程时报错时最有用。很多猫咪源码的原作者用的是 2021.3 LTS 版本，如果你装了 2022.3 打开，脚本 API 基本兼容，但如果有旧版本第三方插件就可能报SerializedObjectNotCreatableException之类的错，此时切回 2021.3 能省一个晚上。
提示：拿到 Unity 工程后先在
ProjectSettings里翻ProjectVersion.txt，按原版本安装，不要用最新版硬开。微信小游戏插件的版本往往和 Unity 版本绑定，强升 Unity 后插件可能直接失效。
3. 从 game.js 到猫咪动画：拆解小游戏源码的调用链路
工程能跑起来只是开始，学习源码的目的是搞明白一只猫是怎么画出来、怎么动起来、怎么和用户交互的。微信小游戏的运行环境是浏览器内核，没有 DOM 和 CSS，所有画面都得走 Canvas 或 WebGL 渲染。理解这条链路，你改代码时才知道动哪里。
3.1 入口文件在做什么：注册生命周期和加载主场景
任何微信小游戏的入口都由game.json指向，通常是game.js。先打开看整体结构，梳理一下生命周期。Cocos 导出的game.js一般长这样：
import './polyfills'; import { game } from 'cc'; import { BootLoader } from './assets/main/BootLoader'; wx.showShareMenu({ withShareTicket: true }); game.on(Game.EVENT_GAME_INITED, () => { console.log('[game] init success'); }); game.boot();关键参数说明：wx.showShareMenu是开启右上角菜单里的转发按钮，withShareTicket: true表示要拿到分享群的标识，这个在猫咪喂养类游戏里常用于做群排行。game.boot()是 Cocos 引擎接手的主入口，它会读取settings.json里配置的首个场景并加载。
原生 JS 小游戏的 game.js 一般自己维护状态机，核心结构是三个函数：
const canvas = wx.createCanvas(); const ctx = canvas.getContext('2d'); let lastTime = 0; let cat = { x: 100, y: 200, state: 'idle' }; function update(dt) { // 更新猫咪位置、动画帧、碰撞等状态 } function render() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(cat.sprite, cat.x, cat.y); } function loop(t) { const dt = (t - lastTime) / 1000; lastTime = t; update(dt); render(); requestAnimationFrame(loop); } // 替换上一帧时间戳并启动主循环 requestAnimationFrame(loop); update(); // 首帧手动调用一次，防止 dt 过大导致猫咪跳跃requestAnimationFrame的回调参数t是高精度时间戳，单位是毫秒，dt换算成秒是为了和物理公式里的时间单位对齐。首帧时上次时间戳为 0，如果直接算dt会得到一个极大值，导致猫咪瞬间飞出屏幕，所以手动调一次update。wx.createCanvas()创建的是全屏画布，触摸事件的绑定也挂在它上面。
3.2 猫咪动画的两条路线：帧动画和骨骼动画
猫咪游戏里的猫跑、跳、睡觉，本质上都是图片序列在时间轴上的切换。Cocos Creator 工程中，动画资源放在assets/animations或assets/resources下，播放逻辑通常写在CatController.ts里：
playAnimation(state: string) { if (this.currentState === state) return; this.currentState = state; const anim = this.getComponent(Animation); anim.play(state); // 不同的动作状态会触发不同的音效和粒子特效 }这个if判断很重要：同一状态不重复播放，避免点击一次按钮就重播动画导致动作被频繁打断。猫咪连续点击时会出现“动画抽搐”现象，就是因为这个判断没写。
原生 JS 或 Unity 工程则常用按时间切片的方式播放精灵序列。比如一段跑步动画有 8 帧，每帧停留 60ms：
const FRAME_INTERVAL = 60; const frameIndex = Math.floor((Date.now() - animStartTime) / FRAME_INTERVAL) % 8; ctx.drawImage(runFrames[frameIndex], cat.x, cat.y);Math.floor向下取整保证帧索引不会提前跳到下一帧，% 8循环播放。把FRAME_INTERVAL调小，猫看起来就加速跑，调大就慢动作，不需要改美术资源，这是调游戏手感最常用的一个参数。
3.3 微信 API 在源码里的三类高频调用点
猫咪游戏源码里，微信 API 围绕三件事展开。登录和玩家标识：wx.login拿到 code，后端换 openid 用于存储玩家的猫咪和金币。分享拉新：wx.shareAppMessage在点击“请好友帮忙喂猫”时调用。云存储：wx.cloud.uploadFile上传玩家截图或自定义头像。
wx.login({ success(res) { if (res.code) { wx.request({ url: 'https://api.example.com/login', data: { code: res.code }, success: (resp) => { wx.setStorageSync('token', resp.data.token); } }); } }, fail() { // 静默失败，游客模式继续玩 } });login拿到的code只能用一次，5 分钟内有效，且必须在后端用code2Session接口换取 openid。很多新手的错误是前端直接把 code 存起来反复用，过几分钟就失效了。setStorageSync这个同步方法在启动阶段调用没问题，但主循环和 UI 交互里避免用它，同步阻塞会卡掉帧，大概率会掉到 20 帧以下。
4. 改造猫咪源码的实战参数：换资源、调手感、控包体
学习源码的唯一目的是有朝一日让它变成自己的作品。把一只猫换成一只狗，不只是换图片那么简单。游戏资源、物理参数、包体大小三者联动，牵一发动全身。
4.1 资源替换清单和格式要求
微信小游戏最常用的图片格式是 PNG 和 WebP。PNG 带透明通道，适合角色和 UI；WebP 体积更小，适合场景背景。如果源码里用的是一张超大的bg.png，用 TinyPNG 或 imagemin 压到 500KB 以内，首屏加载速度至少提升一倍。
| 资源类型 | 推荐格式 | 最大尺寸 | 备注 |
|---|---|---|---|
| 背景图 | WebP | 1280×720 | 超过按质量 80 压缩 |
| 角色动画帧 | PNG | 256×256 | 保持 2 的幂次如 128/256 |
| 音效 | M4A | 200KB | 采样率 22050Hz 足够 |
| UI 图标 | PNG | 64×64 | 统一色板，少用渐变 |
替换资源时注意源码里的资源路径。Cocos 工程中资源在assets/resources下，通过resources.load('cat/run_01', SpriteFrame, cb)动态加载。你新拖进的图如果文件名对不上，运行时会报Failed to load错。解决方法是保持和原文件同名替换，或者全局搜索旧资源名改脚本引用。
Unity 工程资源替换更要小心，.meta文件记录了资源的 GUID。直接把 png 拖进Assets/Resources会生成新的 GUID，原来预制体上引用它的物体全部断链。正确做法是在 Project 面板原生图片文件上右键 → Reimport，或直接把新图片拖到旧图片所在目录并重命名为完全相同的文件名，覆盖后回到 Unity 让编辑器重新导入。
4.2 手感类参数：那些改了立刻见效的数值
猫咪游戏的“手感”不在美术，在数字。以下参数在源码里百分之百能找到：
// 物理参数，通常在 CatPhysics.js 或 PlayerController.cs 里 cat.moveSpeed = 200; // 像素/秒，走路的基准速度 cat.jumpVelocity = -600; // 负值，因为屏幕坐标系 y 轴向下 cat.gravity = 1200; // 像素/秒² cat.jumpCut = 0.5; // 松手后速度衰减系数 cat.coyoteTime = 0.1; // 离开地面后仍可起跳的宽限时间jumpVelocity和gravity共同决定跳跃高度。最高点时间满足t = jumpVelocity / gravity，高度为v² / 2g。用这段代码测试手感时，感受一下是不是想要的高度：
function calculateJumpHeight(v, g) { return (v * v) / (2 * g); } console.log(calculateJumpHeight(600, 1200)); // 150 像素jumpCut是跳跃松手时的速度衰减比，设定为 0.5 表示松手瞬间纵向速度降为一半，这是让跳跃手感“跟手”的核心参数。coyoteTime是平台游戏的保底机制，允许角色离开平台后 100ms 内仍能起跳，游戏圈把这个叫“土狼时间”，没有它，猫在平台边缘跳起来极其难受。
4.3 包体优化和微信小游戏的 4MB 限制
微信小游戏首包不能超过 4MB，这在 unity 打包时是个硬坎。解决方法是分包。在 game.json 里声明：
{ "subpackages": [ { "name": "level1", "root": "level1/" }, { "name": "level2", "root": "level2/" } ] }将猫咪动画资源按关卡拆到子包里，主包只保留启动场景和基础 UI，场景切换时用wx.loadSubpackage动态加载。Unity 的 WebGL 构建产物对分包支持相对成熟，Cocos 3.x 从assets拖入对应子包目录即可，原生 JS 则手动分目录。
Unity 工程还有一个特殊的坑：打包时 WebGL 模板默认开启Development Build，这会让代码体积膨胀 30% 以上。发布到微信前必须在Project Settings → Player → Publishing Settings关闭 Development Build，勾选Compression Format为 Brotli，并确保Strip Engine Code打了勾。这三个选项没配好，导出后代码包动辄 30MB，传上去微信根本不理你。
| 配置项 | 推荐值 | 错误值 |
|---|---|---|
| Compression Format | Brotli | Disabled |
| Strip Engine Code | 开启 | 关闭 |
| Development Build | 关闭 | 开启 |
| 内存分配上限 | 256MB | 512MB或自动 |
微信小程序运行时 WebGL 环境内存上限是有阈值的，Unity 项目设置里如果给到 512MB，中低端安卓机会在加载完成前直接被系统杀进程。设 256MB 是社区公认的安全线，配合关闭异常堆栈跟踪和精简日志，能明显降低闪退概率。
5. 从学习环境切到真实发布前的四个验证步骤
代码改造完，本地跑得再顺也要过一遍发布前的体检。这一步决定你的猫咪游戏能不能从开发者工具走进真实用户的手机。四个验证按顺序做，每步都有对应命令。
第一步，检查代码包体积和分包配置是否生效。开发者工具里点“预览”会生成一个二维码，同时控制台会打印总包体大小。如果超过 4MB，先看是哪个包超了，用终端定位大文件：
find . -type f -size +500k | xargs ls -lh把超过 500KB 的图片全筛出来，按第 4 章的格式表压缩或转 WebP。common 包里有超过 1MB 的文件也要处理，比如一个多余的 mp3 音效。
第二步，关闭调试模式走一遍完整引导。在开发者工具右上角把“开发环境不校验合法域名”关掉，真机上如果请求还是失败，看控制台是不是url not in domain list。本地开发时可以开一个简单的后端用 IP 调试，正式发布前必须用 HTTPS 域名，且域名要在微信公众平台后台加到 request 合法域名列表里。
第三步，用真机预览反复进出场景。电脑上模拟器性能过剩，中低端安卓机才是真实战场。预览时选择“真机调试”，在手机上把猫咪主场景、设置界面、结算界面各进出十次，重点观察内存占用。手机厂商自带的“开发者选项 → 显示 GPU 渲染分析和内存”能直观看到内存曲线。如果每次进出场景内存只涨不降，说明源码里资源没释放，按 Cocos 的做法是场景切换前调用assetManager.releaseAsset，Unity 里则要检查Resources.UnloadUnusedAssets是否在场景切换后调用。
第四步，确认著作权登记和类目选择，这是排期里最容易漏的一环。微信公众平台后台里，小游戏需要选择“游戏”类目，并提供软件著作权登记证书或电子版权认证。很多个人开发者在这里被卡两周，如果用的别人的源码，著作权归属不是你自己，得先拿到原作者授权才能做软著申请。所以标题里的“仅用于学习参考”非常重要——学习代码可以，上了软著登记和线上运营就涉及权利归属了。把源码里的猫咪换成自己的原创形象、替换所有音效为 CC0 免版权素材、重写图层和数值，这是从“学习参考”走向可发布作品的基本路径。
本文还有配套的精品资源，点击获取
