企业官网建设流程全解析

简介：本资源是「合成大西瓜」微信小游戏的完整开源小程序源码，面向前端初学者、小程序开发者及游戏逻辑爱好者，提供从零理解轻量级互动游戏开发的实践入口。压缩包共86个文件，含32个JSON配置与页面结构文件、9个JS核心逻辑脚本（涵盖纯JS实现的下落算法、碰撞检测与水果合成规则）、43个PNG游戏素材及2个MP3音效，整体仅2.89MB，结构精简、开箱即用。已有1185人学习下载，反映出其在小程序游戏开发入门场景中的高参考价值。读者可直接研读game.js等主逻辑文件掌握JavaScript事件循环驱动的游戏帧更新机制，通过WXML/WXSS组件化结构理解界面动态渲染逻辑，并借助project.config.json与page级json配置快速复现项目环境，是学习微信小程序架构、游戏算法封装与性能优化的典型范例。

1. 合成大西瓜小游戏微信小程序源码：不是拿来即用的“玩具包”，而是理解微信小游戏渲染逻辑与物理交互设计的实战切口

你搜到这个标题，大概率正面临三个现实问题：想快速上手微信小游戏开发但卡在“第一个可运行项目”；需要一个轻量、完整、带物理反馈的参考案例来验证自己的碰撞检测或分数系统设计；或者正被产品临时拉去救火，要求三天内交付一个带合成机制+视觉反馈+本地存档的互动小模块。别急着下载就跑——市面上标着“合成大西瓜源码”的压缩包，90% 缺少关键帧动画控制逻辑、未适配微信基础库 2.27+ 的 Canvas 渲染上下文变更、分数计算存在浮点误差累积翻车。它真正价值不在“复刻游戏”，而在于提供一个可调试、可解耦、可替换核心算法的微信小游戏最小可行结构：Canvas 渲染层与游戏逻辑层分离清晰，物理合成判定不依赖第三方引擎，本地存档用 wx.setStorageSync 封装了防抖写入。适合刚过完官方《小程序开发文档》前四章的开发者，也适合需要快速验证“合成类交互是否适配当前业务场景”的中阶工程师。接下来，我会带你从零还原一个能真机扫码运行、支持 iOS/Android 双端触控响应、合成动画不卡顿的版本——所有代码基于微信开发者工具 Stable 1.06.2403140 + 基础库 2.28.3 实测通过。

2. 搭建可运行环境：用微信开发者工具创建项目并注入核心结构

2.1 创建空白小游戏项目并配置基础能力

打开微信开发者工具（确保已登录且绑定开发者账号），点击「新建项目」→ 选择「小程序」→ 填写 AppID（测试号可用）→ 项目名称填synthetic-watermelon→ 开发语言选「JavaScript」→ 模板选「空项目」→ 勾选「使用 TypeScript」（可选，本方案用 JS 更直观）。
创建后，进入项目根目录，执行以下命令初始化基础结构：

# 进入项目目录后执行 mkdir -p game/utils game/logic game/assets touch app.js app.json project.config.json

提示：不要直接覆盖project.config.json，需手动编辑其setting.minified字段为false，否则后续调试时无法查看压缩后的 Canvas 绘制调用栈。

关键配置文件app.json需明确声明小游戏类型和渲染模式：

{ "deviceOrientation": "portrait", "networkTimeout": { "request": 10000 }, "usingComponents": false, "renderer": "webgl", // 必须设为 webgl，2D Canvas 在合成动画中易掉帧 "resizable": false, "sitemapLocation": "sitemap.json" }

app.js是入口文件，需注册小游戏生命周期：

// app.js App({ onLaunch() { console.log('小游戏启动'); // 初始化游戏状态管理器 this.globalData.gameState = { score: 0, level: 1, isRunning: false, fruits: [] // 存储当前画布上的水果对象数组 }; }, globalData: {} });

2.2 构建 Canvas 渲染主循环：用 requestAnimationFrame 替代 setInterval

微信小游戏不支持 DOM，必须用 Canvas API 手动绘制每一帧。在game/utils/render.js中实现：

// game/utils/render.js class GameRenderer { constructor(canvasId) { this.canvas = wx.createCanvas(); this.ctx = this.canvas.getContext('2d'); this.width = wx.getSystemInfoSync().windowWidth; this.height = wx.getSystemInfoSync().windowHeight; this.canvas.width = this.width * wx.getSystemInfoSync().pixelRatio; this.canvas.height = this.height * wx.getSystemInfoSync().pixelRatio; this.ctx.scale(wx.getSystemInfoSync().pixelRatio, wx.getSystemInfoSync().pixelRatio); this.lastTime = 0; this.frameId = null; } start() { const step = (timestamp) => { const deltaTime = timestamp - this.lastTime; this.lastTime = timestamp; // 清屏（注意：必须用 fillRect 而非 clearRect，后者在部分安卓机型有残留） this.ctx.fillStyle = '#f5f5f5'; this.ctx.fillRect(0, 0, this.width, this.height); // 调用游戏逻辑更新 this.update(deltaTime); // 绘制当前帧 this.render(); this.frameId = requestAnimationFrame(step); }; this.frameId = requestAnimationFrame(step); } update(deltaTime) { // 此处调用 game/logic/update.js 中的逻辑更新函数 require('../logic/update').update(deltaTime); } render() { // 此处调用 game/logic/draw.js 中的绘制函数 require('../logic/draw').draw(this.ctx); } stop() { if (this.frameId) { cancelAnimationFrame(this.frameId); this.frameId = null; } } } module.exports = GameRenderer;

参数说明：pixelRatio是关键——微信小游戏 Canvas 的物理像素与逻辑像素分离，不缩放会导致高清屏下图形模糊；fillRect清屏比clearRect更稳定，实测在华为 P40、小米 12 上避免了残影。

2.3 注册小游戏页面并挂载渲染器

在pages/index/index.js中完成初始化：

// pages/index/index.js const GameRenderer = require('../../game/utils/render'); Page({ data: { canvasStyle: 'width:100vw;height:100vh;' }, onLoad() { // 创建渲染器实例 this.renderer = new GameRenderer('gameCanvas'); // 启动主循环 this.renderer.start(); // 绑定触摸事件（微信小游戏专用 API） wx.onTouchStart(this.handleTouchStart.bind(this)); wx.onTouchMove(this.handleTouchMove.bind(this)); wx.onTouchEnd(this.handleTouchEnd.bind(this)); }, handleTouchStart(e) { const { x, y } = e.touches[0]; require('../../game/logic/input').onTouchStart(x, y); }, handleTouchMove(e) { const { x, y } = e.touches[0]; require('../../game/logic/input').onTouchMove(x, y); }, handleTouchEnd() { require('../../game/logic/input').onTouchEnd(); }, onUnload() { if (this.renderer) { this.renderer.stop(); } } });

逻辑说明：wx.onTouchStart等是微信小游戏专属事件监听，不能用canvas.addEventListener；onLoad中启动渲染器而非onReady，因onReady触发时机晚于 Canvas 初始化，会导致首帧丢失。

3. 实现核心合成逻辑：基于半径比较的碰撞判定与递归合并

3.1 水果数据结构定义与初始化

在game/logic/fruit.js中定义水果类，重点控制半径、位置、合成等级：

// game/logic/fruit.js class Fruit { constructor(x, y, level = 1) { this.x = x; this.y = y; this.level = level; // 1=西瓜子，2=小西瓜，3=大西瓜... 最高7级 this.radius = 20 + level * 15; // 半径随等级增长，保证视觉可区分 this.velocityX = (Math.random() - 0.5) * 4; // 初始水平速度 this.velocityY = -8; // 初始垂直速度（向上抛） this.isFalling = true; this.id = Date.now() + Math.random(); // 唯一 ID 用于调试 } // 获取合成后的新水果（返回新实例，原实例销毁） mergeWith(other) { if (this.level !== other.level) return null; const newLevel = Math.min(this.level + 1, 7); // 最高等级限制为7 return new Fruit( (this.x + other.x) / 2, (this.y + other.y) / 2, newLevel ); } // 更新位置（含重力加速度） update(deltaTime) { if (!this.isFalling) return; // 重力加速度：每毫秒增加 0.02 像素/毫秒 this.velocityY += 0.02 * deltaTime; this.x += this.velocityX * deltaTime; this.y += this.velocityY * deltaTime; // 边界反弹（简化处理，仅左右） if (this.x - this.radius < 0 || this.x + this.radius > wx.getSystemInfoSync().windowWidth) { this.velocityX *= -0.8; // 能量衰减 this.x = this.x < this.radius ? this.radius : wx.getSystemInfoSync().windowWidth - this.radius; } // 落地检测（y > 画面底部 - 半径） const bottom = wx.getSystemInfoSync().windowHeight - this.radius; if (this.y > bottom) { this.y = bottom; this.velocityY *= -0.6; // 垂直反弹衰减 if (Math.abs(this.velocityY) < 0.5) { this.velocityY = 0; this.isFalling = false; } } } } module.exports = Fruit;

参数说明：deltaTime传入确保动画帧率无关——即使设备卡顿，水果下落距离仍准确；level严格限制为 1~7，避免无限合成导致数值溢出；velocityX初始值用随机偏移，让每次生成的水果运动轨迹不同。

3.2 碰撞检测与合成触发：双循环遍历 + 距离平方优化

在game/logic/collision.js中实现高效碰撞检测：

// game/logic/collision.js const Fruit = require('./fruit'); function checkCollisions(fruits) { const toRemove = new Set(); const toAdd = []; // 双重循环检测（O(n²)，但 n<50 时性能足够） for (let i = 0; i < fruits.length; i++) { for (let j = i + 1; j < fruits.length; j++) { const a = fruits[i]; const b = fruits[j]; // 距离平方比较（避免开方运算） const dx = a.x - b.x; const dy = a.y - b.y; const distanceSquared = dx * dx + dy * dy; const minDistance = a.radius + b.radius; if (distanceSquared < minDistance * minDistance) { // 检查是否同等级且未标记移除 if (a.level === b.level && !toRemove.has(i) && !toRemove.has(j)) { // 触发合成 const newFruit = a.mergeWith(b); if (newFruit) { toRemove.add(i); toRemove.add(j); toAdd.push(newFruit); // 更新全局分数：合成奖励 = 10 * 2^level const app = getApp(); app.globalData.gameState.score += 10 * Math.pow(2, a.level); } } } } } // 执行移除与添加 const filtered = fruits.filter((_, index) => !toRemove.has(index)); return [...filtered, ...toAdd]; } module.exports = { checkCollisions };

性能说明：用distanceSquared替代Math.sqrt，实测在低端安卓机（如 Redmi Note 8）上单帧耗时从 8ms 降至 2ms；toRemove用Set而非数组includes，避免重复遍历；合成奖励公式10 * 2^level是行业常见设计，7级西瓜奖励 640 分，符合玩家成长预期。

3.3 递归合成与层级爆炸防护

合成可能引发连锁反应（A+B→C，C+D→E），需防止无限递归。在game/logic/update.js中封装安全更新：

// game/logic/update.js const Fruit = require('./fruit'); const { checkCollisions } = require('./collision'); let fruits = []; let spawnTimer = 0; function update(deltaTime) { // 水果更新（位置、速度） fruits.forEach(fruit => fruit.update(deltaTime)); // 碰撞检测（最多迭代3次，防死循环） let iteration = 0; let changed = true; while (changed && iteration < 3) { const beforeCount = fruits.length; fruits = checkCollisions(fruits); changed = fruits.length !== beforeCount; iteration++; } // 水果生成逻辑（每1.5秒生成一个新水果） spawnTimer += deltaTime; if (spawnTimer > 1500) { const screenWidth = wx.getSystemInfoSync().windowWidth; const x = 50 + Math.random() * (screenWidth - 100); fruits.push(new Fruit(x, 50, 1)); spawnTimer = 0; } } // 导出供 renderer 调用 module.exports = { update, getFruits: () => fruits, setFruits: (newFruits) => { fruits = newFruits; } };

边界说明：iteration < 3是血泪经验——某次测试中未加限制，7个水果同时碰撞导致 12 层递归，内存暴涨至 200MB 后小游戏崩溃；spawnTimer用毫秒计时而非帧数，确保生成节奏稳定。

4. 避坑：微信小游戏合成逻辑的 4 个高频翻车点与修复方案

4.1 现象：iOS 真机上水果下落速度明显快于安卓，且触控响应延迟

原因：iOS 微信 WebView 对requestAnimationFrame的时间戳精度异常，deltaTime计算失真；同时wx.onTouchStart在 iOS 上存在 50~100ms 的事件队列延迟。

解决：

• 在game/utils/render.js的step函数中，改用performance.now()替代timestamp：

  const step = () => { const now = performance.now(); const deltaTime = now - this.lastTime; this.lastTime = now; // ...后续逻辑不变 };

• 触控事件改用wx.createSelectorQuery()主动抓取坐标，绕过事件队列：

  // pages/index/index.js 中替换 handleTouchStart handleTouchStart() { wx.createSelectorQuery() .selectViewport() .boundingClientRect() .exec(res => { const { x, y } = res[0]; require('../../game/logic/input').onTouchStart(x, y); }); }

4.2 现象：合成动画播放时 Canvas 出现撕裂感，尤其在快速连续合成时

原因：Canvas 绘制未与屏幕刷新率同步，且fillRect清屏与drawImage绘制之间存在竞态。

解决：启用双缓冲机制，在game/utils/render.js中新增缓冲 Canvas：

// game/utils/render.js 新增 this.bufferCanvas = wx.createCanvas(); this.bufferCtx = this.bufferCanvas.getContext('2d'); this.bufferCtx.scale(pixelRatio, pixelRatio); // render() 方法改为： render() { // 先绘制到缓冲区 this.bufferCtx.fillStyle = '#f5f5f5'; this.bufferCtx.fillRect(0, 0, this.width, this.height); require('../logic/draw').draw(this.bufferCtx); // 再一次性复制到主 Canvas this.ctx.drawImage( this.bufferCanvas, 0, 0, this.width, this.height, 0, 0, this.width, this.height ); }

4.3 现象：用户退出小程序再进入，分数清零，且历史最高分未保存

原因：wx.setStorageSync调用未做防抖，高频合成时连续写入触发微信存储限频（10次/秒），导致部分写入失败；且未在onHide生命周期中主动保存。

解决：在game/utils/storage.js中封装防抖存储：

// game/utils/storage.js let saveQueue = []; let saveTimer = null; function debounceSave() { if (saveTimer) clearTimeout(saveTimer); saveTimer = setTimeout(() => { const app = getApp(); try { wx.setStorageSync('gameScore', app.globalData.gameState.score); wx.setStorageSync('gameBest', Math.max( wx.getStorageSync('gameBest') || 0, app.globalData.gameState.score )); saveQueue = []; } catch (e) { console.error('存储失败:', e); // 失败时加入重试队列 saveQueue.push(Date.now()); if (saveQueue.length > 3) saveQueue.shift(); } }, 300); // 300ms 防抖 } module.exports = { debounceSave };

并在game/logic/update.js的分数更新后调用：

app.globalData.gameState.score += 10 * Math.pow(2, a.level); require('../utils/storage').debounceSave(); // 立即触发防抖

4.4 现象：华为某型号手机上，水果落地后持续微小抖动，无法静止

原因：该机型windowHeight返回值包含状态栏高度，导致bottom计算错误；且velocityY衰减系数0.6在低帧率下不足以抵消浮点误差累积。

解决：

• 使用wx.getSystemInfoSync().screenHeight替代windowHeight计算底部：

  const screenHeight = wx.getSystemInfoSync().screenHeight; const bottom = screenHeight - this.radius;

• 在Fruit.update()中增加静止阈值判断：

  if (Math.abs(this.velocityY) < 0.1 && Math.abs(this.velocityX) < 0.1 && this.y >= bottom - 1) { this.velocityY = 0; this.velocityX = 0; this.y = bottom; this.isFalling = false; }

5. 优化合成体验：粒子特效、音效反馈与性能监控

5.1 用 Canvas 绘制轻量粒子爆炸效果

不引入 Lottie 或视频，用纯 Canvas 绘制合成时的粒子：

// game/logic/particle.js class Particle { constructor(x, y, color) { this.x = x; this.y = y; this.color = color; this.size = 2 + Math.random() * 3; this.speedX = (Math.random() - 0.5) * 6; this.speedY = (Math.random() - 0.5) * 6; this.life = 30; // 存活帧数 } update() { this.x += this.speedX; this.y += this.speedY; this.life--; this.size *= 0.97; } draw(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); } isDead() { return this.life <= 0; } } let particles = []; function createExplosion(x, y, level) { const colors = ['#FF6B6B', '#4ECDC4', '#FFE66D']; const color = colors[level % colors.length]; for (let i = 0; i < 12; i++) { particles.push(new Particle(x, y, color)); } } function updateParticles() { particles = particles.filter(p => { p.update(); return !p.isDead(); }); } function drawParticles(ctx) { particles.forEach(p => p.draw(ctx)); } module.exports = { createExplosion, updateParticles, drawParticles };

在game/logic/collision.js的合成成功分支中调用：

if (newFruit) { require('./particle').createExplosion( (a.x + b.x) / 2, (a.y + b.y) / 2, a.level ); // ...其余逻辑 }

性能说明：粒子数量硬限 100 个，超出则 FIFO 清理最老粒子；size *= 0.97比线性衰减更符合物理观感。

5.2 集成微信原生音效：用 createInnerAudioContext 替代 wx.playSound

wx.playSound不支持并发与音量控制，改用createInnerAudioContext：

// game/utils/audio.js let audioContext = null; function initAudio() { if (!audioContext) { audioContext = wx.createInnerAudioContext(); audioContext.autoplay = false; audioContext.loop = false; } } function playSound(url) { if (!audioContext) initAudio(); audioContext.src = url; audioContext.volume = 0.7; audioContext.play(); } // 预加载音效（在 app.js onLaunch 中调用） function preloadSounds() { const sounds = [ 'https://xxx.com/sounds/pop.mp3', // 合成音 'https://xxx.com/sounds/fall.mp3' // 落地音 ]; sounds.forEach(url => { const ctx = wx.createInnerAudioContext(); ctx.src = url; }); } module.exports = { playSound, preloadSounds };

注意：音效文件必须 HTTPS，且需在app.json的requiredBackgroundModes中添加"audio"（仅当需后台播放时）；预加载可避免首次合成时的加载延迟。

5.3 添加 FPS 监控面板：实时诊断性能瓶颈

在game/utils/fps.js中实现：

// game/utils/fps.js class FPSMonitor { constructor() { this.frames = []; this.lastTime = performance.now(); } tick() { const now = performance.now(); this.frames.push(now); // 保留最近100帧 if (this.frames.length > 100) { this.frames.shift(); } } getFPS() { if (this.frames.length < 2) return 0; const first = this.frames[0]; const last = this.frames[this.frames.length - 1]; return Math.round((this.frames.length - 1) / ((last - first) / 1000)); } draw(ctx, x = 10, y = 30) { const fps = this.getFPS(); ctx.font = '14px sans-serif'; ctx.fillStyle = fps > 55 ? '#4CAF50' : fps > 45 ? '#FF9800' : '#F44336'; ctx.fillText(`FPS: ${fps}`, x, y); } } module.exports = FPSMonitor;

在game/utils/render.js的render()末尾添加：

// 初始化一次 if (!this.fpsMonitor) { this.fpsMonitor = new (require('../utils/fps'))(); } this.fpsMonitor.tick(); this.fpsMonitor.draw(this.ctx);

价值点：FPS 面板不是炫技——当发现 FPS 稳定在 30 时，立刻检查checkCollisions是否未做iteration限制；当 FPS 波动剧烈，优先排查drawParticles中粒子数量是否失控。

6. 验证与上线前必做的 3 项实机测试及我的血泪习惯

6.1 真机压力测试：用「连续合成」场景暴露隐藏缺陷

别只测单次合成，要模拟用户狂点屏幕的极端操作：

• 测试步骤：在 iPhone 13 和 Redmi Note 12 上，用手指以 2Hz 频率连续点击顶部区域 60 秒，观察：

  1. 水果生成是否卡顿（应保持 1.5s/个）；
  2. 合成后粒子是否堆积（超过 100 个需自动清理）；
  3. 内存占用是否线性增长（微信开发者工具「调试器 → Console → 输入wx.getPerformance().memory」，10 分钟内增幅应 < 10MB）。

• 我的习惯：每次功能迭代后，我都会用「手机支架+机械臂」模拟 10 分钟连续操作，记录console.time('update')和console.time('render')的耗时分布。曾发现某次优化draw函数后，update耗时反而上升——根源是getFruits()返回了未冻结的数组引用，导致checkCollisions中的filter产生隐式拷贝。教训：永远用Object.freeze()封装导出的数据结构。

6.2 网络弱网模拟：验证本地存档的鲁棒性

微信小游戏在弱网下wx.getStorageInfoSync()可能超时，导致初始化失败：

// game/utils/storage.js 补充容错 function loadGameState() { try { const info = wx.getStorageInfoSync(); if (info.currentSize > 5 * 1024 * 1024) { // 存储超 5MB，清空旧数据（微信限制 10MB，留余量） wx.clearStorageSync(); return { score: 0, best: 0 }; } return { score: wx.getStorageSync('gameScore') || 0, best: wx.getStorageSync('gameBest') || 0 }; } catch (e) { console.warn('读取存档失败，使用默认值'); return { score: 0, best: 0 }; } }

实操技巧：在开发者工具中开启「网络 → Slow 3G」，然后冷启动小程序，确认首页不白屏、分数显示正确。我曾在某次上线前漏测此环节，导致 3% 用户反馈“分数总是 0”，根源是getStorageSync在弱网下抛出未捕获异常，中断了onLaunch流程。

6.3 多尺寸适配验证：用 CSS transform 替代 width/height 硬编码

所有 Canvas 绘制必须基于windowWidth/windowHeight动态计算，但 UI 元素（如开始按钮、分数板）需用 WXML+WXSS：

<!-- pages/index/index.wxml --> <view class="score-board"> <text class="score-text">SCORE: {{score}}</text> <text class="best-text">BEST: {{best}}</text> </view>

/* pages/index/index.wxss */ .score-board { position: absolute; top: 20rpx; left: 30rpx; z-index: 10; } .score-text { font-size: 32rpx; font-weight: bold; color: #333; } .best-text { font-size: 28rpx; color: #666; margin-top: 10rpx; }

关键细节：rpx是微信推荐单位，1rpx = 屏幕宽度/750；z-index: 10确保 UI 层在 Canvas 上层；position: absolute避免 Flex 布局在低端机型上的兼容问题。我坚持一个原则：Canvas 只负责动态图形，所有静态 UI 交由 WXML 渲染——这样既保证性能，又便于后续接入云开发数据库存档。

最后说句实在话：这个“合成大西瓜”源码的价值，从来不在复刻游戏本身。它是一把解剖刀，帮你切开微信小游戏的渲染管线、事件流、存储机制和性能瓶颈。我见过太多开发者下载源码后直接改图片就上线，结果在 iOS 17 上大面积闪退——因为没注意到createCanvas()在新系统中返回 Promise。所以，别跳过game/utils/render.js里那行this.canvas = await wx.createCanvas()的 async 改写。希望帮到你。

本文还有配套的精品资源，点击获取