简介这是一份微信小程序版本的俄罗斯方块游戏完整项目源码适合刚接触小程序开发或想重温经典游戏实现逻辑的初学者参考。项目按微信小程序标准工程结构组织包含页面配置、逻辑处理、样式与静态资源等模块可帮助读者快速理解小程序从全局配置到页面渲染的完整流程。压缩包共13个文件涵盖5个json配置、4个js逻辑、2个wxss样式、1个wxml页面及1个md说明文档整体仅8KB结构精简便于逐文件阅读。官方数据显示已有1178人学习/下载具有不错的参考热度。通过这份源码读者可以对照学习小程序的目录规范、游戏循环与方块碰撞检测思路也可直接导入微信开发者工具运行体验对于想练习小程序项目实战或研究小游戏基础写法的开发者来说是一个轻量且完整的入门范例。1. 俄罗斯方块游戏微信小程序源码拆分算法、渲染与交互用微信小程序复刻一个俄罗斯方块是很多前端朋友练手的第一步。但网上能找到的俄罗斯方块游戏微信小程序项目源码大多只给你一套能跑的页面核心逻辑藏在几个文件里改起来很费劲。我的看法是这类源码的价值不在“能玩”而在它怎么处理三件事——数据模型、碰撞检测、渲染与交互。尤其在小程序的双线程模型里setData一多就会掉帧canvas用不对就会模糊。下面的内容会按一个小型可运行项目的结构拆开讲清楚每个模块怎么设计与实现让你拿到源码后能改、能调、能发布。适合刚学完小程序基础、想做一个偏游戏方向项目的开发者也适合想从页面开发转向游戏逻辑的人。2. 俄罗斯方块核心算法在微信小程序中的实现2.1 游戏区数据模型用二维数组表示10x20网格俄罗斯方块的标准游戏区是10列、20行。在微信小程序的源码里最常见的表示方式是二维数组board[20][10]每个元素保存0空格或颜色标识字符串。用字符串而不是数字的好处是渲染时直接把它作为canvas的fillStyle值不需要额外映射。当然也可以存数字索引再在绘制时查表但那样每帧多一次查找代码也更绕。const ROWS 20; const COLS 10; class GameState { constructor() { // board 20 x 10 的二维数组0 表示空格 this.board Array.from({ length: ROWS }, () Array(COLS).fill(0)); this.score 0; this.level 1; this.activePiece null; // 当前正在下落的方块 this.nextPiece null; // 下一个预览方块 this.gameOver false; } }数组的row编号从0顶部到19底部这样渲染时直接按行遍历与屏幕坐标一一对应。如果某个需求需要隐藏输入延迟常见做法是把可视区扩展到22行头部两行作为活动区外缓冲但碰撞检测的边界也要跟着调。把行数定义为常量而不是硬编码是因为不同小型主题的难度区间不一样比如20行是标准22行时初始速度可以更快。注意不要在构造函数里直接把board塞进Page.data后续每帧更新时整个数组重新赋值即可小程序的setData会做diff但10x20的数组diff成本不高。2.2 七种方块的形状与颜色定义七种标准方块I、O、T、S、Z、J、L源码里一般用一个对象保存矩阵。矩阵里1表示有格子0表示空。这里用4x4或3x3的方形矩阵而不是直接记录坐标偏移是为了让旋转操作简单——只需要对矩阵做转置和翻转。const SHAPES { I: [ [0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0] ], O: [ [1, 1], [1, 1] ], T: [ [0, 1, 0], [1, 1, 1], [0, 0, 0] ], S: [ [0, 1, 1], [1, 1, 0], [0, 0, 0] ], Z: [ [1, 1, 0], [0, 1, 1], [0, 0, 0] ], J: [ [1, 0, 0], [1, 1, 1], [0, 0, 0] ], L: [ [0, 0, 1], [1, 1, 1], [0, 0, 0] ] }; const COLORS { I: #00bcd4, O: #ffeb3b, T: #9c27b0, S: #4caf50, Z: #f44336, J: #2196f3, L: #ff9800 };代码里的1只是占位标记真正写入board的是COLORS对应的颜色字符串。做这个替换时要注意board里保存颜色值时判断“是否有方块”要用if (board[r][c])而不是if (board[r][c] 1)否则后续消行判断会失效。O方块使用2x2矩阵因为它在旋转时完全不变最省事。I方块为什么用4x4因为3x3矩阵在旋转时中心偏移明显踢墙次数会变多体验差。方块矩阵尺寸颜色值旋转后是否需要踢墙I4x4#00bcd4需要O2x2#ffeb3b不需要T3x3#9c27b0需要S3x3#4caf50需要Z3x3#f44336需要J3x3#2196f3需要L3x3#ff9800需要生成新方块的代码通常从SHAPES里随机取一个键并随机给一个起始列坐标。为了让方块在顶部正中出现初始x要设为Math.floor((COLS - shape[0].length) / 2)。如果生成后立即检测碰撞失败说明游戏结束。这个逻辑必须在主循环开始前验证一次否则会出现开局即死亡却看不到任何提示的诡异状态。2.3 碰撞检测与消行逻辑碰撞检测是所有动作的前置判断。移动、旋转、下落之前都要先问一句目标位置是否合法常见做法是写一个独立的canMove函数接收board、方块矩阵和目标坐标。function canMove(board, shape, offsetX, offsetY) { const rows shape.length; const cols shape[0].length; for (let r 0; r rows; r) { for (let c 0; c cols; c) { if (!shape[r][c]) continue; const newX offsetX c; const newY offsetY r; // 超出左右边界或超出底部 if (newX 0 || newX COLS || newY ROWS) return false; // 跳过顶部负行避免数组越界 if (newY 0 board[newY][newX]) return false; } } return true; }参数offsetX、offsetY表示方块矩阵左上角在board坐标系中的位置。注意newY为负数时方块还没完全进入可视区gameover后的顶出判定往往依赖这个边界情况如果生成新方块时canMove返回false直接设置游戏结束。判断board里已有值时因为board存的是颜色字符串所以直接用if (board[newY][newX])不要和1比较。消行逻辑也在这个模块里。从底部向上扫描遇到满行就splice删除并在数组头部插入空行。这样处理比遍历重排整个board快而且代码意图清楚。function clearRows(board) { let cleared 0; let row ROWS - 1; while (row 0) { const full board[row].every(cell cell ! 0); if (full) { board.splice(row, 1); board.unshift(Array(COLS).fill(0)); cleared; // 删除后新的一行落到当前位置继续检查 } else { row--; } } return cleared; }clearRows返回消行数量调用方根据数量加分数1行1002行3003行5004行800这是俄罗斯方块通用的计分曲线。splice/unshift在小程序里性能表现尚可因为每局最多20个元素不会造成卡顿。但要注意必须在所有方块下落并固定之后再消行不能在移动过程中调用否则会破坏后续碰撞判断的数据一致性。提示消行后要同步重置activePiece为null并在下一帧绘制前用nextPiece生成新方块否则预览区与实际下落的方块会不一致。2.4 方块旋转矩阵旋转与简化踢墙旋转在浏览器里可以用canvas的rotate但在逻辑层还是要老老实实改矩阵。标准做法是把矩阵顺时针旋转90度先转置再水平翻转。代码里不依赖canvas纯数据操作方便做单元测试。function rotate(shape) { const rows shape.length; const cols shape[0].length; const rotated Array.from({ length: cols }, () Array(rows).fill(0)); for (let r 0; r rows; r) { for (let c 0; c cols; c) { rotated[c][rows - 1 - r] shape[r][c]; } } return rotated; }但旋转后经常出现的问题是要旋转的位置被墙或已有方块挡住。完整SRSSuper Rotation System会维护一张状态-偏移表对每个方块的不同旋转状态提供踢墙候选位置。在微信小程序这种小型项目里我一般用简化表const KICKS [ [0, 0], [-1, 0], [1, 0], [0, -1], [-2, 0], [2, 0] ];旋转时依次尝试这些偏移量第一个canMove成功的位置就是最终位置。偏移量是[x, y]负数表示向左或向上。这里没有加入向下偏移因为普通旋转不会主动下沉如果需要顶地旋转可以补充[0,1]。真正的SRS还会区分J、L、T与I、S、Z的不同踢墙规则但在大众操作下简化表已经够用而且出错的概率低。真机调手感时把[-2,0]和[2,0]去掉会让贴墙旋转更保守你可以在项目源码里用配置开关控制。3. 项目源码关键模块canvas渲染、触控与主循环3.1 渲染方案选型canvas 2D还是WXML网格很多小程序新手会用view组件嵌套渲染每个格子然后通过wx:for绑定颜色。这样做在小屏幕上有两个问题一是节点太多20x10等于200个view加上阴影和边框在低端机上会卡二是每次下落都要更新一大片节点setData传输的数据结构很大容易触发 “Data field size exceeds limit” 警告。所以我推荐canvas 2D它把每帧的绘制放在原生CanvasContext里不经过WXML渲染管线性能稳定得多。方案帧率表现setData负载绘制复杂度推荐度WXML view 网格中等高每帧大量节点更新低不推荐canvas 2D高低几乎为零中推荐WebGL最高无高项目复杂度高时不推荐这里说的canvas 2D是指新版type2d接口不是旧的wx.createCanvasContext。新版canvas获取节点的方式和Web标准更接近绘制指令可以复用。如果你的项目源码还在用旧API建议尽快迁移因为新API对基础库版本要求并不高真机兼容性也更好。3.2 初始化canvas 2D并绘制游戏区在WXML里定义canvas时要显式写上type2d否则获取不到node节点canvas type2d idgameCanvas stylewidth: 300px; height: 600px;/canvas然后在onReady里进行初始化onReady() { const query wx.createSelectorQuery(); query.select(#gameCanvas).fields({ node: true, size: true }).exec((res) { if (!res || !res[0]) return; const canvas res[0].node; const ctx canvas.getContext(2d); const info wx.getWindowInfo(); const dpr info.pixelRatio; canvas.width res[0].width * dpr; canvas.height res[0].height * dpr; ctx.scale(dpr, dpr); this.canvas canvas; this.ctx ctx; this.cellSize res[0].height / ROWS; this.startLoop(); }); }这里的关键参数是dprpixelRatio。如果不乘dprcanvas的像素尺寸等于CSS尺寸在Retina屏上所有格子都会发虚。调用ctx.scale(dpr, dpr)之后后续所有坐标都可以按CSS像素来写。cellSize是每个格子的像素边长它由canvas显示高度除以ROWS得到这样不管屏幕多宽格子都能占满高度。如果想要左右更宽可以用canvas的actual width / COLS但游戏区高度不能超出可视范围。注意基础库版本低于2.9.0时type2d的canvas不可用需要在app.json中检查libVersion或代码里做低版本降级。绘制代码是典型的双重循环。每次先清空整块画布再把board数组里非0的格子依次填充最后单独绘制当前下落方块的轮廓function drawBoard(ctx, cellSize) { const board this.gameState.board; const width COLS * cellSize; const height ROWS * cellSize; ctx.clearRect(0, 0, width, height); // 绘制背景网格 ctx.strokeStyle #263238; ctx.lineWidth 0.5; for (let i 0; i COLS; i) { ctx.beginPath(); ctx.moveTo(i * cellSize, 0); ctx.lineTo(i * cellSize, height); ctx.stroke(); } // 绘制已固定的方块 for (let r 0; r ROWS; r) { for (let c 0; c COLS; c) { const color board[r][c]; if (color) { ctx.fillStyle color; ctx.fillRect(c * cellSize 0.5, r * cellSize 0.5, cellSize - 1, cellSize - 1); } } } // 绘制当前活动方块 if (this.gameState.activePiece) { const piece this.gameState.activePiece; const shape piece.shape; for (let r 0; r shape.length; r) { for (let c 0; c shape[0].length; c) { if (shape[r][c]) { ctx.fillStyle piece.color; ctx.fillRect((piece.x c) * cellSize 0.5, (piece.y r) * cellSize 0.5, cellSize - 1, cellSize - 1); } } } } }board里保存的是颜色字符串所以fillStyle直接用board[r][c]即可省去一次索引映射。绘制时给格子留1px的间隙视觉上每一格有分隔不会糊成整块色板。如果你想要豪华一点的质感可以在这里加阴影或圆角但要注意fillRect比roundRect性能好低端机上不要用带圆角的绘制。3.3 手势控制滑动、点击、旋转和硬降没有键盘的小程序需要把按钮和手势都做在屏幕上。经典布局是底部四个虚拟按钮但更好的交互是触摸整个游戏区。常见做法是在canvas区域绑定touchstart和touchend通过触摸点的变化判断操作短按左侧左移一格短按右侧右移一格向左滑动左移连续向右滑动右移连续向下滑动超过30像素硬降到底其他滑动旋转代码实现如下onTouchStart(e) { const t e.touches[0]; this.touchStart { x: t.clientX, y: t.clientY, time: Date.now() }; }, onTouchEnd(e) { const t e.changedTouches[0]; const dx t.clientX - this.touchStart.x; const dy t.clientY - this.touchStart.y; const half this.canvasWidth / 2; if (Math.abs(dx) 8 Math.abs(dy) 8) { // 短按视为点击按位置分左右 if (t.clientX half) this.moveLeft(); else this.moveRight(); return; } if (Math.abs(dx) Math.abs(dy)) { if (dx 0) this.moveRight(); else this.moveLeft(); } else { if (dy 30) this.hardDrop(); else this.rotatePiece(); } }这里的阈值8表示像素误差避免手指轻微抖动被误判成滑动。dy30是硬降的触发距离太短容易把旋转误触成硬降太长又会觉得不跟手一般设置在20到40之间。逻辑上先判点击、再判水平/垂直是因为用户操作意图的优先级不同点击频率最高滑动其次旋转和硬降放在最后。如果你偏好虚拟按钮可以在下方放四个按钮并绑定bindtap方法方法内部直接调用moveLeft、moveRight、hardDrop、rotatePiece。两种方案可以共存但要注意同一帧内不能同时触发多个动作否则会出现瞬移两格的bug。3.4 主循环与等级速度控制游戏主循环决定方块多久下落一格。setInterval看起来方便但微信小程序在页面切入后台时会挂起timer回前台后又继续容易造成时间跳跃。我习惯用setTimeout链式调用在每次tick之后重新计算下一次间隔这样等级变化可以立刻生效startLoop() { this.loopTimer setTimeout(() this.tick(), this.getFallInterval()); }, getFallInterval() { // 每升一级加快80ms最低100ms const interval 1000 - (this.data.level - 1) * 80; return Math.max(100, interval); }, tick() { if (this.gameState.gameOver) return; const moved this.moveDown(); if (!moved) { this.freezePiece(); this.clearLines(); this.spawnPiece(); } this.draw(); this.startLoop(); }getFallInterval里的1000是初始间隔level从1算起。level 5时是680mslevel 10时是280mslevel 12以后就锁定在100ms因为100ms已经接近人类手速极限继续提速只会增加挫败感。startLoop在onReady初始化后调用每次tick结束再排下一次。注意在onUnload中要clearTimeout否则页面销毁后timer仍然触发会报 “Cannot read property draw of undefined”。moveDown返回false说明无法继续下落这时要把当前方块写入board、消行、生成新方块。整个逻辑链都是同步的不会出现渲染与数据不同步的问题。开发者工具里可以看到这些状态变更都发生在一次setTimeout回调内便于打断点调试。4. 微信小程序俄罗斯方块的适配技巧与常见坑4.1 根据屏幕尺寸动态计算游戏区大小不同手机的宽高比差异很大iPhone的长屏和iPad的方屏如果写死canvas尺寸会出现大片留白或溢出。常见做法是取屏幕高度乘以得到一个游戏区高度比如0.8然后列数不变每个格子大小按高度均分。对于横向宽度大于260px的情况可以用canvas的实际宽度反推列宽但最多不超过20行高度。动态计算要放在onReady里不能放在globalData中因为SelectorQuery的size是异步返回的。const info wx.getWindowInfo(); const safeHeight info.windowHeight * 0.8; const cellSize Math.floor(safeHeight / ROWS); const canvasWidth cellSize * COLS; const canvasHeight cellSize * ROWS;这里没有用safe-area的bottom因为canvas游戏区一般在屏幕中部底部留给控制按钮。少数全面屏手机需要适配右侧Home indicator可以把canvas宽度设为Math.min(canvasWidth, info.windowWidth - 20)。4.2 用离屏canvas缓存方块减少重复绘制每帧清空画布并重新绘制200个格子在低端机上仍有一定开销。一个很实用的优化是预先用离屏canvas绘制好每个方块的色块主canvas绘制时用drawImage把色块贴上去。离屏canvas的创建方式与普通canvas相同但不需要插入到页面function createBlockSprite(color, size) { const offCanvas wx.createOffscreenCanvas({ type: 2d, width: size, height: size }); const offCtx offCanvas.getContext(2d); offCtx.fillStyle color; offCtx.fillRect(0, 0, size, size); offCtx.strokeStyle #1a1a2e; offCtx.lineWidth 1; offCtx.strokeRect(0, 0, size, size); return offCanvas; }drawImage的性能比fillRect高因为不需要重复走路径光栅化只需把位图拷贝到画布。这个技巧对大量重复的俄罗斯方块尤其有效。注意wx.createOffscreenCanvas是基础库2.16.1之后的接口老项目可以使用wx.createCanvas()再隐藏节点。4.3 在开发者工具里验证核心算法俄罗斯方块的逻辑是纯数据变换非常适合在微信开发者工具的Console里直接跑单元测试。你可以把canMove、rotate、clearRows这些函数挂在module.exports上然后在项目的test目录里写一个简单的断言。不一定要引入完整的测试框架三个核心用例就够了贴墙旋转成功、底部碰撞返回false、四行一起消除。这个验证步骤很多新手会跳过最后真机出现方块穿越墙壁结果发现是旋转时忘记确认canMove。4.4 保存最高分到本地缓存并恢复对局项目源码里常见的高分逻辑是每次游戏结束时比较当前分数和wx.getStorageSync(tetris_best)如果更高就重新写入。继续游戏时从storage读回bestScore并显示在界面上。为了避免游戏中途用户切后台导致数据丢失最好在得分变化时也同步写一次storage而不是只在onUnload里写。写入操作频率不高对性能没有影响。function saveScore(score) { const best wx.getStorageSync(tetris_best) || 0; if (score best) { wx.setStorageSync(tetris_best, score); } }以上就是一个俄罗斯方块游戏微信小程序项目源码从算法到渲染再到适配的核心做法。最后留一个可执行的检查项打开开发者工具的真机调试连续快速点击旋转按钮观察方块是否出现瞬移或穿越如果没有说明你的碰撞检测和踢墙逻辑是可靠的。本文还有配套的精品资源点击获取
