简单的JS鸿蒙小游戏——记忆翻牌之游戏逻辑详解 原创 精华

春节不停更，此文正在参加「星光计划-春节更帖活动」

前言

书接上回，完成游戏页面的构建后，今天带大家详细讲讲游戏逻辑的具体实现代码。其实整个游戏逻辑的实现并不难，相信大家看完之后都有能力自己开发出简单的小游戏。

游戏逻辑

1、游戏时间区间设置

• 设置两个变量MeTime和MaxTime分别作为游戏记忆时间和游戏限定时间的默认值。

var MeTime = 15;
var MaxTime = 60;

• 用timeset函数改变这两个属性的值，在hml文件中对应的加减按钮分别传参（变量名和差值）。另外在修改语句外加一个执行判断用以限定时间的设置区间。

    timeset(time, alter) {
        if(time == "metime") {
            if((5 <= this.metime+alter) && (30 >= this.metime+alter)) {
                this.metime += alter;
            }
        }
        else {
            if((20 <= this.maxtime+alter) && (120 >= this.maxtime+alter)) {
                this.maxtime += alter;
            }
        }
    },

2、顶部计时器

• 事先声明两个重复计时器setdown和setadd。

var setdown;
var setadd;

• 开始游戏进入记牌环节，重复计时器setdown从设置中获取变量metime的值作为记忆时间，倒计时直至为0。之后清除该计时器，启动另一重复计时器setadd。

    //倒计时记忆时间
    memory() {
        setdown = setInterval(()=> {
            this.thetime --;
            if(0 >= this.thetime) {
                //开启可点击，开始正向计时，
                clearInterval(setdown);
                this.tick = false;
                this.L_dab = false;
                this.R_dab = false
                //盖上图片
                for(var all=0; all<24; all++) {
                    this.cards[all].src = "unknown";
                    this.cards[all].dab = false;
                }
                this.timing();
            }
        }, 1000);
    },

• 重复计时器setadd开始正向计时，直至达到限定时间maxtime或是玩家完成游戏。

    //正向计时，监控匹配判断，超时判断，完成判断
    timing() {
        setadd = setInterval(()=> {
            this.thetime += 1;
            console.info(JSON.stringify(this.tempqueue));
            if(1 < this.tempqueue.length) {
                //执行判断
                this.cover();
            }
            if(12 <= this.score) {
                clearInterval(setadd);
                this.result = "游戏胜利！";
                console.info("游戏胜利！");
                this.popup = true;
                this.L_dab = true;
                this.R_dab = true;
            }
            if(this.maxtime <= this.thetime) {
                clearInterval(setadd);
                this.result = "超时失败……";
                console.info("超时失败……");
                this.popup = true;
                this.L_dab = true;
                this.R_dab = true;
            }
        }, 1000);
    },

• 游戏过程中点击计时器暂停游戏计时，清除当前的重复计时器，点击“继续游戏”重新启动对应的重复计时器接着计时。其中以标识符变量tick记录当前是处于牌组记忆环节还是游戏配对环节。

    //暂停游戏
    gamestop() {
        this.pause = true;
        if(true == this.tick) {
            for(var all=0; all<24; all++) {
                this.cards[all].src = "unknown";
            }
            clearInterval(setdown);
        }
        else {
            clearInterval(setadd);
        }
    },

3、随机打乱牌堆

• 设置两个循环分别将左右牌组各十二张图片随机打乱。

    //打乱牌堆
    mess_up() {
        var Lindex, Rindex;
        var temp;       //临时置换变量
        var ran;     //随机下标
        //打乱左边图标（0~11）
        for(Lindex=0; Lindex<12; Lindex++) {
            ran = Math.floor(Math.random()*12);
            temp = this.cards[Lindex];
            this.cards[Lindex] = this.cards[ran];
            this.cards[ran] = temp;
        }

        //打乱右边图标（12~23）
        for(Rindex=12; Rindex<24; Rindex++) {
            ran = Math.floor(Math.random()*12) + 12;
            temp = this.cards[Rindex];
            this.cards[Rindex] = this.cards[ran];
            this.cards[ran] = temp;
        }

        for(var all=0; all<24; all++) {
            this.cards[all].src = this.cards[all].index;
        }

        //启动倒计时
        this.memory();
    },

• 为了方便测试可以在日志上打印打乱后的牌组序列进行验证。

        var LLL = new Array;
        var RRR = new Array;
        //打印左边序号
        console.info("————左边————");
        for(var l=0; l<12; l++) {
            LLL.push(this.cards[l].index);
        }
        console.info(JSON.stringify(LLL));
        //打印右边序号
        console.info("————右边————");
        for(var r=12; r<24; r++) {
            RRR.push(this.cards[r].index);
        }
        console.info(JSON.stringify(RRR));

4、“盖上”图片

这里的“盖上”图片是指将原本的图片替换成统一的未知问号图片。

                //盖上图片
                for(var all=0; all<24; all++) {
                    this.cards[all].src = "unknown";
                    this.cards[all].dab = false;
                }

• 在记忆准备环节点击暂停会“盖上”所有图片；
• 在倒计时结束进入游戏配对环节后，会“盖上”所有的图片；
• 在配对失败后会重新“盖上”图片。

5、翻看图片

点击某个问号图片可以翻开显示，之后锁定这一边为不可点击状态，玩家只能点击翻开另一边牌组的某个图片进行配对。

    //翻牌
    turnover(index) {
        console.info("点击了" + index);
        if(this.cards[index].src != "unknown") {
            console.info("请翻别的牌");
            return;
        }
        this.tempqueue.push(index);
        this.cards[index].src = this.cards[index].index;
        this.cards[index].dab = true;
        if(index < 12) {
            this.L_dab = true;
        }
        else {
            this.R_dab = true;
        }
        if((true == this.L_dab) && (true == this.R_dab)) {
            this.L_dab = false;
            this.R_dab = false;
        }
    },

6、配对逻辑

配对逻辑判断置于重复计时方法中，每次翻看图片后会将其下标入队，计时器每秒都会监控队列长度，当队列长度大于1时，则两两一组执行配对判断。当配对成功后配对成功计数器加一，配对失败则将这组图片重新“盖上”，再将队首的两个元素出队。当限定时间内计数器达到12时弹出游戏胜利弹窗。

    //重新盖牌
    cover() {
        if(this.cards[this.tempqueue[0]].index != this.cards[this.tempqueue[1]].index) {
            console.info("配对失败");
            this.cards[this.tempqueue[0]].src = "unknown";
            this.cards[this.tempqueue[0]].dab = false;
            this.cards[this.tempqueue[1]].src = "unknown";
            this.cards[this.tempqueue[1]].dab = false;
        }
        else {
            console.info("配对成功");
            this.score += 1;
        }
        this.tempqueue.splice(0, 2);
    },

7、游戏环节切换

• 暂停游戏

    //暂停游戏
    gamestop() {
        this.pause = true;
        if(true == this.tick) {
            for(var all=0; all<24; all++) {
                this.cards[all].src = "unknown";
            }
            clearInterval(setdown);
        }
        else {
            clearInterval(setadd);
        }
    },

• 继续游戏

    //继续游戏
    resume() {
        this.pause = false;
        if(true == this.tick) {
            for(var all=0; all<24; all++) {
                this.cards[all].src = this.cards[all].index;
            }
            this.memory();
        }
        else {
            this.timing();
        }
    },

• 重新开始

    //重新开始
    restart() {
        this.L_dab = true;
        this.R_dab = true;
        this.tempqueue = [];
        this.score = 0;
        this.popup = false;
        this.pause = false;
        this.gameset = false;
        this.tick = true;
        clearInterval(setdown);
        clearInterval(setadd);
        this.thetime = this.metime;
        for(var all=0; all<24; all++) {
            this.cards[all].src = "unknown";
            this.cards[all].dab = false;
        }
        this.mess_up();
    },

• 返回设置

    //返回设置弹窗
    toset() {
        this.L_dab = true;
        this.R_dab = true;
        this.thetime = 0;
        this.tempqueue = [];
        this.score = 0;
        this.popup = false;
        this.pause = false;
        this.gameset = true;
        for(var all=0; all<24; all++) {
            this.cards[all].src = (all)%12 + 1;
            this.cards[all].dab = false;
        }
    }

结语

希望这个小游戏能吸引更多的开发者加入鸿蒙应用开发的行列中来，共同学习，共同进步，一起为鸿蒙生态共建出力。