简介面向微信小游戏开发者的合成大西瓜合成版项目源码采用云开发模式无需自备服务器和域名导入微信开发者工具即可运行调试。游戏将2048合成、俄罗斯方块下落与消消乐消除机制融为一体玩家拖动同类水果落下合成升级规则简单易上手适合休闲娱乐或流量主变现场景。源码已集成流量主功能吸铁石、万能球等道具通过激励视频广告解锁可为开发者创造广告收益接入前需确认已开通流量主权限。压缩包共91个文件以png美术素材、json配置表、js逻辑脚本为主辅以mp3音效和安装说明整体仅2.93MB目录划分清晰便于定位游戏场景、资源与核心代码。目前已有1242人学习下载适合想快速上线小游戏、研究微信小游戏广告变现逻辑或学习云开发架构的开发者参考包内包含完整游戏场景、素材资源、广告触发示例及云调用代码可在此基础上直接替换素材、调整玩法或扩展更多广告位。1. 合成大西瓜小程序源码物理合成小游戏怎么做成流量主生意2021 年初「合成大西瓜」带火物理合成品类后源码站上出现大批微信小程序源码包标题挂「合成版」「附带流量主」的尤其多。所谓合成版通常是把网页版玩法改过的增强包合并判定更稳、生成权重重排再把广告复活闭环做进去。这类源码的价值不在「能跑」而在发版后流量主怎么接、广告位怎么布、eCPM 怎么测。下面按小程序工程习惯把渲染、物理、合并逻辑、流量主四块拆开讲路径是源码落地到真机调优。适合手里有源码准备发版试水的开发者也适合想从微信小程序项目实例里学 Canvas 2D 和广告 API 的前端。我不逐行点评某个具体包只讲拿到源码会怎么改。2. 合成版游戏的项目骨架Canvas 渲染与物理引擎选型合成大西瓜这类源码的项目结构比一般微信小程序简单核心只有一个游戏页加一个物理引擎文件。把骨架拆清楚后面替换逻辑才不会东一榔头西一棒子。2.1 合成版和普通版差在哪先把玩法规则立住合成大西瓜的玩法一句话能说清从顶部往下掉水果两个同等级碰到一起就合成下一个等级从葡萄一路合到西瓜堆过顶部一条线就结束。判断一套源码是不是「合成版」不看宣传图打开代码找三处第一合并回调里是不是先销毁旧球再生成新球第二顶部有没有显示「下一个」预览队列第三game over 面板后面有没有挂广告组件的初始化代码。常见做法是把这三处整体重写而不是在原版基础上小改。这种项目的源码结构很薄原生小程序写法下是pages/game/game.wxml加game.jsutils/里放裁剪过的物理引擎压缩文件水果图片放在images/fruits/。如果是从 HBuilderX 导出的 uniapp 微信小程序项目则换成pages/index/index.vue加static/目录逻辑基本一致差别只在生命周期和 API 前缀。拿到源码先看app.json的pages列表确认入口页、window是否自定义导航这会决定 Canvas 走哪条初始化路径。2.2 Canvas 2D 初始化type2d 与像素比适配微信小程序游戏开发里 Canvas 有两条路旧的wx.createCanvasContext和新的 Canvas 2D 节点。旧接口是「指令式」绘制拿不到 canvas 节点也就没有requestAnimationFrame物理帧和渲染帧对不齐合成瞬间会明显跳帧。type2d返回真实节点getContext(2d)拿到的上下文和网页端一致物理循环可以挂在 canvas 自身的时间轴上。!-- pages/game/game.wxml -- view classpage canvas type2d idgameCanvas stylewidth: 750rpx; height: 1200rpx;/canvas /view// pages/game/game.js let canvas null let ctx null function setupCanvas() { const query wx.createSelectorQuery() query.select(#gameCanvas) .fields({ node: true, size: true }) .exec((res) { if (!res || !res[0]) return canvas res[0].node ctx canvas.getContext(2d) // 像素比不缩放的话球边缘会糊成一圈触摸坐标也会偏移 const info wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync() const dpr info.pixelRatio || 2 canvas.width res[0].width * dpr canvas.height res[0].height * dpr ctx.scale(dpr, dpr) }) }fields({ node: true, size: true })是关键node把 canvas 实例交出来size返回 CSS 尺寸。宽度用750rpx是为了和设计稿保持 2 倍关系rpx在小程序里按屏幕宽度自动缩放。ctx.scale(dpr, dpr)不能省否则圆的半径、字体都要乘像素比物理引擎的圆形半径和渲染尺寸一旦不一致合并判定位置就会偏移。如果注册的是小游戏类目而不是小程序页面入口改成wx.createCanvas()拿全局画布其余逻辑相同。function loop() { Matter.Engine.update(engine, 1000 / 60) ctx.clearRect(0, 0, viewW, viewH) drawContainer(ctx) drawFruits(ctx, aliveBodies()) canvas.requestAnimationFrame(loop) }物理尽量用固定步长1000 / 60不要拿真实帧间隔喂给引擎否则掉帧时会连锁产生穿模和合并漏判。2.3 物理引擎两条路线改造 Matter.js 还是换 Planck.js合成大西瓜的手感来自物理引擎。网页原版大量基于 Matter.js各种「微信小程序合成大西瓜源码」也以 matter 系为主。Matter.js 弹性碰撞明显水果会互相挤、压、弹接近原版手感缺点是完整包里带 Render、Mouse 这些 DOM 依赖小程序里没有window和document直接 require 会报错。常见处理是引入 weapp-adapter 垫片补齐全局对象再用打包工具只裁剪引擎核心模块砍掉 Render 和 Mouse。另一条路线是 Planck.jsBox2D 的 TypeScript 移植版没有 DOM 依赖小程序里可以直接 require。手感上 Box2D 堆叠更稳水果不易塌但少了原版那种「弹性乱滚」。两个方案各有取舍选择参考下表。引擎手感倾向小程序适配成本合并判定稳定性适用场景Matter.js弹性强堆叠会晃需要垫片加裁剪打包碰撞事件丰富防双合并要自写追求原版手感、网页端同源复用Planck.js稳重几乎不弹直接引入无需垫片接触事件规则边界行为简单老机型流畅优先、联调时间紧不管选哪个物理引擎只负责位置和碰撞渲染、合并、计分、广告都包在引擎外面。这样做的好处是后续换引擎只需要把Bodies.circle和碰撞事件监听收敛到两个文件页面逻辑不动。源码包里最常见的返工事故就是把Bodies.circle散落在十几个函数里换引擎等于重写。3. 合成大西瓜核心逻辑落地生成、合并与结束判定玩法逻辑决定留存这部分是换皮源码和真正能发版的源码之间差距最大的地方。四个函数就能覆盖全局生成、拖拽、合并、结算剩下都是状态管理。3.1 水果配置表与生成权重水果数据定义成一张表而不是写死 if/else是后面调手感的基础。每种水果记录半径、分数、颜色和生成权重权重决定顶部随机落球时落在哪一档。等级按面积翻倍设计半径乘 √2 左右合成时大小过渡才自然。等级名称半径(px)基准分生成权重1葡萄221302樱桃303253橙子425204柠檬588155猕猴桃8012106番茄110180高等级依次 √2 递增分数按 2 倍翻权重为 0只靠合成生成权重只在 1~4 档之间分配保证玩家前 20 球基本能合成一次这是留存的第一道门槛。分数可以按等级二倍数给也可以按半径比例给只影响结算数值不影响玩法。3.2 生成器与拖拽瞄准生成逻辑有两个容易踩的坑落点 x 不能太贴墙「下一个」预览要在生成前就确定。把「当前球」和「队列」分开管理是最稳的写法。const state { currentType: 1, queue: [randType(), randType()] } function randType() { // 权重集中在低等级避免开局连续给大球 const pool [1, 1, 1, 2, 2, 2, 3, 4] return pool[Math.floor(Math.random() * pool.length)] } function spawnAt(x) { // clamp 在墙内留一个自身半径的余量 const minX WALL_LEFT SIZE_MAP[state.currentType] const maxX WALL_RIGHT - SIZE_MAP[state.currentType] const px Math.min(maxX, Math.max(minX, x)) const body Matter.Bodies.circle(px, TOP_Y, SIZE_MAP[state.currentType], { friction: 0.15, restitution: 0.1, density: 0.0012 }) body.fruitType state.currentType Matter.Composite.add(world, body) // 队列补位顶部预览和实际掉落保持一致 state.currentType state.queue.shift() state.queue.push(randType()) }friction控制水果之间的滑动阻力restitution是弹性系数density决定重量。调参记住一个原则三值不要单独大改restitution一旦超过 0.2两颗同等级水果碰面时会互相弹开而不是停下合并合成频率肉眼可见地下降。拖拽瞄准用touchstart/touchmove/touchend绑定在 canvas 上touchend时把当前球放下去。这里和列表长按拖拽滚动的区别是监听的是 canvas 上的 touch 坐标换算而不是 scroll-view 的滚动事件。3.3 碰撞合并与防双合并合并最典型的 Bug 是同一颗球在一帧里同时进入两对碰撞被销毁两次表现成球闪一下消失甚至新球不出现。在collisionStart里用 Set 记 id 是稳妥解法。const merging new Set() Matter.Events.on(engine, collisionStart, (event) { for (const pair of event.pairs) { const a pair.bodyA const b pair.bodyB if (!a.fruitType || a.fruitType ! b.fruitType) continue if (merging.has(a.id) || merging.has(b.id)) continue const next a.fruitType 1 if (next MAX_LEVEL) continue merging.add(a.id) merging.add(b.id) const mx (a.position.x b.position.x) / 2 const my (a.position.y b.position.y) / 2 Matter.Composite.remove(world, [a, b]) const merged Matter.Bodies.circle(mx, my, SIZE_MAP[next], { friction: 0.15, restitution: 0.1, density: 0.0012 }) merged.fruitType next Matter.Composite.add(world, merged) addScore(next) } })事件回调里 remove 掉的两个 body 要等下一次Engine.update才完全从碰撞树摘除所以 Set 里的 id 不要立刻清理在下一帧循环开头统一merging.clear()。iOS 上如果出现合成瞬间新球闪一下消失多数是渲染函数在Composite.allBodies里取到了已删除 body 的位置统一改成 update 之后、渲染之前收集一份存活 body 列表即可。3.4 结束线判定与最高分持久化结束判定按「静止在危险区的球的数量」来算比单球越线灵敏且不易误判。const LINE_Y 180 // 距容器顶部约一个球位 let overCount 0 let overTimer 0 function checkGameOver() { overCount 0 Matter.Composite.allBodies(world).forEach((body) { if (body.fruitType body.position.y - body.circleRadius LINE_Y) { overCount } }) if (overCount 3) { overTimer if (overTimer 20) endGame() } else { overTimer 0 } }overTimer连续 20 帧满足才结算防止球从上方弹跳瞬间误判。最高分用wx.setStorageSync(suikaTop, score)持久化读写都包 try/catch存储异常时不能导致游戏启动失败。4. 流量主功能接入激励视频、插屏与 Banner 的完整接线流量主功能的核心是广告位 ID 和回调时机接线顺序错了后面全白搭。先把开通条件确认清楚再写代码。4.1 开通流量主的门槛与广告位规划流量主不是发版当天就能开的。微信对小程序和小游戏类目的通用门槛是累计独立访客UV达到 1000mp.weixin.qq.com 后台「推广—流量主」页面能看到进度达到后提交申请审核通过才生效。这里容易踩的坑是审核期间别急着提审带广告代码的版本等流量主状态变成生效再填adUnitId否则广告组件报错还可能被驳回。开通之后先规划广告位再写代码。小游戏里价值最高的是激励视频复活、双倍分数这类「用户主动想看」的场景转化最好插屏适合一局结束的自然停顿Banner 只放结算页底部。每个adUnitId建议收敛到一个adConfig.js文件里换量、换广告位时只改一处。广告类型创建 API推荐埋点展示控制激励视频wx.createRewardedVideoAd复活、双倍奖励、每日宝箱用户点击触发无频率限制插屏wx.createInterstitialAd一局结束回到结算展示次数由平台控制Bannerwx.createBannerAd结算页底部、排行榜下方手动 hide/show切后台隐藏4.2 激励视频广告接入与奖励发放校验激励视频的代码模板各项目基本一致核心是「失败兜底」和「看完才算数」。let rewardAd null function initRewardAd() { if (!wx.createRewardedVideoAd) return rewardAd wx.createRewardedVideoAd({ adUnitId: adunit-xxxx }) rewardAd.onError((err) { console.error(激励视频错误, err.errCode, err.errMsg) }) rewardAd.onClose((res) { if (res res.isEnded) { reviveAndBonus() // 完整看完发复活奖励 } else { wx.showToast({ title: 看完视频才能复活, icon: none }) } }) } function showReward() { if (!rewardAd) return rewardAd.show().catch(() { rewardAd.load().then(() rewardAd.show()).catch(() { wx.showToast({ title: 广告准备好再来, icon: none }) }) }) }show()返回 Promise拉取失败或没填充时 reject兜底逻辑是重新load()再show()。onClose里只有res.isEnded true才代表用户看完整段视频中途退出返回 false两种情况严格区分否则平台会判定诱导或作弊。同一个实例第二次show()前建议走一遍load()这在部分基础库版本里是硬要求。uniapp 项目把wx.换成uni.API 名称与回调结构一致HBuilderX 真机运行同样能调通。4.3 插屏与 Banner 的展示时机和错误码插屏广告最忌讳弹得不是时候。game over 弹结算面板的同时去show()插屏动画和加载冲突用户还没看清分数就被打断容易直接关游戏。常见做法是结算面板出现 800ms 后再请求插屏。setTimeout(() { if (interstitialAd) { interstitialAd.show().catch(() {}) } }, 800)Banner 布局要监听onResize实际渲染高度和创建时的style.top不一定一致不监听会盖住结算按钮。const bannerAd wx.createBannerAd({ adUnitId: adunit-banner, style: { left: 0, top: winHeight - 100, width: winWidth } }) bannerAd.onResize((res) { bannerAd.style.top winHeight - res.height }) bannerAd.show().catch(() {})接入过程中几个错误码不用慌1004 表示暂时无广告填充测试阶段很常见1005 表示广告组件还在审核中1002 表示广告位 ID 无效检查是否从流量主后台复制错或广告位类型和 API 不匹配。注意开发版和体验版几乎拉不到真实广告必须用「真机预览 流量主已生效」的组合验证这是流量主功能接完后最常被误报为 Bug 的一环。5. 合成大西瓜调参技巧与源码改造手感、加载页与性能取舍5.1 手感三参数与物理求解步数拿到任意一套源码先把物理参数收敛到一个PHYSICS_CONFIGfriction 0.1~0.2restitution 0.05~0.15density 0.001~0.002。堆叠塌了优先加 friction 或 density不要动 restitution球体互相嵌入时检查positionIterations是否被改小。老机型掉帧时保持Engine.update(engine, 1000/60)不动把velocityIterations从 4 降到 3一般能保住 50fps。engine.enableSleeping true能降低静止果堆的 CPU 占用休眠状态下collisionStart依然触发只是唤醒延迟一帧对合并结果无影响。5.2 修改加载页与首屏导航适配「修改刚进入的加载页面」在源码里通常涉及两处app.json的navigationStyle: custom和game.wxml首屏封面。改成自定义导航后顶部导航栏高度直接用wx.getMenuButtonBoundingClientRect()返回值计算而不是 statusBarHeight 加固定值加载页的自定义按钮才不会和右上角胶囊重叠。首屏优化常见做法封面图压到 200KB 内、音频延迟到第一次touchstart再加载、物理世界首帧只建容器墙壁等首次点击落球再创建第一个水果冷启动到可交互能压进 1.5 秒。5.3 真机调试清单与一个可复制的参数技巧检查项方法达标标准帧率真机调试面板中端机 ≥ 50fps广告兜底飞行模式点复活不发奖励、不闪退内存wx.getPerformance()连续两局曲线不持续上涨合并准确性连续 5 局统计未合并次数每局 ≤ 2 次一个可复制的技巧用engine.timing.timeScale 0.92把全局速度微降 8%而不是单独调某颗球的参数。玩家几乎无感但同等级球从接触到完成合并的时间窗口变长合并成功率明显上升果堆堆积高度降低结束线判定更宽松停留时长和广告曝光机会都多出来。本文还有配套的精品资源点击获取