首先展示效果图：
下面附赠github地址：GitHub - taojiajie0605/uni-crush-tjj: uniapp实现简易版消消乐游戏
游戏规则介绍：
每次点击交换两个图，如果是三个一样的则消除，上方的方块向下填充，如果没有消除的则恢复原来的位置；其中如果是4个消除的，消除同时产生一个消除球，消除球有两种功能（一种是点击消除周围9个，第二种是点击消除一列），如果消除的是5个，在消除的同时产生一个爆炸球，爆炸球在交换点击别的种类动物时会消除全图的改种类动物。其中如果爆炸球遇到消除球，那么全图该种类的动物都会执行消除球的效果，即全图该种类的动物都会消除一列或者周围9个。
下面就是游戏具体实现：
1、首先实现9*9的方块，以及动物种类随机生成方法的封装
下面是在onLoad方法里通过随机数方法selectFrom实现初步9*9的动物
typescript
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(); // 判断是否有三个的，有的话重新生成
},其中可能会有几率生成三个一行或一列的动物，这时候就要下面的方法进行判断并替换
ini
// 将生成的动物列表判断上下左右是否是三个
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的动物后，需要实现动物点击，动物交换，交换后需要判断是否是三个以及是否是爆炸球消除球等逻辑实现，最后进行消除操作
下面是动物点击的方法
ini
// 动物点击判断
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');
}
},下面是动物交换的代码
kotlin
// 交换动物
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、如果要发布到微信小程序可以看我的另一篇文章，详细描述了发布微信小程序的步骤：
总结：
整体功能其实就是生成动物，交换动物，消除动物，最后在生成动物填补空缺。以上只附上了部分代码和部分截图功能，详细代码可以移步我的github查看：GitHub - taojiajie0605/uni-crush-tjj: uniapp实现简易版消消乐游戏
到此消消乐基本功能都实现了，但是还是有些问题没有解决，如全图都不能找到3个可以消除了怎么判断（其实就是卡关的问题），另外还存在爆炸球及消除球被消掉等问题，还需后续的继续优化迭代，如果有问题还请评论区留言哦