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

已于 2024-05-22 17:01:06 修改
阅读量920 收藏 20
点赞数 15
分类专栏： uniapp小游戏 文章标签： uni-app 游戏 前端 vue.js javascript 小程序
于 2024-05-22 16:59:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37057426/article/details/139122532
版权

首先展示效果图：

下面附赠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个可以消除了怎么判断（其实就是卡关的问题），另外还存在爆炸球及消除球被消掉等问题，还需后续的继续优化迭代，如果有问题还请评论区留言哦

小飞机噗噗噗
关注
  • 15
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp:app根据角色显示不同tabbar_《妙连千军》阵地三消融合Roguelike的角色扮演策略游戏...
weixin_39575850的博客
11-27 322
前言《妙连千军》是由TallRoad Studio研发Boke Technology Co., Ltd发行的一款阵地三消融合Roguelike的角色扮演策略游戏。其将经典的消消乐玩法和兵种对战结合在一起，再加上随机元素的融入，给玩家一种新的三消游戏体验。游戏分为两个方面，冒险方面有点类似前不久笔者玩过的一款《月圆之夜》的游戏，而战斗方面则是使用了三消游戏的消除类玩法，在游戏开始还有英雄选择，英雄的...
图片消消乐-休闲小游戏-微信小程序-项目源码
02-09
这是一个微信小程序项目源码，是经典怀旧的图片消消乐游戏，休闲小游戏，适合新手入门参考学习。 能学到什么： ① 如何用一直canvas画布实现消消乐动画； ② 理解参数的传递，对象的引用； ③ 理解Promise异步处理优势; 相关指导教程请看作者发表的文章 https://blog.csdn.net/zs1028/article/details/128925585
H5微信小游戏源码-开心消消乐.zip
11-11
H5微信小游戏源码-开心消消乐.zip
【2024最新版】Uniapp有奖猜歌游戏小程序系统源码 带流量主 二开修复版
最新发布
m0_73348158的博客
05-19 342
有奖猜歌游戏是一款基于uni-app、uniCloud、uniAD 开发的小游戏，通过猜歌曲、观看广告赚取现金奖励。本游戏基本特征如下：玩家可以通过猜歌、做任务等方式直接获取现金奖励玩家可以通过猜歌、拆红包、做任务等方式获取金币奖励，当金币累积到一定数量可以兑换现金玩家可以通过做带有抽奖字样的任务获取现金抽奖次数现金抽奖次数可以通过大转盘获取不等额的现金玩家每猜对一首歌曲，会显示连对，连续猜对会有更多奖励，并可以通过观看激励视频广告获取不同倍数的奖励。
Uniapp有奖猜歌游戏系统源码 带流量主
软希网分享源码的博客
11-27 564
Uniapp有奖猜歌游戏系统源码 带流量主
uni-app 超详细教程（ 附送250套精选项目源码）
梦之归途的博客
05-07 2090
pages.json ：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等manifest.json ：文件是应用的配置文件，用于指定应用的名称、图标、权限等。App.vue：是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。main.js：是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。uni.scss：文件的用途是为了方便整体控制应用的风格。
html5微信小游戏源码 开心消消乐（仅用于参考）
01-25
html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）html5微信小游戏源码 开心消消乐（仅用于参考）
图片消消乐-休闲小游戏-小程序-uniapp项目源码
02-09
这是一个uniapp小程序项目源码，是经典怀旧的图片消消乐游戏，休闲小游戏，用HbuilderX工具打开项目源码直接运行，适合新手入门参考学习。 能学到什么： ① 如何用一直canvas画布实现消消乐动画； ② 理解参数的传递，对象的引用； ③ 理解Promise异步处理优势; 相关指导教程请看作者发表的文章 https://blog.csdn.net/zs1028/article/details/128925585
uniapp实现防痴呆小游戏实现及效果展示
爱我非你莫属的博客
10-28 3366
抖音上的防痴呆小游戏实现及效果展示 主要代码展示： https://github.com/likeU-ctrl-c/findPicture/tree/main 使用uniapp代码编写最后编译为微信小程序。 已经发布到github上，效果展示可以搜索小程序《你变笨了吗？》进行查看。 ...
小游戏——天天消消乐（附带源码）
qq_41067077的博客
03-11 542
javascrip小游戏
Appgamekit制作消消乐小游戏（附代码）#3
一起白因必有果，你的报应就是我
02-10 1379
导语 上次居然仅仅只做到了第三步，这样的速度让我不敢相信！我的编程工作已经做到了第七步了（目前因为技术问题卡住了…）接下来我会加快脚步了。（文章接下来会贴更多的代码，并且每个代码块之间间隔很短，请谅解） 这些文章建议没有读过的从头阅读，否则你可能不知道我在干什么 最近我一直在看Appgamekit的官方文档，一直没有更新，惭愧不已，马上肝出来了这篇文章！让我们开始吧，Link start!!! 代...
斗兽棋游戏-uniapp-项目源码
05-16
这是一个uniapp项目小程序源码，是经典怀旧的斗兽棋游戏，适合新手入门参考学习。 相关指导教程请看作者发表的文章https://blog.csdn.net/zs1028/article/details/124788721
方块消消乐-游戏-uniapp-项目源码
11-27
这是一个uniapp应用项目源码完整，是酷似俄罗斯方块的消消乐游戏，通过HBuilder X开发工具选uniapp方式打开，uniapp项目可编译发行跨端应用（包括了各种小程序以及APP），可编译正常运行，适合新手入门参考学习。 相关指导教程请看作者发表的文章https://blog.csdn.net/zs1028/article/details/134621988
小鱼消消乐.zip小程序小游戏源码微信小程序源码下载
06-03
小鱼消消乐.zip小程序小游戏源码微信小程序源码下载小鱼消消乐.zip小程序小游戏源码微信小程序源码下载小鱼消消乐.zip小程序小游戏源码微信小程序源码下载小鱼消消乐.zip小程序小游戏源码微信小程序源码下载 ...
图片消消乐-休闲游戏-微信小游戏-项目源码
05-19
这是一个微信小游戏项目源码，是经典怀旧的图片消消乐游戏，休闲游戏，以下还有↓ 请用微信开发者工具选小游戏导入即可，可正常编译运行，放心下载， 适合新手入门参考学习，能学到什么： ① 如何用一直canvas画布...
2048小游戏 vue+uni-app 简单实现了一下
m0_57533694的博客
04-19 3726
做的一个 挺有意思的小游戏
uniapp实现猜数字小游戏
2302_78065311的博客
05-28 629
一个uniapp的样例，超级简单~效果图在最后~
小游戏之斗兽棋（uniapp）
PlutoZML的博客
03-09 2714
学习的同时别忘了娱乐，注意劳逸结合。
uniapp 做一款消消乐小游戏
10-08
Uniapp是一种跨平台的应用开发框架，可以在多个平台上开发应用程序，包括类似消消乐的小游戏。使用Uniapp来开发一款消消乐小游戏是完全可行的。 首先，我们可以使用Uniapp的Vue.js框架来设计游戏的页面和交互逻辑。Vue.js是一种流行的JavaScript框架，可以很方便地创建交互式的用户界面。 接下来，我们可以利用Uniapp的跨平台特性，将游戏发布到不同的平台上，如iOS、Android、H5等。这意味着玩家可以在不同的设备上畅玩这款小游戏。 在游戏的设计中，我们可以使用Uniapp提供的组件和插件来实现消除乐的核心逻辑。比如，可以利用Uniapp的倒计时插件来设置游戏的时间限制，利用组件库中的卡片组件来显示游戏中的方块，并通过触摸事件来判断用户的点击操作。 另外，Uniapp还提供了一些常用的功能和特性，如数据绑定、动态样式、动画效果等，这些功能可以帮助我们更好地开发消消乐小游戏。比如，可以通过数据绑定来实时更新游戏的得分，通过动态样式来改变游戏中的方块外观，通过动画效果来增加游戏的可玩性。 总之，Uniapp是一个非常强大的开发工具，可以帮助我们快速开发一款消消乐小游戏，并将其发布到多个平台上。无论是作为个人娱乐还是商业开发，Uniapp都是一个非常值得考虑的选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值