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

Looker_song
发布于 2022-2-3 17:41
浏览
3收藏

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

前言

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

游戏逻辑

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;
            }
        }
    },

简单的JS鸿蒙小游戏——记忆翻牌之游戏逻辑详解-鸿蒙开发者社区

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));

简单的JS鸿蒙小游戏——记忆翻牌之游戏逻辑详解-鸿蒙开发者社区

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;
        }
    }

结语

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
Match.rar 6.38M 146次下载
已于2022-2-3 17:41:14修改
6
收藏 3
回复
举报
1条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

结合楼主之前的文章食用更佳——简单的JS鸿蒙小游戏——记忆翻牌之页面构建

回复
2022-2-4 10:34:23
回复
    相关推荐