简介：这套微信小游戏猫咪源码包，是一份面向微信小游戏开发初学者或对H5游戏感兴趣的读者的学习参考资源，主要用于了解小游戏页面搭建、猫咪形象展示与简单交互的实现方式，通过实际工程文件降低上手门槛。压缩包约49KB，总计6个文件，以页面描述、JavaScript逻辑、PNG/JPG图片素材及说明文档为主，体积小巧，适合快速下载后对照拆解整体结构。目前已有648人学习/下载，具有一定的实践参考价值。源码中包含猫咪游戏入口页面、jQuery基础脚本以及多张猫咪主题图片，可以帮助读者理解页面如何引用外部脚本与素材，并在此基础上自定义界面文案、调整猫咪外观或扩展简单玩法。附带免责声明进一步明确了仅限学习参考的用途，方便个人练习或课程设计时合法借鉴。
1. 微信小游戏源码与猫咪游戏源码，先学会读而不是抄
微信小游戏源码、猫咪游戏源码这类仓库在 GitHub 和 Gitee 上非常多。把它们拖进微信开发者工具后，最常见的状态是目录能打开、界面白屏，原因是它和网页项目差别很大。
素材路径、入口文件、Canvas 创建时机、触摸坐标换算，任何一处不对齐都出不来画面。这里以一份仅用于学习参考的猫咪游戏源码为对象，讲清楚怎么读目录、改入口、跑核心循环，最后落到 Unity 微信小游戏打包和上架要处理的几个问题，适合手上有源码但跑不起来，或者想用现成案例补微信小游戏基础的人。
2. 用微信开发者工具跑通猫咪游戏源码：目录结构、入口文件与最小配置
2.1 先从目录判断工程类型
打开克隆下来的“猫咪游戏源码”，我一般先看根目录有哪些文件。原生微信小游戏工程一定有game.js和game.json，这是微信小游戏运行时的固定入口和配置。引擎工程则会有assets/、project.json、cocos、laya或unity相关目录。很多猫咪游戏源码是作者用原生 JavaScript 写的，方便新手改。目录中若发现package.json，通常是作者把编译工具或 npm 依赖也放进了仓库，这并不代表微信小游戏原生支持 npm，真机调试时仍需要经过开发者工具或相关打包流程处理。
一个小技巧：先打开game.json看deviceOrientation字段，如果为portrait，说明是竖屏游戏。浏览器默认页面是横向的，所以直接用浏览器打开源码里的index.html，看到的尺寸和交互都会错位。微信小游戏没有真正的 HTML 页面，渲染内容都绘制在wx.createCanvas()创建的画布上。这个差异，是“源码能看但跑不出效果”的常见原因，接下来把这份源码当作一个最小运行单元来改造。
2.2 最小game.json与project.config.json：参数不多，但一个都不能错
导入微信开发者工具前，先检查两个文件。game.json是小游戏的运行配置，至少需要包含画布方向；project.config.json是工具配置，至少要包含 AppID 与编译方式。下面是一个适合竖屏猫咪游戏的最小配置：
{ "deviceOrientation": "portrait", "showStatusBar": false, "networkTimeout": { "request": 10000 }, "subpackages": [] }deviceOrientation固定竖屏，避免猫的模型被旋转；showStatusBar在沉浸式竖屏游戏里一般关掉；networkTimeout设成 10 秒即可，学习阶段不涉及网络请求，这个值只是防止将来接排行榜接口时卡住。subpackages留空数组，表示暂未启用分包；后续素材多起来，可以在这里按场景拆分猫的立绘与音频。
project.config.json同样关键：
{ "appid": "touristappid", "compileType": "game", "setting": { "es6": true, "minified": true, "urlCheck": false }, "libVersion": "latest" }appid填写测试号touristappid，不填真实 AppID 也能在开发者工具里预览；compileType必须是game，如果被误复制成miniprogram，工具会按小程序模式解释代码，最终报“找不到页面”。setting.es6让工具把 ES6 转成 ES5，兼容部分 Android 低版本 WebView；urlCheck关闭，方便本地走 HTTP 素材地址。
2.3 用微信开发者工具导入工程的四步与启动失败排查
导入操作步骤很简单，但顺序会影响结果。我一般按下面的顺序来：
- 打开微信开发者工具，选择“小游戏”分类，点击“导入”。
- 目录选到包含
game.json的那一层，不要选外层文件夹。 - AppID 选择“测试号”，工具会自动生成
touristappid。 - 在“本地设置”里确认已勾选“ES6 转 ES5”和“自动补全”，然后点编译。
如果编译后黑屏，先检查控制台是不是出现类似“game.js not found”的错误。根目录没有game.js，工具会直接失败；game.json里如果额外声明了entry路径，也要和实际文件对应。控制台出现“require 路径错误”时，改源码里的require('./js/xxx')路径。下面这个表按出现频次排列，基本覆盖学习源码阶段能遇到的大多数问题：
| 现象 | 大概率原因 | 处理方式 |
|---|---|---|
| 黑屏且无报错 | wx.createCanvas()被调用了多次 | 入口处只保留一次主画布创建 |
| 图片不显示 | 使用了浏览器new Image() | 换成wx.createImage() |
| 声音没有 | 音频未在首次触摸后播放 | 首次触摸时创建并播放音频 |
| 布局偏移 | 横竖屏和game.json不一致 | 统一为 portrait 或适配宽高 |
提示：不要在每个模块里都创建画布。微信小游戏的主画布在入口只能创建一次，重复创建会导致后续绘制只出现在不可见对象上。很多猫咪源码改着改着黑屏，不是绘制函数写错，而是多创建了画布。
3. 猫咪游戏源码的核心循环：状态机、触摸事件与帧动画
3.1 为什么教程源码里都爱用状态机
翻开这个“猫咪游戏源码”，通常能看到三类逻辑：猫的当前表现、玩家触摸反馈、画布绘制。这三种逻辑如果都写在 update 函数里，代码会越来越乱，所以很多作者会引入一个简单状态机。猫咪的“待机、走路、进食、睡觉”就是四种状态。状态机的好处是：每一帧只需要处理当前状态需要更新的字段，不需要为每一种动作维护独立的 if 分支。
常见做法是给猫定义state、progress、enterTime三个字段。state记录当前状态，progress表示当前动画进度，enterTime用于计算状态持续时长。这样设计后，新增“洗澡”“抚摸”只需增加状态值，不影响旧逻辑，读源码时也能顺着状态值快速定位切换点。
3.2 用 deltaTime 驱动猫的移动和动画切换
微信小游戏没有浏览器里的setInterval驱动帧，最常见写法是requestAnimationFrame。每帧之间间隔不固定，不能直接把位移写死为“每帧 10 像素”，否则高端机与低端机上的猫移动速度差很远。正确做法是用当前时间减去上一帧时间，得到deltaTime，再乘上速度。下面是一段可以在源码里替换的初始化逻辑：
const cat = { state: 'idle', x: 100, y: 400, progress: 0, speed: 60 // 每秒移动像素 }; let lastTime = Date.now(); function update() { const now = Date.now(); const dt = (now - lastTime) / 1000; // dt 单位为秒 lastTime = now; if (cat.state === 'walk') { cat.x += cat.speed * dt; cat.progress += dt / 2; // 一段走路动作 2 秒播放完 if (cat.progress >= 1) { cat.state = 'idle'; cat.progress = 0; } } drawCat(cat); requestAnimationFrame(update); }这里dt的单位是秒，所以speed: 60表示猫每秒向右移动 60 像素，和屏幕刷新率无关。cat.progress += dt / 2表示动画播放 2 秒后进度到 1，进度满就切回待机。requestAnimationFrame(update)写在函数末尾，形成递归调用，等于浏览器端的动画循环。注意不要在这种循环里创建新对象，避免内存抖动。
3.3 触摸坐标换算：微信小游戏和浏览器差异很大
浏览器里通过canvas.addEventListener('touchstart')获取坐标，微信小游戏则使用全局的wx.onTouchStart。这部分经常让熟手也踩坑：wx.onTouchStart拿到的clientX、clientY是逻辑像素坐标，而 Canvas 的宽度可能是物理像素。高分屏手机上如果不做比例换算，点击位置和猫的位置会偏差。
wx.onTouchStart((e) => { const touch = e.touches[0]; const system = wx.getSystemInfoSync(); const scaleX = canvas.width / system.windowWidth; const scaleY = canvas.height / system.windowHeight; const touchX = touch.clientX * scaleX; const touchY = touch.clientY * scaleY; if (isHitCat(touchX, touchY)) { cat.state = 'eat'; cat.progress = 0; } });scaleX和scaleY把屏幕逻辑坐标映射到画布物理坐标。如果猫的判定区域本身也用画布坐标系绘制，直接比大小即可。isHitCat一般用矩形碰撞：判断点击点是否落在猫的x、y、宽、高范围内。还有些源码把触摸监听写在某个模块里，没有等入口画布初始化完成，真机上会出现“触摸无反应”，排查时先确认wx.onTouchStart是在入口之后注册的。
3.4 状态机参数表：切换到动画后哪些字段会被读取
改造猫咪源码时，把参数集中在一个表里比逐个找变量快。下面这个表适合读源码时对照：
| 状态 | 读取字段 | 写入字段 | 切换触发 |
|---|---|---|---|
| idle | progress | state | 定时结束 |
| walk | speed, progress | x, y | 触摸目标点 |
| eat | progress | state | 动画播放完 |
| sleep | enterTime | state | 长时间未操作 |
以eat为例，进入状态时只重置progress = 0，让动画按固定时长播放；播放期间不要修改猫的坐标，否则会看到猫一边吃东西一边横移。状态切换完成后，把state写为idle，再等下一次触摸。这套规则在大多数猫咪源码里是通用的，换到别的动物题材也能直接迁移。
4. 猫咪游戏素材加载不白屏：图片缓存、音频管理与内存泄漏排查
4.1 别用new Image()，用wx.createImage()包一层加载器
微信小游戏环境不是浏览器，全局对象只有wx和普通 JavaScript 运行时。很多猫咪源码从网页版改造而来，作者把浏览器里的new Image()留在代码里，在开发者工具里有时能通过兼容层运行，到真机就静默失败。正确做法是用微信小游戏提供的wx.createImage()。为了避免重复加载图片，我一般会先包一个带缓存的异步加载器：
const imageCache = {}; function loadImage(url) { if (imageCache[url]) { return Promise.resolve(imageCache[url]); } return new Promise((resolve, reject) => { const img = wx.createImage(); img.onload = () => { imageCache[url] = img; // 缓存图片对象 resolve(img); }; img.onerror = reject; img.src = url; }); }这个加载器把已加载的图片对象放进imageCache，第二次加载时直接返回同一个对象，避免猫的同一套表情重复下载和重复解码。img.src建议使用源码仓库里的相对路径；开发者工具中相对路径的基准是game.js所在目录，如果图片放在assets/images下，就写assets/images/cat_idle.png。拿不准路径时，打开调试器的 Network 面板看请求是否 404。
4.2 音频文件被复用，别忘了在播放结束后释放
微信小游戏对音频实例数量有限制，猫咪游戏的“喵喵叫”“进食音效”又是高频触发。如果每次点击都wx.createInnerAudioContext()且不销毁，短时间反复操作会触发性能告警，严重时声音直接消失。常见处理方式是在播放完成回调中销毁：
function playMeow() { const audio = wx.createInnerAudioContext(); audio.src = 'audio/meow.mp3'; audio.play(); audio.onEnded(() => { audio.destroy(); // 释放音频实例 }); }onEnded里调用destroy()可以把音频实例占用的内存释放掉。如果只是循环播放背景音乐，不要销毁，而是单独用一个长期实例。经验值是：短音效用“创建-播放-销毁”，背景音乐用“创建-复用-暂停”。很多学习源码里只写创建和播放，不写销毁，玩几分钟后声音变哑，正是这个原因。
4.3 用开发者工具性能面板定位白屏和内存上涨
猫咪游戏源码跑出界面后，下一步是验证稳定性。微信开发者工具顶部的“性能”面板可以看帧率、内存、CPU 使用率。常见坑是“离开页面再回来内存不回降”。在源码里搜索setInterval和requestAnimationFrame，如果定时器没有在隐藏时清理，循环会一直跑。微信小游戏提供了wx.onHide和wx.onShow，至少要在隐藏时取消动画帧：
let rafId = 0; function startLoop() { function step() { rafId = requestAnimationFrame(step); update(); } rafId = requestAnimationFrame(step); } wx.onHide(() => cancelAnimationFrame(rafId));这里把requestAnimationFrame的返回值存进rafId，隐藏时取消，显示时重新调用startLoop()。注意不要把cancelAnimationFrame写在wx.onShow里，见过一些源码把这行写反，导致每次回到游戏画面就冻结。内存持续上涨时，再检查图片缓存有没有被清掉；如果学习阶段不做关卡切换，内存上涨通常不是图片引用，而是wx.onTouchStart被重复注册。wx.onTouchStart是全局回调，不要在 update 循环里反复添加。
4.4 避坑指南：安全区、图集与相对路径
猫咪游戏和手机状态栏的适配值得单独说。iPhone 的刘海屏和底部 Home 条会遮挡操作区域，源码里如果没有处理安全区，猫的互动按钮可能被遮住。读取wx.getSystemInfoSync()的safeArea字段，用safeArea.top和safeArea.bottom约束按钮范围。图片素材过多时，把多个 PNG 合成一张图集，可以减少绘制调用次数。学习阶段不需要买工具，只要保持图片尺寸为 2 的幂，并在首次加载后写入本地缓存即可。
5. 从学习源码到上架：Unity 微信小游戏打包、WebGL 模板与著作权登记的注意点
5.1 Unity 微信小游戏打包：WebGL 模板和内存参数要先改再出包
如果拿到的猫咪游戏源码不是原生 JavaScript，而是 Unity 工程，常见的路线是用“微信小游戏适配插件”或团结引擎导出 WebGL，再导入微信开发者工具。这类源码目录里往往有Assets/和ProjectSettings/，没有game.js。Unity 导出时需要为微信小游戏选择 WebGL 模板，这个模板负责把 Unity 的加载进度和微信的启动流程衔接起来。不要直接选 Unity 默认 WebGL 模板，否则生成的小游戏包会非常慢，甚至无法读取本地资源。导出完成后，产物目录中会出现webgl、game.json、project.config.json三件套，后面按原生工程的导入方式打开。
我一般会在 Player Settings 里先确认四组参数，再执行构建：
| 参数 | 推荐设置 | 原因 |
|---|---|---|
| Compression Format | Brotli | 包体更小，真机加载更快 |
| Initial Memory Size | 256 MB 起步 | 猫动画和音频同播时避免内存不足 |
| Data Caching | 开启 | 二次进入不用重复下载资源 |
| Background Loading | 关闭 | 首场景只加载必要资源，防止卡界面 |
这些参数不是玄学。猫咪游戏素材即便只有几十兆，压缩格式不对也会让首包下载时间明显拉长；Initial Memory 太小则会出现“进入游戏后卡死，但开发者工具里不报错”的怪问题。修改后重新构建，把webgl目录里的文件同步到小游戏项目目录。
5.2 上架前补三件事：基础库版本、隐私提示和著作权材料
学习用途的源码可以直接跑，真要上架还需要处理三件事。第一，在开发者工具里确认基础库版本，太老的库不支持新的 Canvas API，提审时也可能被提示“基础库过低”。第二，涉及用户头像、昵称或本地存储的猫咪游戏，需要在小程序后台配置用户隐私保护指引；纯本地单机玩法如果完全不采集信息，后台声明也要写清楚。第三，软件著作权不直接决定审核是否通过，但它能降低审核沟通成本。现在就可以把源码目录结构、首次发表时间、作者信息和猫的立绘图保留好，提交审核需要时再申请登记，比临时补材料快得多。
把game.json的subpackages留空，等到素材超过 2MB 再按场景分包，别在一开始就拆出十几个子包。这时候再打开真机调试，把快速点击、音频连播、切后台重进三条路径各跑三遍，帧率稳定过 30 再继续往下写新玩法。
本文还有配套的精品资源，点击获取
