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

Looker_song

发布于 2022-2-3 17:41

浏览

3收藏

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

前言

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

游戏逻辑

1、游戏时间区间设置

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

var MeTime = 15;
var MaxTime = 60;
1.
2.

用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;
            }
        }
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

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

2、顶部计时器

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

var setdown;
var setadd;
1.
2.

开始游戏进入记牌环节，重复计时器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);
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

重复计时器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);
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

游戏过程中点击计时器暂停游戏计时，清除当前的重复计时器，点击“继续游戏”重新启动对应的重复计时器接着计时。其中以标识符变量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);
        }
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

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();
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

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

        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));
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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

4、“盖上”图片

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

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

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

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;
        }
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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);
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

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);
        }
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

继续游戏

    //继续游戏
    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();
        }
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

重新开始

    //重新开始
    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();
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

返回设置

    //返回设置弹窗
    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;
        }
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

结语

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

分类

HarmonyOS

JavaScript

标签

「过年不停更」

Match.rar 6.38M 148次下载

已于2022-2-3 17:41:14修改

1条回复

按时间正序

按时间倒序

红叶亦知秋

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

2022-2-4 10:34:23

51CTO

51CTO博客

51CTO学堂

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

前言

游戏逻辑

1、游戏时间区间设置

2、顶部计时器

3、随机打乱牌堆

4、“盖上”图片

5、翻看图片

6、配对逻辑

7、游戏环节切换

结语

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

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

前言

游戏逻辑

1、游戏时间区间设置

2、顶部计时器

3、随机打乱牌堆

4、“盖上”图片

5、翻看图片

6、配对逻辑

7、游戏环节切换

结语

目录

订阅鸿蒙技术特刊，精选内容抢先看

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