简介这款微信小程序完整demo实现经典“飞翔的小鸟”小游戏前端利用canvas渲染动态画面与碰撞检测后端提供java接口支持非常适合小程序开发者、前端初学者作为实战练习。资源包共35个文件压缩后仅284KB包含png/jpg图片、js逻辑脚本、wxml页面、wxss样式、json配置以及java后端代码覆盖了小程序项目的主要构成目录层次清晰便于逐模块拆解学习。目前已有541人学习下载说明该demo对入门小程序游戏开发有实际参考价值。通过源码可学习canvas绘制游戏场景的完整流程掌握小程序端请求java后端接口的基本方式还能参照README和配置文件快速复用项目骨架适合在基础上构建自己的小程序交互小游戏。1. 飞翔的小鸟微信小程序democanvas游戏与java后端拆包实测能学到什么做小程序的人手里多少都囤过几个完整demo但真正能一路跑通、还改得动的没几个。这份“飞翔的小鸟”是微信小程序原生工程游戏画面全程用canvas实现后端配了java示例打包标记是“适用1221(学习版)”。它的价值不在游戏本身而在“小程序生命周期 canvas游戏循环 wx.request联调java接口”这条完整链路一个人照着一套demo就能把三块基础补上。适合第一次想在微信小程序里做canvas项目的开发者也适合后端想补小程序前端知识的java工程师。目录里能看到标准的app.json、pages、utils、config.js和java后端目录README和LICENSE都齐全作为学习版够完整比零散看教程省事很多。2. 整体结构与启动从目录解剖到小程序端跑起来2.1 目录结构先看懂这份demo的骨架对照工程看这是标准的原生小程序结构没有用uniapp、Taro这类跨端框架。根目录有app.js、app.json、app.wxss三个全局文件pages/ 存放游戏页面utils/ 是工具模块images/ 提供游戏素材config.js 承担运行配置java/ 是后端示例工程。文件不算多正好适合学习——多一个文件就多一层干扰。app.json负责页面注册与窗口配置打开能看到页面路径列表app.js里是App()入口做启动时数据初始化app.wxss定义全局样式。pages/下的游戏页面分成四个文件.wxml描述结构、.wxss控制样式、.js写游戏逻辑、.json配置本页面窗口。config.js里一般放“后端接口地址”这类需要按环境改的配置建议你拿到手先打开它看一遍后面联调全靠这个文件。images目录里是小鸟、管道、背景等素材图注意素材图的透明背景和尺寸直接影响到canvas里的绘制位置。utils/里面通常封装了一个request函数把wx.request包了一层统一处理baseUrl和错误回调。java/目录从命名看是个独立的java工程README.md里有这个学习版的使用说明LICENSE则可以确认代码能不能改、能不能用于自己的学习项目。2.2 导入微信开发者工具基础库版本是关键下载解压后用微信开发者工具导入项目这一步有讲究。打开工具后选择“导入项目”目录选中解压出来的文件夹AppID可以先用“测试号”不需要自己注册等后面要真机预览再换正式的。导入成功后先别急着点编译进“详情 - 本地设置”把调试基础库切换到最新稳定版。这套demo内部标记1221按学习版的一般整理习惯它是针对当时基础库环境做的适配。如果开发者工具的默认基础库版本太低pages里的js调用某些API时会直接报“xxx is not a function”表现是页面白屏、控制台一堆红色报错但代码本身没问题。我一般会把基础库选到2.10以上Canvas 2D接口和同层渲染特性才靠得住。第一次编译如果报“未找到入口app.json”多半是解压产生了嵌套目录工程根目录没选到。解决办法很简单把解压出来的最内层文件夹整个剪切到上层让app.json直接位于项目根路径。2.3 把java后端跑起来一个可以改端口的学习版从微信小程序的视角看这个java后端就是“分数上报 排行榜查询”的接口服务。常见做法是Spring Boot直接起一个web应用最终只需要保证config.js里的baseUrl能访问到它。如果你用IDEA导入选Maven项目等依赖下载完找到标注SpringBootApplication的主类直接运行如果用命令行就在java目录下跑mvn spring-boot:run前提是本机装好了JDK和Maven。这里有个新手常踩的坑Spring Boot默认端口是8080如果本机8080被占用了后端起不来。这时去src/main/resources/application.yml里改端口比如改成8090同时同步修改小程序端config.js里的baseUrl端口两边必须一致。后端起来的标志是控制台能看到Tomcat started此时用浏览器访问一下接口地址能返回JSON就说明联调环境基本就绪。3. canvas游戏核心逻辑绘制、帧循环、碰撞检测三块硬骨头3.1 用Canvas 2D还是旧版CanvasContext飞翔的小鸟这类游戏核心就是“每帧刷新画面”。在微信小程序里实现它要分新老两套API。旧版用wx.createCanvasContext操作指令发给原生canvas再统一渲染API有点别扭新版是通过canvas.getContext(2d)拿到标准Canvas 2D上下文与浏览器写法一致还支持canvas.requestAnimationFrame游戏循环更平滑。从这份demo的“canvas实现”描述和基础设施来看按Canvas 2D读源码是主流做法也建议你这么学。要拿到2d上下文得先通过wx.createSelectorQuery().select(#gameCanvas)找到canvas节点再调用node.getContext(2d)。注意这个小程序里的获取节点过程是异步的所以初始化代码要放在onReady回调里而不是onLoad否则节点还没渲染出来拿到的对象是null后面所有绘制都会静默失败。let canvas null let ctx null initCanvas() { wx.createSelectorQuery() .select(#gameCanvas) .fields({ node: true, size: true }) .exec((res) { if (!res || !res[0]) return canvas res[0].node ctx canvas.getContext(2d) const dpr wx.getSystemInfoSync().pixelRatio canvas.width res[0].width * dpr canvas.height res[0].height * dpr ctx.scale(dpr, dpr) this.startGameLoop() }) }这段代码的逻辑是先查找到canvas节点拿到节点对象和尺寸再把canvas内部宽高乘上设备像素比dpr防止高分屏上画面发虚最后调用ctx.scale(dpr, dpr)让后续绘制的坐标仍以逻辑像素为准。dpr这一步很容易漏漏了之后在iPhone上画面会糊很多“游戏能跑但画质差”的问题都出在这。3.2 游戏循环requestAnimationFrame驱动每帧绘制游戏循环的结构在demo里通常是这样的每帧调用一次绘制函数先清空画布再依次画背景、管道、小鸟最后做物理更新。把“更新逻辑”和“绘制逻辑”分开写是这类canvas小游戏最值得模仿的写法后面加功能不打架。startGameLoop() { const draw () { ctx.clearRect(0, 0, gameWidth, gameHeight) this.drawBackground() this.drawPipes() this.drawBird() this.update() canvas.requestAnimationFrame(draw) } draw() }clearRect把上一帧画面整个擦掉否则新画面会叠在一起产生拖影drawBackground先把背景铺满这样擦除后的瞬间不会闪白drawPipes根据管道数组逐个画管道drawBird把小鸟画在当前位置update函数专门负责“挪位置”——小鸟下落、管道左移、碰撞检测、计分判断都放这里。最后通过canvas.requestAnimationFrame(draw)注册下一帧和浏览器的requestAnimationFrame行为一致页面切后台时系统会自动暂停循环不会白耗性能。判断游戏是否卡顿可以看帧耗时。真机上如果每帧耗时偏高先看是不是画了太多圆角、阴影这类消耗大的APIcanvas游戏里fillRect和drawImage是最便宜的shadowBlur和globalAlpha这种要少用这是血泪经验。3.3 物理参数与手感调整飞翔的小鸟手感好不好全看几个数字参数。demo里的重力、跳跃速度、管道速度通常在游戏初始化阶段定义为常量改它们就能改变难度不需要动结构代码。参数名作用调整方向gravity每帧加到小鸟垂直速度上的重力值越大下落越快游戏越难jumpVelocity点击时给小鸟的向上速度绝对值越大跳得越高pipeSpeed管道水平左移速度越大画面越快pipeGap上下管道之间的缺口高度越小越难钻pipeInterval相邻两组管道的间隔越小管道越密物理更新逻辑在源码里大致是这样update() { if (this.gameState ! playing) return this.bird.vy this.gravity this.bird.y this.bird.vy this.pipes.forEach(pipe { pipe.x - this.pipeSpeed }) }这里有个细节bird.vy是垂直速度每一帧先给它加上重力再把更新后的速度加到y坐标上构成一个加速下落的效果——所以小鸟不动时会越落越快这才是抛物线手感而不是匀速掉。调整参数时要注意gravity和jumpVelocity必须成对调只改其中一个手感会变得很怪要么跳不起来要么一碰就掉地。3.4 碰撞检测与得分逻辑碰撞检测在demo里用的是矩形相交判定不需要像素级精度。小鸟用一个矩形表示管道实际是两个矩形上方管道底部到缺口顶部、下方管道顶部到缺口底部。只要小鸟矩形和任一管道矩形相交游戏结束。rectCollide(a, b) { return a.x b.x b.w a.x a.w b.x a.y b.y b.h a.y a.h b.y }这段代码是标准的AABB碰撞检测四个条件同时满足才说明相交a的左边在b右边左边、a的右边在b右边左边、a的上边在b下边之上、a的下边在b上边之下。建议不要把小鸟矩形设成整个图片尺寸图片四周通常有透明留白视觉没撞上但矩形碰了会提前死亡很挫败。我把小鸟碰撞矩形缩到图片尺寸的70%居中手感会宽容很多。得分逻辑也有讲究不是碰到管道就加分而是当小鸟穿过管道缺口、小鸟x坐标超过管道右边缘时加1分。源码里用一个scored标记防止同一根管道重复计分因为管道有多根在屏幕上同时移动不加标记会在一帧内反复加好几分。if (pipe.x pipe.w this.bird.x !pipe.scored) { pipe.scored true this.score wx.setStorageSync(score, this.score) }判断条件里的pipe.x pipe.w是管道右边缘位置当它小于bird.x说明小鸟已经整个飞过管道此时加一次分。用wx.setStorageSync存分数是学习版常用的方式分数能保存在本地缓存里下次打开游戏还能读出来。排行榜功能则由java后端接口负责第4章展开。4. java后端在学习版里的角色计分配置与接口联调4.1 后端在整个demo里承担什么单机玩这个游戏根本不需要后端分数自己存本地就行。这份demo专门配一个java后端目的是补全“微信小程序通过wx.request请求服务器接口”这条完整链路。从学习版定位看后端基本就干两件事接收前端提交的成绩、按分数倒序返回排行榜。很多自学小程序的人卡在第一步前端的页面、样式都写好了但不知道怎么跟服务器对话。这份资源把后端源码一并给你意味着你可以在本机跑通一个“小程序前端 - java接口 - 数据返回”的最小闭环。理解了这条链路以后接登录、接业务数据都是同一套路。后端工程里的核心模块按常见做法是这样组织的一个Controller接收HTTP请求一个Service处理业务逻辑一个简单的存储结构保存分数学习版一般用内存Map或者本地文件不会上数据库。这样做的好处是去掉数据库依赖开箱即跑零配置。4.2 接口设计与请求流程接口设计在源码里通常长这样POST /api/score/save用来提交分数GET /api/score/rank用来拉排行榜。以Spring Boot为例Controller代码结构大致如下RestController RequestMapping(/api/score) public class ScoreController { PostMapping(/save) public Result save(RequestBody ScoreDto dto) { scoreService.save(dto.getUserId(), dto.getScore()); return Result.success(保存成功); } GetMapping(/rank) public ListScoreVo rank(RequestParam(defaultValue 10) int limit) { return scoreService.getTop(limit); } }RequestBody把前端传过来的JSON自动映射成ScoreDto对象不用手动解析RequestParam(defaultValue 10)表示limit参数可传可不传不传默认取前10名。学习版为了减少复杂度通常不会把接口拆得很细两个接口配一个内存存储就够了重点是让你看懂请求从哪进、结果从哪出。小程序端的请求调用在utils里封装demo中大致是这个模式const config require(../config.js) function submitScore(score) { return new Promise((resolve, reject) { wx.request({ url: ${config.baseUrl}/api/score/save, method: POST, data: { userId: test001, score: score }, header: { content-type: application/json }, success: (res) resolve(res.data), fail: (err) reject(err) }) }) }这里值得看的是baseUrl的拼法config.js里定义一份所有请求统一引用换环境时只改一个文件。header里指定content-type为application/json是为了让java后端能正确把body反序列化成DTO。如果不加这个header小程序默认发的是表单格式Spring Boot的RequestBody会解析失败直接报400错误。4.3 联调时最容易忽视的环境问题前后端联调十次有八次问题出在网络环境而不是代码。开发工具里默认情况下wx.request到http接口会报“url not in domain list”需要手动打开“不校验合法域名”开关详情 - 本地设置 - 勾选“不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书”。注意这个勾选只对开发工具当前项目生效真机预览时体验版必须配https域名这是微信的硬性规定。另一个高频问题是本机调试时baseUrl写127.0.0.1或localhost。在开发者工具里这样写没问题因为工具跑在你的电脑上一旦切到真机预览手机访问127.0.0.1访问的是手机自己不是电脑。正确做法是把config.js里的baseUrl改成电脑的局域网IP比如192.168.1.105:8090并且保证手机和电脑在同一WiFi下。我在联调时每次都先ping一下这个IP通不通再往下排查。防火墙也是个隐性坑。Windows本机开着防火墙时java服务的端口默认不对外放行手机请求会一直超时。遇到这类情况先把防火墙关掉测试如果能通再把端口加白名单。5. 避坑与排查跑不起来、黑屏、连不上后端的5个真实问题5.1 导入后报“AppID无效”或“基础库不匹配”现象工程导入后还没看代码编译就报错提示AppID无效或者某个API调用时提示undefined。原因这份demo里的AppID是作者自己项目的拿到你这里自然无效基础库版本低于源码使用的Canvas 2D等接口时对应方法还没被注入也会报undefined。解决在导入项目时AppID直接选“测试号”不要用别人的进入“详情 - 本地设置”把调试基础库切换到最新稳定版。这两步做完大多数导入阶段的报错都能消掉。5.2 canvas黑屏页面出来了但画面不渲染现象开发者工具里能看到页面结构或分数数字但整个游戏区域是黑色的重启也没用。原因最典型的两个——初始化代码放在onLoad里执行此时canvas节点还没渲染完成查询节点返回null或者同一份代码里混用了旧版wx.createCanvasContext和新版getContext(2d)两个上下文互不兼容绘制指令被吞掉。解决把canvas初始化逻辑挪到onReady回调里执行或者用setTimeout延迟50毫秒再查询节点代码里统一只用Canvas 2D一套接口不混用。查这个问题时看控制台有没有报错如果没有任何报错但画面不存在先打日志确认ctx是否为null。5.3 开发者工具正常真机上小鸟和背景出不来现象开发者工具里游戏画面完整一切正常用真机预览小鸟看不到或者背景图空白。原因图片素材文件名大小写不一致Windows上开发工具不敏感但真机文件系统严格区分大小写引用路径对不上就加载失败另一种情况是图片路径写成了网络URL而真机downloadFile域名白名单里没有该域名被拦截。解决打开images目录挨个核对代码里引用的文件名和实际文件名大小写必须完全一致本地图片确保打包进小程序包内网络图片要么换成包内资源要么去公众平台配置合法download域名。改完清缓存重新编译别在旧缓存上反复试。5.4 点击屏幕小鸟不动像卡死一样现象游戏画面正常滚动管道在移动但手指点屏幕小鸟没有任何反应直接坠落。原因事件根本没绑上。有些版本的同层渲染canvas对bindtap响应不稳定触摸事件被原生组件层截获还有人把bindtap绑到了外层viewcanvas层级覆盖导致点击事件到不了触发区域。解决在canvas标签上直接绑定bindtouchstart不要用bindtap也不要绑到外层容器。事件处理函数里只做一件事把bird.vy重置为负的跳跃速度。touchstart在手指按下瞬间就触发比tap少300毫秒左右的延迟游戏响应更快。改完真机验证开发者工具里tap和touchstart差别不明显真机上才能感到差距。5.5 分数提交失败wx.request一直报fail或超时现象本地游戏能玩分数也出来了但点击提交后控制台打印request:fail或者一直转圈没响应。原因排查按这个顺序来——开发工具没开“不校验合法域名”java后端没启动成功baseUrl指向了127.0.0.1而你在真机预览三个原因各占三成。解决先确认后端控制台能看到Tomcat started浏览器直接访问接口地址能返回JSON再确认开发工具的本地设置里勾选了不校验合法域名最后在config.js里把baseUrl改成电脑的局域网IP。如果还是不通在浏览器里安装一个跨域测试插件去请求后端先排除前端问题再回头查防火墙和端口占用。“连不上后端”这类问题最忌讳乱猜按“前端 - 网络 - 后端”的顺序一层层排除十分钟内能定位。5.6 一份高效排查顺序把这5个问题串起来看我总结了一套自己一直在用的排查流程。先看控制台有没有红字报错有报错按报错信息搜没报错但画面不对就调canvas初始化位置和上下文画面正常但交互没反应查事件绑定方式功能完整但请求失败从域名校验、后端进程、网络IP三层顺序查。这套流程帮我省下大量“玄学调参”的时间。6. 进阶用法换皮改参数把demo变成你自己的第一个canvas游戏6.1 换一套素材五分钟让游戏“变脸”拿到demo先别急着写新功能第一步做“换皮”。把images目录下的小鸟图片换成你自己准备的png管道图片、背景图也一并替换。替换素材时注意两个点素材必须是透明背景PNG否则游戏画面上会出现白底方块很出戏小鸟图片尺寸不要超过100x100像素canvas区域就那么大图太大不仅遮挡视线缩放绘制还会增加每帧耗时。替换后用真机预览一局感受画面是否正常适配。这一步虽然不带任何逻辑改动但能让你完整走一遍“改资源 - 重新编译 - 真机验证”的流程后续改代码时节奏感会好很多。6.2 用手感参数调出你自己的难度曲线拿到demo默认参数玩一下你会发现手感偏难或偏简单。这时候改动第3.3小节的参数表就行。我一般先调pipeGap它是决定游戏“能不能过”的关键参数建议初始设在150像素到180像素之间再调pipeSpeed它决定“有没有时间反应”0.5则趁早放弃直接调低到2左右。调参改的就是几个数字但每次只改一个变量然后跑一局感受再改下一个。同时改多个参数会让手感变化无法归因出了bug也说不清是哪行代码引起的。调完参数后把一组自己满意的数值记下来我通常在config.js里加一段注释标注“舒适难度gravity0.5, jump-8, pipeSpeed2.2”。6.3 把本地分数接到排行榜跑通真正的联调最有成就感的一步是让游戏结束时自动把分数提交到java后端然后从后端拉取排行榜展示。在游戏结束的代码分支里调用第4.2小节的submitScore函数分数打完就传页面再提供一个“排行榜”按钮点击后请求GET /api/score/rank接口把返回结果渲染到页面上。这一步跑通了这个demo就不再是“一个单机小网页”而是前后端联通的小程序应用了。验证方法很简单连玩三局让每次分数都不同然后刷新排行榜看顺序是否正确、分数是否匹配。之后再开一个新会话提交一个低分确认排名被正确挤到后面。这里最容易翻车的点是排行榜刷新时机我习惯在每次游戏结束后强制刷新一次避免页面停留太久展示旧数据。从那以后我每次拿到这类canvas游戏demo都强制走一遍“换素材 - 调参数 - 接接口”的步骤先把工程跑熟再动结构代码踩坑率直线下降。希望帮到你。本文还有配套的精品资源点击获取