使用uniapp开发实现开心消消乐游戏并发布到微信小程序

首先展示效果图：

下面附赠github地址：GitHub - taojiajie0605/uni-crush-tjj: uniapp实现简易版消消乐游戏

游戏规则介绍：

每次点击交换两个图，如果是三个一样的则消除，上方的方块向下填充，如果没有消除的则恢复原来的位置；其中如果是4个消除的，消除同时产生一个消除球，消除球有两种功能（一种是点击消除周围9个，第二种是点击消除一列），如果消除的是5个，在消除的同时产生一个爆炸球，爆炸球在交换点击别的种类动物时会消除全图的改种类动物。其中如果爆炸球遇到消除球，那么全图该种类的动物都会执行消除球的效果，即全图该种类的动物都会消除一列或者周围9个。

下面就是游戏具体实现：

1、首先实现9*9的方块，以及动物种类随机生成方法的封装

下面是在onLoad方法里通过随机数方法selectFrom实现初步9*9的动物

        onLoad() {
			// 生成动物，第几列第几行
			for (let i = 0; i < 9; i++) {
				let col = [];
				for (let j = 0; j < 9; j++) {
					const type =  selectFrom(1,5);
					col.push({
						url: `/static/animal/a${type}.png`,
						type: type,
						i: i,
						j: j,
					})
				}
				this.animals.push(col)
			}
			this.judgeAllIsThree(); // 判断是否有三个的，有的话重新生成
		},

其中可能会有几率生成三个一行或一列的动物，这时候就要下面的方法进行判断并替换

            // 将生成的动物列表判断上下左右是否是三个
			judgeAllIsThree() {
				for (let i = 0; i < 9; i++) {
					for (let j = 0; j < 9; j++) {
						this.judgeNowIsThree(i,j);
					}
				}
			},
			
			// 判断当前动物上下左右是否是三个一样的，一样就重新生成动物
			judgeNowIsThree(i,j) {
				let nowType = this.animals[i][j].type;
				if (j!==0 && j!==8 && nowType === this.animals[i][j-1].type && nowType === this.animals[i][j+1].type) {
					this.animals[i][j] = this.createAnimal(i,j);
					this.judgeNowIsThree(i,j);
				} else if (i!==0 && i!==8 && nowType === this.animals[i-1][j].type && nowType === this.animals[i+1][j].type) {
					this.animals[i][j] = this.createAnimal(i,j);
					this.judgeNowIsThree(i,j);
				}
			},

            // 生成动物
			createAnimal(i, j, style = 0) {
				// 是否是消除球
				let styletype = 0;
				if (style !== 0) styletype = selectFrom(1,2);

				const type =  selectFrom(1,5);
				const animal = {
					url: `/static/animal/a${type}.png`,
					type: type,
					i: i,
					j: j,
					style: styletype // 是否是消除球
				};
				return animal;
			},

2、生成9*9的动物后，需要实现动物点击，动物交换，交换后需要判断是否是三个以及是否是爆炸球消除球等逻辑实现，最后进行消除操作

下面是动物点击的方法

// 动物点击判断
			animalClick(item) {
				// 如果正在移动，点击就应该没反应
				if (this.startMove) return;
				let si = this.selectA.i;
				let sj = this.selectA.j;
				console.log('22222', si, sj)
				// 单独点击了消除球
				if (si === -1 && sj === -1 && item.style !== undefined && item.style !== 0) {
					this.playAudio('/static/sound/amaz.mp3');
					// 删除一列后移动动物
					if (item.style === 1) {
						for(let jj=0; jj<9; jj++) {
							this.$set(this.animals[item.i], jj, {
								url: -1,
								type: -1,
								i: item.i,
								j: jj,
							})
							this.totalCount+=1;
						}
						setTimeout(()=> {
							this.moveAnimal();
						}, 200)
					} else {
						let minI = item.i - 1;
						let maxI = item.i + 1;
						let minJ = item.j - 1;
						let maxJ = item.j + 1;
						if (minI < 0) minI = 0;
						if (maxI > 8) maxI = 8;
						if (minJ < 0) minJ = 0;
						if (maxJ > 8) maxJ = 8;
						for(let ii=minI; ii<maxI+1; ii++) {
							for(let jj=minJ; jj<maxJ+1; jj++) {
								this.$set(this.animals[ii], jj, {
									url: -1,
									type: -1,
									i: ii,
									j: jj,
								})
								this.totalCount+=1;
							}
						}
						setTimeout(()=> {
							this.moveAnimal();
						}, 200)
					}
					this.selectA = {i: -1, j: -1};
					return;
				}
				// 点了两下的
				if(
					((si + 1 === item.i || si - 1 === item.i ) && sj === item.j)
					||
					((sj + 1 === item.j || sj - 1 === item.j ) && si === item.i)
				) {
					console.log('111111', si, sj, item)
					// 爆炸球碰到普通球
					if ((this.animals[si][sj].type === 'b2' && (item.type !== 'b2' && (item.style === undefined || item.style === 0))) ||
						(item.type === 'b2' && (this.animals[si][sj].type !== 'b2' && (this.animals[si][sj].style === undefined || this.animals[si][sj].style === 0)))
					) {
						this.playAudio('/static/sound/unbi.mp3');
						let nowType = -1;
						if (this.animals[si][sj].type !== 'b2') {
							nowType = this.animals[si][sj].type;
							this.$set(this.animals[item.i], item.j, {
								url: -1,
								type: -1,
								i: item.i,
								j: item.j,
							})
							this.totalCount+=1;
						}
						if (item.type !== 'b2') {
							nowType = item.type;
							this.$set(this.animals[si], sj, {
								url: -1,
								type: -1,
								i: si,
								j: sj,
							})
							this.totalCount+=1;
						}
						for(let ii=0; ii<9; ii++) {
							for(let jj=0; jj<9; jj++) {
								if (this.animals[ii][jj].type === nowType) {
									this.$set(this.animals[ii], jj, {
										url: -1,
										type: -1,
										i: ii,
										j: jj,
									})
									this.totalCount+=1;
								}
							}
						}
						this.selectA = {i: -1, j: -1};
						setTimeout(()=> {
							this.moveAnimal();
						}, 200)
						return;
					}
					// 爆炸球碰到消除球
					if ((this.animals[si][sj].type === 'b2' && (item.type !== 'b2' && (item.style !== undefined && item.style !== 0))) ||
						(item.type === 'b2' && (this.animals[si][sj].type !== 'b2' && (this.animals[si][sj].style !== undefined || this.animals[si][sj].style !== 0)))
					) {
						this.playAudio('/static/sound/wao.mp3');
						let nowType = -1;
						let nowStyle = 0;
						if (this.animals[si][sj].type !== 'b2') {
							nowType = this.animals[si][sj].type;
							nowStyle = this.animals[si][sj].style;
							this.$set(this.animals[item.i], item.j, {
								url: -1,
								type: -1,
								i: item.i,
								j: item.j,
							})
							this.totalCount+=1;
						}
						if (item.type !== 'b2') {
							nowType = item.type;
							nowStyle = item.style;
							this.$set(this.animals[si], sj, {
								url: -1,
								type: -1,
								i: si,
								j: sj,
							})
							this.totalCount+=1;
						}
						for(let ii=0; ii<9; ii++) {
							for(let jj=0; jj<9; jj++) {
								if (this.animals[ii][jj].type === nowType) {
									// 删除一列后移动动物
									if (nowStyle === 1) {
										for(let jjj=0; jjj<9; jjj++) {
											this.$set(this.animals[ii], jjj, {
												url: -1,
												type: -1,
												i: ii,
												j: jjj,
											})
											this.totalCount+=1;
										}
									} else {
										let minI = ii - 1;
										let maxI = ii + 1;
										let minJ = jj - 1;
										let maxJ = jj + 1;
										if (minI < 0) minI = 0;
										if (maxI > 8) maxI = 8;
										if (minJ < 0) minJ = 0;
										if (maxJ > 8) maxJ = 8;
										for(let iii=minI; iii<maxI+1; iii++) {
											for(let jjj=minJ; jjj<maxJ+1; jjj++) {
												this.$set(this.animals[iii], jjj, {
													url: -1,
													type: -1,
													i: iii,
													j: jjj,
												})
												this.totalCount+=1;
											}
										}
									}
								}
							}
						}
						this.selectA = {i: -1, j: -1};
						setTimeout(()=> {
							this.moveAnimal();
						}, 200)
						return;
					}
					
					// 如果是上下左右的，就交换
					this.changeAnimal(this.animals[si][sj], item);
					this.selectA = {i: -1, j: -1};
					// 如果没有删除的就交换回来
					let flag1 = this.judgeNowBigIsThree(si,sj);
					let flag2 = this.judgeNowBigIsThree(item.i,item.j);
					if (!flag1 && !flag2) {
						this.playAudio('/static/sound/change.mp3');
						setTimeout(() => {
							this.changeAnimal(this.animals[si][sj], this.animals[item.i][item.j]);
						}, 200)
					} else {
						this.playAudio('/static/sound/clear.mp3');
						this.startMove = true;
						// 如果删除了，就所有上面的动物向下移动一格
						setTimeout(()=> {
							this.moveAnimal();
						}, 200)
					}
				} else {
					this.selectA = {i: item.i, j: item.j};
					this.playAudio('/static/sound/click.mp3');
				}
				
			},

下面是动物交换的代码

// 交换动物
			changeAnimal(itemA, itemB) {
				const centerAnimal = this.animals[itemA.i][itemA.j];
				this.$set(this.animals[itemA.i], itemA.j, {
					url: itemB.url,
					type: itemB.type,
					i: itemA.i,
					j: itemA.j,
					style: itemB.style || 0 // 是否是消除球
				})
				this.$set(this.animals[itemB.i], itemB.j, {
					url: centerAnimal.url,
					type: centerAnimal.type,
					i: itemB.i,
					j: itemB.j,
					style: centerAnimal.style || 0 // 是否是消除球
				})
			},

下面是消除代码截图（因为代码量太大了就放了个截图）

具体可以到上面的github地址查看源代码：GitHub - taojiajie0605/uni-crush-tjj: uniapp实现简易版消消乐游戏

3、最后要把消除的动物进行方块补充，即从上到下生成动物并逐个下移（因为代码量太大了就放了个截图）

 具体可以到上面的github地址查看源代码：GitHub - taojiajie0605/uni-crush-tjj: uniapp实现简易版消消乐游戏

4、如果要发布到微信小程序可以看我的另一篇文章，详细描述了发布微信小程序的步骤：

uniapp从创建项目到发布微信小程序全流程记录_怎么用uiapp开发微信小程序并发布-CSDN博客

总结：

整体功能其实就是生成动物，交换动物，消除动物，最后在生成动物填补空缺。以上只附上了部分代码和部分截图功能，详细代码可以移步我的github查看：GitHub - taojiajie0605/uni-crush-tjj: uniapp实现简易版消消乐游戏

到此消消乐基本功能都实现了，但是还是有些问题没有解决，如全图都不能找到3个可以消除了怎么判断（其实就是卡关的问题），另外还存在爆炸球及消除球被消掉等问题，还需后续的继续优化迭代，如果有问题还请评论区留言哦