彩色消除是一款规则非常直观的小游戏棋盘上排列着若干种颜色的色块点击一个色块程序会找出与它相邻且颜色相同的所有色块只要数量达到两个或以上就把这一组色块从棋盘上消掉上方色块依次下落顶部补充新的随机色块玩家则在限定时间内尽量消除更多色块、拿更高分数。这类玩法在很多休闲游戏里都能看到但它非常适合用来入门微信小程序开发因为它不依赖后端服务不涉及支付、推送等复杂能力核心就是一个二维数组的渲染和一套连通块查找算法。下面从创建项目讲起完成一个可运行的彩色消除小游戏并覆盖计分、倒计时、最高分持久化、真机调试和生产发布的关键问题。需要先说明文章实现的是一个运行在微信小程序里的游戏型应用使用常规小程序技术栈也就是 WXML、WXSS 和 JavaScript并不是微信官方“小游戏Mini Game”分类对应的 Canvas 游戏适配器工程。两者的工程结构和发布类目不一样但游戏规则、坐标计算和状态管理思路是相通的。正式发布时以微信公众平台给出的类目和后台提示为准。1. 先拆玩法再选技术方案1.1 把游戏规则拆成可实现的模块写代码之前先把玩法翻译成计算机能处理的状态和操作。彩色消除包含以下几个核心模块棋盘数据一张二维数组每个格子保存一个颜色值例如#e74c3c。画棋盘把二维数组渲染成页面上的网格色块。点击选块拿到玩家点击的格子的行列坐标。连通块查找从点击的格子出发找出所有相邻且颜色相同的格子。消除与计分把连通块对应格子置空并根据消除数量加分。重力下落每一列从下往上重新排列空位由顶部新色块补齐。倒计时与结束限定总时长归零后弹出结果并支持重新开始。最高分持久化用本地缓存保存历史最高分。其中最关键的是连通块查找和重力下落。前者决定“该消哪些块”后者决定“消完之后棋盘怎么变化”。这两个模块想清楚整个游戏的核心逻辑就完成了一大半。1.2 原生小程序、uniapp、游戏引擎怎么选实现同样一个网格消除玩法有几种常见技术路线。选型时要先判断项目规模8 乘 8 的静态网格、简单点击交互、不追求复杂粒子特效原生小程序完全够用。方案适用场景优点需要关注的问题原生小程序网格消除、工具页面、轻量休闲玩法开发者工具直接调试包体积小API 调用最直接只服务微信生态无法直接跑到支付宝、抖音等其他小程序uniapp需要同时输出 H5、App、多个小程序一套 Vue 代码多端复用原生能力需要条件编译调试链路多一层工具中切换小程序 ID 时偶尔会出现配置不刷新的情况Cocos 等游戏引擎粒子特效、物理碰撞、复杂战斗场景Canvas/WebGL 渲染动画和性能上限高学习成本高包体积大网格消除场景属于大材小用这个项目选择原生小程序还有一个原因是微信开发者工具对原生 WXML 的调试最直接点击事件的日志、页面结构、样式问题都能在工具里快速定位。等以后要做重渲染、大场景、复杂动画的休闲游戏再切换到小游戏分类和游戏引擎也不迟。2. 初始化项目先用开发者工具跑通空页面2.1 准备工具和 AppID开发微信小程序需要三个前置条件安装微信开发者工具使用最新稳定版即可。注册小程序账号并拿到 AppID如果只是本地学习可以在创建项目时选择测试号不需要注册。准备基础的前端知识不要求 React 或 Vue 经验但至少要能看懂 JavaScript 对象、数组和函数。创建项目时选择“JavaScript - 基础模板”不使用云开发模板。本项目不依赖云服务也不需要在 app.js 里初始化云环境。AppID 的选择会影响后续真机预览和上传测试号只能在开发者工具里体验正式发布必须换成正式小程序的 AppID。2.2 目录结构四类文件各管什么事一个原生小程序页面由四类文件组成分别是 JS 逻辑文件、WXML 结构文件、WXSS 样式文件和 JSON 配置文件。本项目只有一个游戏页面目录结构如下miniprogram/ ├── app.js ├── app.json ├── app.wxss ├── sitemap.json └── pages/ └── game/ ├── game.js ├── game.json ├── game.wxml └── game.wxssapp.js是小程序入口负责 App 生命周期。app.json是全局配置注册页面、配置顶部导航栏和窗口样式。app.wxss是全局样式文件可以放所有页面都会用到的公共样式。pages/game/game.js是页面逻辑棋盘数据、消除算法、计时器都写在这里。pages/game/game.wxml是页面结构负责渲染棋盘。pages/game/game.wxss是页面样式负责棋盘布局和色块外观。pages/game/game.json是页面级别的配置可以覆盖app.json里的窗口配置。因为只有一页项目结构很简洁。如果以后增加开始页、设置页或关卡页再往pages目录下加文件夹并在app.json的pages数组里注册。2.3 先配置 app.json再写页面app.json是小程序最先读取的配置文件pages 数组里的第一项就是启动页。下面是本项目使用的全局配置{ pages: [ pages/game/game ], window: { navigationBarTitleText: 彩色消除, navigationBarBackgroundColor: #16213e, navigationBarTextStyle: white, backgroundColor: #1a1a2e, backgroundTextStyle: light }, sitemapLocation: sitemap.json }关键字段的含义pages页面路径数组第一项是启动页。navigationBarTitleText顶部导航栏标题。navigationBarBackgroundColor导航栏背景色这里选深色以便和棋盘主题统一。navigationBarTextStyle导航栏文字颜色深色背景下使用white。backgroundColor和backgroundTextStyle窗口下拉时的背景色和样式。game.json可以针对单页覆盖全局配置保持默认即可也可以只保留标题配置{ navigationBarTitleText: 彩色消除 }sitemap.json是微信索引配置使用默认允许即可{ rules: [ { action: allow, page: * } ] }app.js保持最小启动逻辑App({ onLaunch() { // 本项目暂未接入登录和远程接口保留空实现 } });到这里工具里应该已经出现一个能启动的空白页面。接下来把棋盘渲染出来。3. 用 WXML 和 WXSS 渲染 8 乘 8 彩色棋盘3.1 二维数组与双层 wx:for 的映射关系游戏棋盘本质是一个二维数组。这个项目使用 8 行 8 列颜色从 5 种色值中随机
微信小程序实战：从零开发彩色消除小游戏
彩色消除是一款规则非常直观的小游戏棋盘上排列着若干种颜色的色块点击一个色块程序会找出与它相邻且颜色相同的所有色块只要数量达到两个或以上就把这一组色块从棋盘上消掉上方色块依次下落顶部补充新的随机色块玩家则在限定时间内尽量消除更多色块、拿更高分数。这类玩法在很多休闲游戏里都能看到但它非常适合用来入门微信小程序开发因为它不依赖后端服务不涉及支付、推送等复杂能力核心就是一个二维数组的渲染和一套连通块查找算法。下面从创建项目讲起完成一个可运行的彩色消除小游戏并覆盖计分、倒计时、最高分持久化、真机调试和生产发布的关键问题。需要先说明文章实现的是一个运行在微信小程序里的游戏型应用使用常规小程序技术栈也就是 WXML、WXSS 和 JavaScript并不是微信官方“小游戏Mini Game”分类对应的 Canvas 游戏适配器工程。两者的工程结构和发布类目不一样但游戏规则、坐标计算和状态管理思路是相通的。正式发布时以微信公众平台给出的类目和后台提示为准。1. 先拆玩法再选技术方案1.1 把游戏规则拆成可实现的模块写代码之前先把玩法翻译成计算机能处理的状态和操作。彩色消除包含以下几个核心模块棋盘数据一张二维数组每个格子保存一个颜色值例如#e74c3c。画棋盘把二维数组渲染成页面上的网格色块。点击选块拿到玩家点击的格子的行列坐标。连通块查找从点击的格子出发找出所有相邻且颜色相同的格子。消除与计分把连通块对应格子置空并根据消除数量加分。重力下落每一列从下往上重新排列空位由顶部新色块补齐。倒计时与结束限定总时长归零后弹出结果并支持重新开始。最高分持久化用本地缓存保存历史最高分。其中最关键的是连通块查找和重力下落。前者决定“该消哪些块”后者决定“消完之后棋盘怎么变化”。这两个模块想清楚整个游戏的核心逻辑就完成了一大半。1.2 原生小程序、uniapp、游戏引擎怎么选实现同样一个网格消除玩法有几种常见技术路线。选型时要先判断项目规模8 乘 8 的静态网格、简单点击交互、不追求复杂粒子特效原生小程序完全够用。方案适用场景优点需要关注的问题原生小程序网格消除、工具页面、轻量休闲玩法开发者工具直接调试包体积小API 调用最直接只服务微信生态无法直接跑到支付宝、抖音等其他小程序uniapp需要同时输出 H5、App、多个小程序一套 Vue 代码多端复用原生能力需要条件编译调试链路多一层工具中切换小程序 ID 时偶尔会出现配置不刷新的情况Cocos 等游戏引擎粒子特效、物理碰撞、复杂战斗场景Canvas/WebGL 渲染动画和性能上限高学习成本高包体积大网格消除场景属于大材小用这个项目选择原生小程序还有一个原因是微信开发者工具对原生 WXML 的调试最直接点击事件的日志、页面结构、样式问题都能在工具里快速定位。等以后要做重渲染、大场景、复杂动画的休闲游戏再切换到小游戏分类和游戏引擎也不迟。2. 初始化项目先用开发者工具跑通空页面2.1 准备工具和 AppID开发微信小程序需要三个前置条件安装微信开发者工具使用最新稳定版即可。注册小程序账号并拿到 AppID如果只是本地学习可以在创建项目时选择测试号不需要注册。准备基础的前端知识不要求 React 或 Vue 经验但至少要能看懂 JavaScript 对象、数组和函数。创建项目时选择“JavaScript - 基础模板”不使用云开发模板。本项目不依赖云服务也不需要在 app.js 里初始化云环境。AppID 的选择会影响后续真机预览和上传测试号只能在开发者工具里体验正式发布必须换成正式小程序的 AppID。2.2 目录结构四类文件各管什么事一个原生小程序页面由四类文件组成分别是 JS 逻辑文件、WXML 结构文件、WXSS 样式文件和 JSON 配置文件。本项目只有一个游戏页面目录结构如下miniprogram/ ├── app.js ├── app.json ├── app.wxss ├── sitemap.json └── pages/ └── game/ ├── game.js ├── game.json ├── game.wxml └── game.wxssapp.js是小程序入口负责 App 生命周期。app.json是全局配置注册页面、配置顶部导航栏和窗口样式。app.wxss是全局样式文件可以放所有页面都会用到的公共样式。pages/game/game.js是页面逻辑棋盘数据、消除算法、计时器都写在这里。pages/game/game.wxml是页面结构负责渲染棋盘。pages/game/game.wxss是页面样式负责棋盘布局和色块外观。pages/game/game.json是页面级别的配置可以覆盖app.json里的窗口配置。因为只有一页项目结构很简洁。如果以后增加开始页、设置页或关卡页再往pages目录下加文件夹并在app.json的pages数组里注册。2.3 先配置 app.json再写页面app.json是小程序最先读取的配置文件pages 数组里的第一项就是启动页。下面是本项目使用的全局配置{ pages: [ pages/game/game ], window: { navigationBarTitleText: 彩色消除, navigationBarBackgroundColor: #16213e, navigationBarTextStyle: white, backgroundColor: #1a1a2e, backgroundTextStyle: light }, sitemapLocation: sitemap.json }关键字段的含义pages页面路径数组第一项是启动页。navigationBarTitleText顶部导航栏标题。navigationBarBackgroundColor导航栏背景色这里选深色以便和棋盘主题统一。navigationBarTextStyle导航栏文字颜色深色背景下使用white。backgroundColor和backgroundTextStyle窗口下拉时的背景色和样式。game.json可以针对单页覆盖全局配置保持默认即可也可以只保留标题配置{ navigationBarTitleText: 彩色消除 }sitemap.json是微信索引配置使用默认允许即可{ rules: [ { action: allow, page: * } ] }app.js保持最小启动逻辑App({ onLaunch() { // 本项目暂未接入登录和远程接口保留空实现 } });到这里工具里应该已经出现一个能启动的空白页面。接下来把棋盘渲染出来。3. 用 WXML 和 WXSS 渲染 8 乘 8 彩色棋盘3.1 二维数组与双层 wx:for 的映射关系游戏棋盘本质是一个二维数组。这个项目使用 8 行 8 列颜色从 5 种色值中随机
