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

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

首先展示效果图：

下面附赠源码下载地址：SUMER XXL: 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地址查看源代码：SUMER XXL: uniapp实现简易版消消乐游戏

3、最后要把消除的动物进行方块补充，即从上到下生成动物并逐个下移（因为代码量太大了就放了个截图）
具体可以到上面的github地址查看源代码：SUMER XXL: uniapp实现简易版消消乐游戏

4、如果要发布到微信小程序可以查看我的另一篇文章，详细描述了发布微信小程序的步骤：
uniapp从创建项目到发布微信小程序全流程记录_怎么用uiapp开发微信小程序并发布-CSDN博客

总结：
整体功能其实就是生成动物，交换动物，消除动物，最后在生成动物填补空缺。以上只附上了部分代码和部分截图功能，详细代码可以下载查看：SUMER XXL: uniapp实现简易版消消乐游戏

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