简介这份微信小游戏源码包以“奇葩连连看”为完整示例面向微信小游戏入门与进阶开发者尤其适合想了解经典消除玩法从场景搭建、连线消除逻辑到计分与音效反馈整体实现的学习者。资源共六十五个文件压缩包约两百二十五千字节主要包含六个逻辑脚本、一个样式文件、一个页面入口以及五十六张图片素材涵盖背景、按钮、数字、水果图案和分享奖励等视觉元素便于对照代码理解纹理、动画与界面的组织方式。目前已有一千二百二十二人学习下载。通过研读核心游戏脚本可以看清画布渲染、点击判定、相同图案连线消除、倒计时与排行榜等模块的协作细节同时图片命名和目录划分也保留了原始开发习惯适合作为课程设计参考、面试作品打磨或二次改版基础。1. 微信小游戏奇葩连连看源码一份学习素材背后的三个硬知识点把一份“微信小游戏源码”下载到本地再用微信开发者工具打开很多人的第一反应是游戏怎么没跑起来真正的原因往往不在代码本身而在小游戏这个运行环境里。奇葩连连看虽然玩法简单但作为微信小游戏源码的入门素材它正好把三个最容易卡住的点凑齐了没有DOM的Canvas渲染、以二维数组为核心的棋盘算法、以及手机端的触摸坐标换算。如果你能把这几个点拆顺后面的休闲游戏基本都能举一反三。下面我从工程骨架、消除算法、真机适配三个方向把这份学习参考价值最大的地方逐层展开。2. 微信小游戏源码的工程骨架从game.js到Canvas主循环2.1 没有DOM的世界wx.createCanvas与GameGlobal拿到任何一份微信小游戏源码第一步不是读逻辑而是找入口。微信小游戏的入口固定在game.js它运行在一个没有DOM的环境里熟悉的document.getElementById、innerHTML这些API全部不存在。页面里唯一的可见区域是wx.createCanvas()创建的主画布所有按钮、棋盘、计分板都要通过Canvas 2D接口一针一针画出来。奇葩连连看的启动流程和其他休闲游戏基本一致// game.js —— 常见的入口写法 const canvas wx.createCanvas() // 主画布 const ctx canvas.getContext(2d) // 2D渲染上下文 ctx.fillRect(0, 0, canvas.width, canvas.height)画布宽高默认对应当前设备的屏幕分辨率但开发者工具里的机型模拟会影响这个值。注意wx.createCanvas()第一次调用返回主屏画布后续再调用会创建离屏画布用于缓存或特效渲染。入口代码一旦重复初始化主画布画面会出现重叠或闪烁这种问题在真机上比在开发者工具里更难排查。提示主画布的初始化只做一次后续创建的画布都是离屏画布不要重复获取。2.2 奇葩连连看源码的目录结构与config.js全局参数学习级别的微信小游戏源码通常没有复杂的构建工具链反而更适合直接阅读。常见的目录结构是game.js放在根目录核心逻辑放在js目录下图片素材放在assets里。整理一份适用于奇葩连连看的参考结构文件/目录职责备注game.js入口初始化画布和游戏循环小游戏约定名称js/config.js棋盘行列、格子大小、动画时长集中管理参数js/core/board.js棋盘生成与消除判断算法核心js/core/path.js路径检测连连看特有js/ui/render.js绘制方块、提示、队列依赖Canvas APIjs/ui/touch.js触摸事件与坐标换算决定手感config.js里的参数会直接影响棋盘的触控准确度// js/config.js —— 参数集中管理调试只改这一处 export const BOARD_COLS 10 // 列数偶数最佳保证成对图案能落盘 export const BOARD_ROWS 12 // 行数建议大于列数竖屏观感好 export const CELL_SIZE 60 // 单格边长单位px export const PATTERN_COUNT 15 // 图案种类数多则难度低少则连击难 export const ANIM_DURATION 200 // 消除动画时长单位ms这里几个参数需要一起调整。棋盘越大、图案种类越少开局越难CELL_SIZE越大点选越准但画布总宽度等于列数乘格子边长最好不要超过屏幕宽度否则两端的格子会被画出屏幕。PATTERN_COUNT还要满足整除关系否则棋盘尾部会多出无法配对的格子。把参数集中到config.js里是学习源码的第一课也是后面改动版型最小的方法。2.3 微信小游戏的主循环requestAnimationFrame与setInterval的取舍连连看类游戏对帧率不像动作游戏那么敏感但消除动画、倒计时、待机状态刷新都需要一个稳定的主循环。微信小游戏支持requestAnimationFrame它的回调参数time是页面启动以来经过的毫秒数每次回调之间的间隔会随设备帧率变化。用上一帧与当前帧的差值驱动逻辑才能避免60帧和120帧设备手感不一致// js/core/loop.js —— 主循环参考实现 let lastTime 0 function frame(time) { // delta单位是秒time来自requestAnimationFrame回调 const delta (time - lastTime) / 1000 if (delta 0.016) { // 约60FPS低端机不会空转发热 update(delta) // 更新棋盘状态与动画进度 render() // 绘制画布内容 lastTime time } requestAnimationFrame(frame) } requestAnimationFrame(frame)0.016对应每秒约60帧。有的源码直接用setInterval(update, 16)也能跑但微信小游戏切到后台时会挂起定时器回到前台后容易出现一次执行多次的跳变requestAnimationFrame会由引擎统一调度不会出现这种问题。源码学习里的主循环重点不是性能而是你能否理解delta的存在。后续做机关动画时凡是涉及位移都要用delta乘速度否则帧率一变速度就变。3. 奇葩连连看的核心算法棋盘生成、消除判定与路径检测3.1 奇葩连连看棋盘生成二维数组与Fisher-Yates洗牌奇葩连连看的“奇葩”之处通常不在玩法框架而在图案搭配、障碍分布、以及消除后的重新洗盘。数据载体是一个二维数组board[row][col]元素值为0代表空格非0值代表第几种图案。生成棋子时必须保证每种图案出现的次数是偶数否则到最后一定会剩下两个无法配对的格子。常见生成思路如下// js/core/board.js —— 棋盘初始化核心逻辑 const TOTAL BOARD_COLS * BOARD_ROWS const tiles [] // 每种图案每局出现两次先用编号铺满一维数组 for (let i 0; i TOTAL / 2; i) { const pattern i % PATTERN_COUNT tiles.push(pattern, pattern) } // Fisher-Yates洗牌从后往前遍历等概率打乱 for (let i tiles.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)) const tmp tiles[i] tiles[i] tiles[j] tiles[j] tmp } // 一维转二维之后所有判定都基于board[row][col] const board [] for (let row 0; row BOARD_ROWS; row) { const line [] for (let col 0; col BOARD_COLS; col) { line.push(tiles[row * BOARD_COLS col]) } board.push(line) }这段代码的关键是洗牌方式。Fisher-Yates从后往前遍历交换范围是0到iMath.floor(Math.random() * (i 1))生成的j永远不会大于i所以每次交换都是有效的。如果TOTAL / 2不能被PATTERN_COUNT整除数组尾部会出现几个只出现一次的图案开局就注定无法通关。生成棋盘后还应该跑一遍“当前局面是否存在可消除组合”避免玩家开局就卡死。这个检查通常复用后面要讲的路径检测函数对每个非空格子尝试与其后的同图案格子配对。棋盘尺寸与图案种类对游戏难度的影响可以参考下面这张表棋盘尺寸列×行图案种类数单次路径检测开销适合场景8×1010极低新手入门10×1215低竖屏手机12×1620中平板或横屏3.2 消除判定直线和L型转弯的判定逻辑连连看的消除规则是两个图案编号相同且可以用不超过两次转弯的折线连接折线经过的所有格子必须是空的。先看最基础的直线情况同一行或同一列中间没有遮挡即可消除。再看单拐点也就是L型路径拐点坐标只有两个候选以两个选中点为对角线的另外两个角。先判断拐点自身是否为空再分两段检查区间是否通畅// js/core/path.js —— 直线与单拐点路径检测 function isRowClear(board, row, colA, colB) { const minC Math.min(colA, colB) const maxC Math.max(colA, colB) // 从minC1到maxC-1避开两端待消除图案 for (let c minC 1; c maxC; c) { if (board[row][c] ! 0) return false } return true } function isColClear(board, col, rowA, rowB) { const minR Math.min(rowA, rowB) const maxR Math.max(rowA, rowB) for (let r minR 1; r maxR; r) { if (board[r][col] ! 0) return false } return true } function canConnect(board, r1, c1, r2, c2) { if (r1 r2 c1 c2) return false if (board[r1][c1] ! board[r2][c2]) return false // 同行或同列直线直接判断 if (r1 r2) return isRowClear(board, r1, c1, c2) if (c1 c2) return isColClear(board, c1, r1, r2) // 拐点一(r1, c2) if (board[r1][c2] 0 isRowClear(board, r1, c1, c2) isColClear(board, c2, r1, r2)) { return true } // 拐点二(r2, c1) if (board[r2][c1] 0 isRowClear(board, r2, c1, c2) isColClear(board, c1, r1, r2)) { return true } return false }判定顺序要固定先排除同一点再比较图案编号最后做区间检查。isRowClear的循环区间设计容易出错如果从minC开始遍历端点上的图案本身非空两个相邻的同图案格子永远连不上。单拐点检查同理拐点本身一旦被占用整个路径立即失效。两个拐点候选只要有一个通过就算可连否则进入下一步双拐点检测。提示区间检测必须先处理端点直接从minC扫到maxC会让相邻同图案永远消不掉。3.3 双拐点路径检测和外扩一圈的常见优化双拐点是最容易写错的部分。常见做法是枚举中间行或中间列检查三段路径是否连续为空。以枚举中间行为例预先选一个midR路径从(r1,c1)竖直到(midR,c1)横移到(midR,c2)再竖直到(r2,c2)。midR不能等于r1或r2否则就会退化成单拐点甚至直线// js/core/path.js —— 双拐点检测枚举中间行 function canConnectWithTwoTurns(board, r1, c1, r2, c2) { const rows board.length for (let midR 0; midR rows; midR) { if (midR r1 || midR r2) continue // 两个拐点本身都必须为空 if (board[midR][c1] ! 0 || board[midR][c2] ! 0) continue if (isColClear(board, c1, r1, midR) isRowClear(board, midR, c1, c2) isColClear(board, c2, midR, r2)) { return true } } return false }复杂度是O(rows乘三段路径长度之和)对10×12的棋盘足够快。如果棋盘继续扩大可以预先统计全空行只枚举这些中间行减少无效遍历。学习阶段不建议一开始就做这类优化先把三条路径的区间写对更重要。另一个容易踩的坑是只枚举了两个对角拐点就跳过了双拐点这种情况会导致棋盘角落的图案永远消不掉。边界问题也可以用一个小技巧规避在棋盘数组外围再包一层0让“棋盘外”成为合法的空路径。这样边角图案可以从棋盘外绕行所有判断统一走同一套区间扫描逻辑不需要再单独写边缘分支。4. 学习级微信小游戏源码的落地资源加载、触摸事件与屏幕适配4.1 用wx.createImage加载图案素材路径与回调参数微信小游戏里不能直接使用new Image()但提供了wx.createImage()接口回调风格和DOM里的Image对象几乎一致。奇葩连连看需要加载的图片不多常见做法是在开局前把图案批量加载全部onload之后再进入主循环避免游戏过程中出现方块闪烁或空白// js/ui/render.js —— 图案图片批量加载 const patternImages [] function loadPatterns(patternCount, baseUrl) { return new Promise((resolve) { let loaded 0 for (let i 1; i patternCount; i) { const img wx.createImage() img.onload () { patternImages[i] img loaded if (loaded patternCount) resolve() } img.onerror () { // 缺图不应阻塞主流程打印日志后继续 console.warn(pattern load failed:, i) loaded if (loaded patternCount) resolve() } img.src ${baseUrl}/${i}.png } }) }这里有两个参数细节。路径部分开发者工具里相对路径通常能跑通真机上最好使用以/开头的绝对路径资源根目录是工程根目录不是当前JS文件所在目录。回调部分onerror分支不能省只要素材文件命名不连续加载计数就永远到不了总数游戏会卡在加载界面。学习源码时可以把onerror里直接resolve的写法理解为“降级处理”进入游戏后如果取到的图片为空就画一个纯色方块兜底。4.2 触摸坐标到棋盘格子的换算一个公式决定手感微信小游戏的触摸事件有两个层级全局的wx.onTouchStart和画布上的touchstart事件。如果项目里只有一个主画布两种写法都能用但坐标来源都要统一用e.touches[0]里的clientX和clientY。换算公式看上去简单差一个取整函数手感就完全不同// js/ui/touch.js —— 触摸点换算为棋盘坐标 const BOARD_LEFT 20 // 棋盘左边距 const BOARD_TOP 120 // 棋盘上边距顶部预留计分栏 function handleTouch(e) { const touch e.touches[0] // 先减去棋盘原点再除以格子边长 const col Math.floor((touch.clientX - BOARD_LEFT) / CELL_SIZE) const row Math.floor((touch.clientY - BOARD_TOP) / CELL_SIZE) // 越界直接返回避免负下标访问 if (row 0 || row BOARD_ROWS || col 0 || col BOARD_COLS) return selectTile(row, col) }Math.floor会把0.9格强制归为当前格Math.round则会把0.5以上的偏差推给下一格。触摸误判大多不是算法问题而是这里用了四舍五入。BOARD_LEFT和BOARD_TOP如果写死需要保证棋盘在画布中的位置不变一旦做了居中适配就要动态计算例如BOARD_LEFT (canvas.width - BOARD_COLS * CELL_SIZE) / 2。真机上建议把这两个值放进config.js和棋盘参数放一起调整时会容易很多。提示把棋盘原点放进config.js换机型调试时可以少改很多代码。4.3 真机适配参数pixelRatio与safeArea学习源码最容易在真机上暴露两个问题画质发虚和刘海屏遮挡。画质发虚的原因是画布物理尺寸没有跟随设备的像素倍率只用了CSS像素尺寸。小游戏开发里画布尺寸需要手动乘pixelRatio再用ctx.scale恢复逻辑坐标系// js/config.js —— 真机参数初始化 const info wx.getSystemInfoSync() export const SCREEN_W info.windowWidth export const SCREEN_H info.windowHeight export const DPR info.pixelRatio || 2 // 创建画布时按DPR设置物理尺寸 const canvas wx.createCanvas() canvas.width SCREEN_W * DPR canvas.height SCREEN_H * DPR canvas.style.width SCREEN_W px canvas.style.height SCREEN_H px ctx.scale(DPR, DPR)设置完成之后后续所有绘制继续使用逻辑坐标坐标体系由ctx.scale统一放大。如果漏掉这一层高分屏上图案边缘会出现明显锯齿触摸换算也会因为逻辑坐标和绘制坐标不一致而偏移。刘海屏的适配主要看safeArea字段适配项获取方式用途windowWidthwx.getSystemInfoSync().windowWidth逻辑宽度windowHeightwx.getSystemInfoSync().windowHeight逻辑高度pixelRatiowx.getSystemInfoSync().pixelRatio物理像素倍率safeAreawx.getSafeArea()避开刘海与底部横条顶部计分栏和计时器放在safeArea.top以下底部操作区放在safeArea.bottom之上。如果用户运行中切换了屏幕方向系统返回的尺寸会变化需要监听wx.onWindowResize重新读取参数并在下一次主循环里重新计算棋盘原点。5. 学习级奇葩连连看源码的改造验证与上线前检查5.1 用微信开发者工具跑通学习源码的三个动作拿到一份奇葩连连看或其他微信小游戏源码先不要急着翻代码。打开微信开发者工具新建项目时把类型选为“小游戏”这个选项和“小程序”是分开的选错后wx.createCanvas会直接报undefined。AppID可以用测试号不影响本地调试。导入后到详情面板的本地设置里勾选“不校验合法域名、web-view业务域名”。这时如果控制台还在报错优先排查game.js有没有语法错误和assets目录下的图片路径是否匹配。这三个动作能解决大多数“源码打不开”的情况。5.2 改造前自测的三个核心场景源码能跑起来不代表逻辑是对的动手改造之前建议先跑一轮自测专门覆盖棋盘生成、路径检测和数组边界这三个高频出错点自测点操作预期结果棋盘成对性连续重新开局10次剩余未消除棋子数始终为偶数路径连通构造两个相同的图案周围留出空路直线、单拐点、双拐点都能消除数组越界点击棋盘最外一格紧邻的屏幕边缘不崩溃也没有负下标警告如果成对性失败优先检查PATTERN_COUNT与棋盘总格数是否整除。如果单拐点不生效先确认拐点本身是否为0。如果边缘点击崩溃检查触摸换算里有没有在访问board之前先做范围判断。这套自测不需要额外工具打开调试模式在selectTile入口打印row和col即可。5.3 一个调试技巧把消除路径画出来连连看算法调试时最恼人的是“明明看着能连程序偏说不通”。加日志只能看到布尔结果看不到判定失败的那一段路径。比较高效的做法是在路径检测返回true时把构成路径的点按顺序存入数组再画到Canvas上// 调试模式下绘制二维路径点 function drawPath(pathPoints) { if (!pathPoints || pathPoints.length 2) return ctx.strokeStyle #ff0000 ctx.lineWidth 4 ctx.beginPath() ctx.moveTo(pathPoints[0].x, pathPoints[0].y) for (let i 1; i pathPoints.length; i) { ctx.lineTo(pathPoints[i].x, pathPoints[i].y) } ctx.stroke() }调用时机放在canConnect返回true之后把两个端点、单拐点或双拐点的坐标按实际路径顺序推入数组。看到红线和目标图案的位置关系就能立刻分辨是某段区间误判了障碍还是拐点本身被占用。发布前的最后一步是把drawPath的调用和调试配置从入口注释掉再完整跑一遍所有消除路径确认没有红色连线残留。学习用途的源码还要留意微信公众平台关于小游戏著作权登记和素材授权的要求那是提交审核时才需要核对的内容学习阶段先把代码跑通再说。本文还有配套的精品资源点击获取 微信小游戏奇葩连连看源码拆解：Canvas渲染与消除算法实战
简介这份微信小游戏源码包以“奇葩连连看”为完整示例面向微信小游戏入门与进阶开发者尤其适合想了解经典消除玩法从场景搭建、连线消除逻辑到计分与音效反馈整体实现的学习者。资源共六十五个文件压缩包约两百二十五千字节主要包含六个逻辑脚本、一个样式文件、一个页面入口以及五十六张图片素材涵盖背景、按钮、数字、水果图案和分享奖励等视觉元素便于对照代码理解纹理、动画与界面的组织方式。目前已有一千二百二十二人学习下载。通过研读核心游戏脚本可以看清画布渲染、点击判定、相同图案连线消除、倒计时与排行榜等模块的协作细节同时图片命名和目录划分也保留了原始开发习惯适合作为课程设计参考、面试作品打磨或二次改版基础。1. 微信小游戏奇葩连连看源码一份学习素材背后的三个硬知识点把一份“微信小游戏源码”下载到本地再用微信开发者工具打开很多人的第一反应是游戏怎么没跑起来真正的原因往往不在代码本身而在小游戏这个运行环境里。奇葩连连看虽然玩法简单但作为微信小游戏源码的入门素材它正好把三个最容易卡住的点凑齐了没有DOM的Canvas渲染、以二维数组为核心的棋盘算法、以及手机端的触摸坐标换算。如果你能把这几个点拆顺后面的休闲游戏基本都能举一反三。下面我从工程骨架、消除算法、真机适配三个方向把这份学习参考价值最大的地方逐层展开。2. 微信小游戏源码的工程骨架从game.js到Canvas主循环2.1 没有DOM的世界wx.createCanvas与GameGlobal拿到任何一份微信小游戏源码第一步不是读逻辑而是找入口。微信小游戏的入口固定在game.js它运行在一个没有DOM的环境里熟悉的document.getElementById、innerHTML这些API全部不存在。页面里唯一的可见区域是wx.createCanvas()创建的主画布所有按钮、棋盘、计分板都要通过Canvas 2D接口一针一针画出来。奇葩连连看的启动流程和其他休闲游戏基本一致// game.js —— 常见的入口写法 const canvas wx.createCanvas() // 主画布 const ctx canvas.getContext(2d) // 2D渲染上下文 ctx.fillRect(0, 0, canvas.width, canvas.height)画布宽高默认对应当前设备的屏幕分辨率但开发者工具里的机型模拟会影响这个值。注意wx.createCanvas()第一次调用返回主屏画布后续再调用会创建离屏画布用于缓存或特效渲染。入口代码一旦重复初始化主画布画面会出现重叠或闪烁这种问题在真机上比在开发者工具里更难排查。提示主画布的初始化只做一次后续创建的画布都是离屏画布不要重复获取。2.2 奇葩连连看源码的目录结构与config.js全局参数学习级别的微信小游戏源码通常没有复杂的构建工具链反而更适合直接阅读。常见的目录结构是game.js放在根目录核心逻辑放在js目录下图片素材放在assets里。整理一份适用于奇葩连连看的参考结构文件/目录职责备注game.js入口初始化画布和游戏循环小游戏约定名称js/config.js棋盘行列、格子大小、动画时长集中管理参数js/core/board.js棋盘生成与消除判断算法核心js/core/path.js路径检测连连看特有js/ui/render.js绘制方块、提示、队列依赖Canvas APIjs/ui/touch.js触摸事件与坐标换算决定手感config.js里的参数会直接影响棋盘的触控准确度// js/config.js —— 参数集中管理调试只改这一处 export const BOARD_COLS 10 // 列数偶数最佳保证成对图案能落盘 export const BOARD_ROWS 12 // 行数建议大于列数竖屏观感好 export const CELL_SIZE 60 // 单格边长单位px export const PATTERN_COUNT 15 // 图案种类数多则难度低少则连击难 export const ANIM_DURATION 200 // 消除动画时长单位ms这里几个参数需要一起调整。棋盘越大、图案种类越少开局越难CELL_SIZE越大点选越准但画布总宽度等于列数乘格子边长最好不要超过屏幕宽度否则两端的格子会被画出屏幕。PATTERN_COUNT还要满足整除关系否则棋盘尾部会多出无法配对的格子。把参数集中到config.js里是学习源码的第一课也是后面改动版型最小的方法。2.3 微信小游戏的主循环requestAnimationFrame与setInterval的取舍连连看类游戏对帧率不像动作游戏那么敏感但消除动画、倒计时、待机状态刷新都需要一个稳定的主循环。微信小游戏支持requestAnimationFrame它的回调参数time是页面启动以来经过的毫秒数每次回调之间的间隔会随设备帧率变化。用上一帧与当前帧的差值驱动逻辑才能避免60帧和120帧设备手感不一致// js/core/loop.js —— 主循环参考实现 let lastTime 0 function frame(time) { // delta单位是秒time来自requestAnimationFrame回调 const delta (time - lastTime) / 1000 if (delta 0.016) { // 约60FPS低端机不会空转发热 update(delta) // 更新棋盘状态与动画进度 render() // 绘制画布内容 lastTime time } requestAnimationFrame(frame) } requestAnimationFrame(frame)0.016对应每秒约60帧。有的源码直接用setInterval(update, 16)也能跑但微信小游戏切到后台时会挂起定时器回到前台后容易出现一次执行多次的跳变requestAnimationFrame会由引擎统一调度不会出现这种问题。源码学习里的主循环重点不是性能而是你能否理解delta的存在。后续做机关动画时凡是涉及位移都要用delta乘速度否则帧率一变速度就变。3. 奇葩连连看的核心算法棋盘生成、消除判定与路径检测3.1 奇葩连连看棋盘生成二维数组与Fisher-Yates洗牌奇葩连连看的“奇葩”之处通常不在玩法框架而在图案搭配、障碍分布、以及消除后的重新洗盘。数据载体是一个二维数组board[row][col]元素值为0代表空格非0值代表第几种图案。生成棋子时必须保证每种图案出现的次数是偶数否则到最后一定会剩下两个无法配对的格子。常见生成思路如下// js/core/board.js —— 棋盘初始化核心逻辑 const TOTAL BOARD_COLS * BOARD_ROWS const tiles [] // 每种图案每局出现两次先用编号铺满一维数组 for (let i 0; i TOTAL / 2; i) { const pattern i % PATTERN_COUNT tiles.push(pattern, pattern) } // Fisher-Yates洗牌从后往前遍历等概率打乱 for (let i tiles.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)) const tmp tiles[i] tiles[i] tiles[j] tiles[j] tmp } // 一维转二维之后所有判定都基于board[row][col] const board [] for (let row 0; row BOARD_ROWS; row) { const line [] for (let col 0; col BOARD_COLS; col) { line.push(tiles[row * BOARD_COLS col]) } board.push(line) }这段代码的关键是洗牌方式。Fisher-Yates从后往前遍历交换范围是0到iMath.floor(Math.random() * (i 1))生成的j永远不会大于i所以每次交换都是有效的。如果TOTAL / 2不能被PATTERN_COUNT整除数组尾部会出现几个只出现一次的图案开局就注定无法通关。生成棋盘后还应该跑一遍“当前局面是否存在可消除组合”避免玩家开局就卡死。这个检查通常复用后面要讲的路径检测函数对每个非空格子尝试与其后的同图案格子配对。棋盘尺寸与图案种类对游戏难度的影响可以参考下面这张表棋盘尺寸列×行图案种类数单次路径检测开销适合场景8×1010极低新手入门10×1215低竖屏手机12×1620中平板或横屏3.2 消除判定直线和L型转弯的判定逻辑连连看的消除规则是两个图案编号相同且可以用不超过两次转弯的折线连接折线经过的所有格子必须是空的。先看最基础的直线情况同一行或同一列中间没有遮挡即可消除。再看单拐点也就是L型路径拐点坐标只有两个候选以两个选中点为对角线的另外两个角。先判断拐点自身是否为空再分两段检查区间是否通畅// js/core/path.js —— 直线与单拐点路径检测 function isRowClear(board, row, colA, colB) { const minC Math.min(colA, colB) const maxC Math.max(colA, colB) // 从minC1到maxC-1避开两端待消除图案 for (let c minC 1; c maxC; c) { if (board[row][c] ! 0) return false } return true } function isColClear(board, col, rowA, rowB) { const minR Math.min(rowA, rowB) const maxR Math.max(rowA, rowB) for (let r minR 1; r maxR; r) { if (board[r][col] ! 0) return false } return true } function canConnect(board, r1, c1, r2, c2) { if (r1 r2 c1 c2) return false if (board[r1][c1] ! board[r2][c2]) return false // 同行或同列直线直接判断 if (r1 r2) return isRowClear(board, r1, c1, c2) if (c1 c2) return isColClear(board, c1, r1, r2) // 拐点一(r1, c2) if (board[r1][c2] 0 isRowClear(board, r1, c1, c2) isColClear(board, c2, r1, r2)) { return true } // 拐点二(r2, c1) if (board[r2][c1] 0 isRowClear(board, r2, c1, c2) isColClear(board, c1, r1, r2)) { return true } return false }判定顺序要固定先排除同一点再比较图案编号最后做区间检查。isRowClear的循环区间设计容易出错如果从minC开始遍历端点上的图案本身非空两个相邻的同图案格子永远连不上。单拐点检查同理拐点本身一旦被占用整个路径立即失效。两个拐点候选只要有一个通过就算可连否则进入下一步双拐点检测。提示区间检测必须先处理端点直接从minC扫到maxC会让相邻同图案永远消不掉。3.3 双拐点路径检测和外扩一圈的常见优化双拐点是最容易写错的部分。常见做法是枚举中间行或中间列检查三段路径是否连续为空。以枚举中间行为例预先选一个midR路径从(r1,c1)竖直到(midR,c1)横移到(midR,c2)再竖直到(r2,c2)。midR不能等于r1或r2否则就会退化成单拐点甚至直线// js/core/path.js —— 双拐点检测枚举中间行 function canConnectWithTwoTurns(board, r1, c1, r2, c2) { const rows board.length for (let midR 0; midR rows; midR) { if (midR r1 || midR r2) continue // 两个拐点本身都必须为空 if (board[midR][c1] ! 0 || board[midR][c2] ! 0) continue if (isColClear(board, c1, r1, midR) isRowClear(board, midR, c1, c2) isColClear(board, c2, midR, r2)) { return true } } return false }复杂度是O(rows乘三段路径长度之和)对10×12的棋盘足够快。如果棋盘继续扩大可以预先统计全空行只枚举这些中间行减少无效遍历。学习阶段不建议一开始就做这类优化先把三条路径的区间写对更重要。另一个容易踩的坑是只枚举了两个对角拐点就跳过了双拐点这种情况会导致棋盘角落的图案永远消不掉。边界问题也可以用一个小技巧规避在棋盘数组外围再包一层0让“棋盘外”成为合法的空路径。这样边角图案可以从棋盘外绕行所有判断统一走同一套区间扫描逻辑不需要再单独写边缘分支。4. 学习级微信小游戏源码的落地资源加载、触摸事件与屏幕适配4.1 用wx.createImage加载图案素材路径与回调参数微信小游戏里不能直接使用new Image()但提供了wx.createImage()接口回调风格和DOM里的Image对象几乎一致。奇葩连连看需要加载的图片不多常见做法是在开局前把图案批量加载全部onload之后再进入主循环避免游戏过程中出现方块闪烁或空白// js/ui/render.js —— 图案图片批量加载 const patternImages [] function loadPatterns(patternCount, baseUrl) { return new Promise((resolve) { let loaded 0 for (let i 1; i patternCount; i) { const img wx.createImage() img.onload () { patternImages[i] img loaded if (loaded patternCount) resolve() } img.onerror () { // 缺图不应阻塞主流程打印日志后继续 console.warn(pattern load failed:, i) loaded if (loaded patternCount) resolve() } img.src ${baseUrl}/${i}.png } }) }这里有两个参数细节。路径部分开发者工具里相对路径通常能跑通真机上最好使用以/开头的绝对路径资源根目录是工程根目录不是当前JS文件所在目录。回调部分onerror分支不能省只要素材文件命名不连续加载计数就永远到不了总数游戏会卡在加载界面。学习源码时可以把onerror里直接resolve的写法理解为“降级处理”进入游戏后如果取到的图片为空就画一个纯色方块兜底。4.2 触摸坐标到棋盘格子的换算一个公式决定手感微信小游戏的触摸事件有两个层级全局的wx.onTouchStart和画布上的touchstart事件。如果项目里只有一个主画布两种写法都能用但坐标来源都要统一用e.touches[0]里的clientX和clientY。换算公式看上去简单差一个取整函数手感就完全不同// js/ui/touch.js —— 触摸点换算为棋盘坐标 const BOARD_LEFT 20 // 棋盘左边距 const BOARD_TOP 120 // 棋盘上边距顶部预留计分栏 function handleTouch(e) { const touch e.touches[0] // 先减去棋盘原点再除以格子边长 const col Math.floor((touch.clientX - BOARD_LEFT) / CELL_SIZE) const row Math.floor((touch.clientY - BOARD_TOP) / CELL_SIZE) // 越界直接返回避免负下标访问 if (row 0 || row BOARD_ROWS || col 0 || col BOARD_COLS) return selectTile(row, col) }Math.floor会把0.9格强制归为当前格Math.round则会把0.5以上的偏差推给下一格。触摸误判大多不是算法问题而是这里用了四舍五入。BOARD_LEFT和BOARD_TOP如果写死需要保证棋盘在画布中的位置不变一旦做了居中适配就要动态计算例如BOARD_LEFT (canvas.width - BOARD_COLS * CELL_SIZE) / 2。真机上建议把这两个值放进config.js和棋盘参数放一起调整时会容易很多。提示把棋盘原点放进config.js换机型调试时可以少改很多代码。4.3 真机适配参数pixelRatio与safeArea学习源码最容易在真机上暴露两个问题画质发虚和刘海屏遮挡。画质发虚的原因是画布物理尺寸没有跟随设备的像素倍率只用了CSS像素尺寸。小游戏开发里画布尺寸需要手动乘pixelRatio再用ctx.scale恢复逻辑坐标系// js/config.js —— 真机参数初始化 const info wx.getSystemInfoSync() export const SCREEN_W info.windowWidth export const SCREEN_H info.windowHeight export const DPR info.pixelRatio || 2 // 创建画布时按DPR设置物理尺寸 const canvas wx.createCanvas() canvas.width SCREEN_W * DPR canvas.height SCREEN_H * DPR canvas.style.width SCREEN_W px canvas.style.height SCREEN_H px ctx.scale(DPR, DPR)设置完成之后后续所有绘制继续使用逻辑坐标坐标体系由ctx.scale统一放大。如果漏掉这一层高分屏上图案边缘会出现明显锯齿触摸换算也会因为逻辑坐标和绘制坐标不一致而偏移。刘海屏的适配主要看safeArea字段适配项获取方式用途windowWidthwx.getSystemInfoSync().windowWidth逻辑宽度windowHeightwx.getSystemInfoSync().windowHeight逻辑高度pixelRatiowx.getSystemInfoSync().pixelRatio物理像素倍率safeAreawx.getSafeArea()避开刘海与底部横条顶部计分栏和计时器放在safeArea.top以下底部操作区放在safeArea.bottom之上。如果用户运行中切换了屏幕方向系统返回的尺寸会变化需要监听wx.onWindowResize重新读取参数并在下一次主循环里重新计算棋盘原点。5. 学习级奇葩连连看源码的改造验证与上线前检查5.1 用微信开发者工具跑通学习源码的三个动作拿到一份奇葩连连看或其他微信小游戏源码先不要急着翻代码。打开微信开发者工具新建项目时把类型选为“小游戏”这个选项和“小程序”是分开的选错后wx.createCanvas会直接报undefined。AppID可以用测试号不影响本地调试。导入后到详情面板的本地设置里勾选“不校验合法域名、web-view业务域名”。这时如果控制台还在报错优先排查game.js有没有语法错误和assets目录下的图片路径是否匹配。这三个动作能解决大多数“源码打不开”的情况。5.2 改造前自测的三个核心场景源码能跑起来不代表逻辑是对的动手改造之前建议先跑一轮自测专门覆盖棋盘生成、路径检测和数组边界这三个高频出错点自测点操作预期结果棋盘成对性连续重新开局10次剩余未消除棋子数始终为偶数路径连通构造两个相同的图案周围留出空路直线、单拐点、双拐点都能消除数组越界点击棋盘最外一格紧邻的屏幕边缘不崩溃也没有负下标警告如果成对性失败优先检查PATTERN_COUNT与棋盘总格数是否整除。如果单拐点不生效先确认拐点本身是否为0。如果边缘点击崩溃检查触摸换算里有没有在访问board之前先做范围判断。这套自测不需要额外工具打开调试模式在selectTile入口打印row和col即可。5.3 一个调试技巧把消除路径画出来连连看算法调试时最恼人的是“明明看着能连程序偏说不通”。加日志只能看到布尔结果看不到判定失败的那一段路径。比较高效的做法是在路径检测返回true时把构成路径的点按顺序存入数组再画到Canvas上// 调试模式下绘制二维路径点 function drawPath(pathPoints) { if (!pathPoints || pathPoints.length 2) return ctx.strokeStyle #ff0000 ctx.lineWidth 4 ctx.beginPath() ctx.moveTo(pathPoints[0].x, pathPoints[0].y) for (let i 1; i pathPoints.length; i) { ctx.lineTo(pathPoints[i].x, pathPoints[i].y) } ctx.stroke() }调用时机放在canConnect返回true之后把两个端点、单拐点或双拐点的坐标按实际路径顺序推入数组。看到红线和目标图案的位置关系就能立刻分辨是某段区间误判了障碍还是拐点本身被占用。发布前的最后一步是把drawPath的调用和调试配置从入口注释掉再完整跑一遍所有消除路径确认没有红色连线残留。学习用途的源码还要留意微信公众平台关于小游戏著作权登记和素材授权的要求那是提交审核时才需要核对的内容学习阶段先把代码跑通再说。本文还有配套的精品资源点击获取