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

Posted HarmonyOS技术社区

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的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;

结语

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

附件链接

https://harmonyos.51cto.com/resource/1691

想了解更多关于鸿蒙的内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#bkwz

::: hljs-center

:::

以上是关于简单的JS鸿蒙小游戏——记忆翻牌之游戏逻辑详解的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript小游戏--翻牌记忆游戏

js之翻牌游戏中的一个深刻感悟

Python游戏开发，pygame模块，Python实现记忆翻牌小游戏

Web前端---HTML+CSS+JS实现记忆纸牌游戏

挑战记忆力-Web前端实现记忆纸牌游戏（JS+CSS）

挑战记忆力-Web前端实现记忆纸牌游戏（JS+CSS）